:root {
  --bg: #f7f6f0; --card: #fffefa; --card2: #f8f9f5;
  --text: #334b40; --muted: #647166; --border: #e2e8dd;
  --accent: #477b66; --accent-soft: #eaf2e8; --apricot: #f8ecda;
  --lavender: #eee8f4; --radius: 22px;
  --shadow: 0 12px 36px rgba(50, 75, 53, .045), 0 2px 7px rgba(50, 75, 53, .025);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { scroll-behavior: smooth; scroll-padding-top: 102px; }
body { margin: 0; padding-bottom: 40px; font-family: "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei UI", "Microsoft YaHei", -apple-system, sans-serif; background: radial-gradient(ellipse at 5% 0%, #ecf2e7 0, transparent 38%), radial-gradient(ellipse at 94% 12%, #f5edde 0, transparent 28%), var(--bg); color: var(--text); font-size: 15px; line-height: 1.75; letter-spacing: .015em; -webkit-font-smoothing: antialiased; }
h1, h2, h3, p { margin: 0; } h2 { font-size: 19px; font-weight: 650; margin-bottom: 10px; letter-spacing: -.015em; } h3 { font-size: 15px; font-weight: 600; margin-bottom: 10px; }
button, input, select, textarea { font: inherit; } button { cursor: pointer; } button:disabled { opacity: .48; cursor: not-allowed; }
a { color: #3f755c; text-underline-offset: 3px; } input, select, textarea { border: 1px solid #cbd7c9; border-radius: 11px; padding: 10px 12px; background: #fffefa; color: var(--text); max-width: 100%; min-width: 0; }
textarea { resize: vertical; } input:focus, select:focus, textarea:focus, button:focus-visible, a:focus-visible, summary:focus-visible { outline: 3px solid #96b5a1; outline-offset: 3px; }
input[type=checkbox] { accent-color: var(--accent); width: 18px; height: 18px; padding: 0; flex: none; }
select[multiple] { min-height: 130px; width: 100%; padding: 8px; } select[multiple] option { padding: 5px 7px; border-radius: 5px; } select[multiple] option:checked { background: #dfeade linear-gradient(#dfeade, #dfeade); color: #2f5540; }
fieldset { border: 0; margin: 0; padding: 0; } [hidden] { display: none !important; } [id] { scroll-margin-top: 102px; }
.header { background: rgba(255, 254, 248, .92); border-bottom: 1px solid var(--border); padding: 20px 28px; }
.header-inner { max-width: 1120px; margin: auto; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.header-brand { display: flex; align-items: center; gap: 12px; }.brand-mark { width: 46px; height: 46px; flex: none; }
.header h1 { font-size: 23px; font-weight: 650; letter-spacing: .5px; }.header h1 span { color: var(--accent); }.header small { font-size: 12px; font-weight: 400; color: var(--muted); margin-left: 12px; }
.date { font-size: 12px; color: var(--muted); margin-top: 3px; }.session-bar { display: flex; align-items: center; gap: 12px; font-size: 13px; }
.container { max-width: 1176px; padding: 26px 24px; margin: auto; }
.card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; margin-bottom: 20px; box-shadow: var(--shadow); }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }.section-heading h2 { margin-bottom: 0; }
.feature-heading { display: flex; align-items: center; gap: 13px; min-width: 0; }.feature-heading h2 { margin-bottom: 0; }.feature-icon { width: 58px; height: 58px; flex: none; }.mini-icon { width: 36px; height: 36px; }
.section-kicker { font-size: 12px; line-height: 1.5; color: #61745f; margin-bottom: 3px; }.card-note { font-size: 13px; color: var(--muted); line-height: 1.85; margin-bottom: 16px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 17px; border-radius: 12px; font-size: 13px; font-weight: 600; background: #fffefa; color: #45634f; border: 1px solid #cfdbca; min-height: 44px; transition: background .18s, border-color .18s, transform .18s; }
.btn:hover:enabled { background: #edf3e9; border-color: #9fb89f; transform: translateY(-1px); }.btn-important { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 4px 10px rgba(62, 108, 78, .10); }.btn-important:hover:enabled { background: #3e6c57; border-color: #3e6c57; }.btn-skip { color: #51694f; }
.field { display: flex; flex-direction: column; gap: 7px; font-size: 13px; font-weight: 500; margin-bottom: 14px; }.check-field { display: flex; gap: 9px; align-items: center; font-size: 14px; margin: 14px 0; }.field-label { font-size: 12px; color: var(--muted); }
.footnote { font-size: 12px; color: #657060; line-height: 1.85; margin-top: 13px; }.muted { font-size: 13px; color: var(--muted); }
.eyebrow { color: #4e715b; font-size: 12px; letter-spacing: .08em; }.soft-tag { display: inline-flex; color: #46694e; background: #e9efdf; border: 1px solid #d6e2cc; padding: 4px 12px; border-radius: 999px; font-size: 12px; }
.login-card { max-width: 956px; margin: 28px auto; padding: 0; display: grid; grid-template-columns: 1.1fr 1fr; overflow: hidden; }
.login-intro { background: linear-gradient(145deg, #eef2e5, #f8f4e9); padding: 34px 34px 22px; }.login-intro .eyebrow { margin-top: 24px; }.login-card h2 { font-size: 29px; margin: 7px 0 16px; }.login-intro .card-note { margin-bottom: 0; }.login-form-panel { padding: 48px 38px; align-self: center; }
.login-form-heading { display: flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 600; margin-bottom: 27px; }.login-form-panel .field { margin-bottom: 20px; }.login-form-panel .btn { width: 100%; margin-top: 7px; min-height: 48px; }.login-form-panel .footnote { padding-top: 18px; border-top: 1px solid var(--border); margin-top: 26px; }
.brand-art { position: relative; flex: none; }.brand-art img { display: block; object-fit: contain; width: 100%; height: auto; }.brand-art .art-fallback { display: none; width: 60%; height: 60%; position: absolute; left: 20%; top: 20%; }.brand-art.art-missing .art-fallback { display: block; }
.login-art { width: min(320px, 100%); height: 290px; margin: 2px auto -10px; }.login-art img { height: 290px; }.login-caption { color: #577153; font-size: 13px; text-align: center; letter-spacing: .08em; }
.dashboard-hero { display: flex; align-items: center; justify-content: space-between; gap: 28px; padding: 24px 34px; border: 1px solid #dde6d5; background: linear-gradient(115deg, #edf2e7, #faf5e9 75%, #eee9f3); border-radius: 26px; margin-bottom: 22px; min-height: 234px; overflow: hidden; }
.hero-copy { min-width: 0; }.hero-copy h2 { font-size: 29px; margin: 15px 0 7px; color: #3c5845; letter-spacing: -.035em; }.hero-copy > p { color: #5a7058; font-size: 14px; }.hero-promises { display: flex; gap: 9px 15px; flex-wrap: wrap; margin-top: 19px; font-size: 12px; color: #546d50; }.hero-promises span { display: inline-flex; align-items: center; gap: 7px; }.hero-promises span::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: #8daa82; }.hero-art { width: 244px; height: 214px; margin: -12px -8px -14px 0; }.hero-art img { height: 234px; }
.pairing-card { padding: 23px 26px; }.pairing-card .section-heading { margin-bottom: 11px; }.pair-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }.pair-box { background: #edf4e8; border: 1px solid #c9d9bc; border-radius: 15px; padding: 16px; margin-top: 16px; }.pair-box code { display: block; font-family: Consolas, monospace; font-size: 22px; color: #365a3d; letter-spacing: .09em; overflow-wrap: anywhere; margin: 7px 0; user-select: all; }.pair-box.expired { opacity: .55; }
.row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; font-size: 12px; }.device-field { margin: 20px 0 0; }.device-field select { background: #f8faf5; }
.empty-state { padding: 28px 18px 16px; text-align: center; color: var(--muted); font-size: 13px; background: #f5f8f0; border: 1px dashed #d5e1cb; border-radius: 15px; margin-top: 18px; }.empty-state strong { display: block; font-size: 17px; color: var(--text); margin-bottom: 9px; }.empty-state p + p { margin-top: 6px; }
#deviceWorkspace { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); gap: 20px; align-items: start; }.span-full { grid-column: 1 / -1; }#deviceWorkspace > .card, #deviceWorkspace > .guard-panel, #deviceWorkspace > .notice { margin-bottom: 0; }
.feature-nav { display: flex; gap: 4px; align-items: center; padding: 7px; background: #fffef8; border: 1px solid var(--border); border-radius: 18px; position: sticky; top: 12px; z-index: 10; box-shadow: 0 6px 20px rgba(52, 79, 53, .07); overflow-x: auto; scrollbar-width: thin; }
.feature-nav a { display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex: 1 0 auto; padding: 7px 10px; min-height: 42px; border-radius: 11px; color: #476249; text-decoration: none; white-space: nowrap; font-size: 12px; }.feature-nav a:hover { background: #edf2e7; }.feature-nav svg { width: 25px; height: 25px; flex: none; }
.guard-panel { background: linear-gradient(145deg, #294338, #24372e); color: #f0f4ed; border: 1px solid #324d3c; border-radius: var(--radius); padding: 23px; box-shadow: var(--shadow); margin-bottom: 20px; }.gp-head { background: rgba(255, 255, 255, .055); padding: 14px; border-radius: 15px; margin-bottom: 12px; }.gp-head h2 { color: #e6f0da; font-size: 18px; margin-bottom: 0; }.gp-head > p { font-size: 13px; color: #c8d8c9; line-height: 1.8; margin-top: 12px; }.guard-panel .section-kicker { color: #c2d4bc; }.status-card .gp-head { padding: 0; background: transparent; }.status-card .gp-head > p { margin-left: 71px; margin-top: 7px; }
.guard-status { display: flex; align-items: center; gap: 9px; padding: 13px 15px; border-radius: 13px; background: rgba(255, 255, 255, .065); margin: 14px 0 10px; flex-wrap: wrap; font-size: 14px; }.gs-dot { width: 10px; height: 10px; border-radius: 50%; background: #a8b6a6; flex: none; }.gs-dot.on { background: #a9d58b; box-shadow: 0 0 8px rgba(169, 213, 139, .25); }.gs-dot.warning { background: #e8be79; }.gs-dot.off { background: #edaaa0; }.gs-btn { margin-left: auto; }
.guard-panel .btn { background: rgba(255, 255, 255, .06); border-color: #7a917b; color: #e4ecd9; }.guard-panel .btn:hover:enabled { background: rgba(255, 255, 255, .12); border-color: #9cb695; }
.status-detail { font-size: 12px; line-height: 1.8; color: #c8d8c9; margin: 10px 4px; }.guard-stats { display: flex; gap: 10px; margin: 12px 0; flex-wrap: wrap; }.gs-item { flex: 1; min-width: 110px; background: rgba(255, 255, 255, .065); border: 1px solid rgba(203, 220, 196, .16); border-radius: 15px; padding: 14px 10px; text-align: center; }.gs-num { display: block; font-size: 25px; font-weight: 650; color: #d5e6c1; line-height: 1.5; }.gs-time { font-size: 13px; font-weight: 500; }.gs-label { font-size: 12px; color: #c7d6c3; display: block; margin-top: 3px; }.gs-tip { font-size: 12px; color: #c7d6c3; margin: 10px 4px; line-height: 1.8; }
.scope-summary { display: flex; gap: 7px; flex-wrap: wrap; margin: 15px 4px; }.scope-chip { font-size: 11px; padding: 3px 9px; border-radius: 8px; background: #425e47; color: #ebf3e2; }.scope-chip.disabled { background: #354b3d; color: #cdd9c8; }.guard-actions { display: flex; gap: 9px; flex-wrap: wrap; margin: 14px 0; }.guard-picked { margin: 12px 4px; font-size: 13px; color: #dbe6d4; }
.guard-search input[type=search] { width: 100%; border: 1px solid #8fa28b; background: rgba(255, 255, 255, .06); color: #f1f4ed; font-size: 14px; }.guard-search input::placeholder { color: #c0cebb; }.gs-only { display: flex; align-items: center; gap: 7px; margin-top: 10px; font-size: 13px; color: #dae4d4; }.gs-only input, .app-item input { accent-color: #79a174; }
.app-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; margin: 12px 0; max-height: 355px; overflow: auto; padding: 3px; scrollbar-width: thin; }.app-item { display: flex; align-items: center; gap: 10px; padding: 12px 10px; border-radius: 12px; background: rgba(255, 255, 255, .04); cursor: pointer; border: 1px solid transparent; }.app-item:hover { background: rgba(255, 255, 255, .08); }.app-item.sel { border-color: #a5c192; background: rgba(157, 185, 143, .16); }.app-name { display: block; font-weight: 600; font-size: 14px; overflow-wrap: anywhere; }.app-pkg { display: block; font-size: 11px; color: #c4d0bd; overflow-wrap: anywhere; }.app-empty { font-size: 13px; color: #cfdbc7; padding: 12px; }.badge-common { font-weight: 400; margin-left: 6px; padding: 2px 5px; border-radius: 5px; background: #496148; color: #e3edda; font-size: 10px; }
.apps-card { background: #f0f4e9; color: var(--text); border-color: #d7e3ca; }.apps-card .gp-head { background: #e5ecda; }.apps-card .gp-head h2 { color: #355439; }.apps-card .gp-head > p, .apps-card .section-kicker { color: #53694c; }.apps-card .btn { background: #fffef8; border-color: #bdcfaf; color: #43653b; }.apps-card .btn:hover:enabled { background: #e5eddc; }.apps-card .gs-tip, .apps-card .guard-picked, .apps-card .gs-only { color: #546b4d; }.apps-card .guard-search input[type=search] { background: #fffefa; border-color: #b6c9a8; color: #364e34; }.apps-card .guard-search input::placeholder { color: #667b5e; }.apps-card .app-item { background: #fafcf7; border-color: #dfe8d6; }.apps-card .app-item:hover { background: #eaf1e0; }.apps-card .app-item.sel { background: #dfeccf; border-color: #8daa7b; }.apps-card .app-pkg, .apps-card .app-empty { color: #536749; }.apps-card .badge-common { background: #dfe8d1; color: #526b43; }
.feature-card .feature-heading { margin-bottom: 0; }.focus-card { background: linear-gradient(140deg, #fffefa, #fcf7ed); border-color: #e7dfca; }.focus-card .pill { background: #f5ead5; color: #77623f; }.screen-card { border-color: #e2dbea; }.screen-card .section-kicker { color: #70647b; }.reminder-card { border-color: #ebdfca; }.reminder-card .section-kicker { color: #766443; }.save-card { background: #f9fbf4; }.save-card > .feature-heading { margin-bottom: 15px; }
.pill { background: #eaf1e3; color: #546e46; font-size: 11px; padding: 4px 9px; border-radius: 8px; white-space: nowrap; }.schedule-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }.rule-section { margin-top: 7px; padding-top: 17px; border-top: 1px solid var(--border); min-width: 0; }.rule-list { display: grid; gap: 9px; margin: 10px 0 16px; }.rule-item, .request-item { background: #f8faf3; border: 1px solid #e1e8d9; border-radius: 13px; padding: 14px; font-size: 13px; overflow-wrap: anywhere; }.rule-heading { display: flex; align-items: center; justify-content: space-between; gap: 9px; flex-wrap: wrap; }.rule-heading strong { font-size: 13px; }.rule-item p, .request-item p { color: var(--muted); font-size: 12px; margin-top: 7px; }.rule-remove { padding: 6px 10px; min-height: 36px; font-size: 12px; }
.days { display: flex; gap: 6px; flex-wrap: wrap; margin: 14px 0; }.days legend { font-size: 13px; margin-bottom: 8px; }.days label { display: inline-flex; align-items: center; gap: 5px; background: #edf2e5; padding: 6px 8px; border-radius: 8px; font-size: 12px; }.time-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: end; }.time-row .field { flex: 1; min-width: 135px; }.time-row .btn { margin-bottom: 14px; }.schedule-form { padding: 16px; background: #f6f8f0; border: 1px dashed #cad8bd; border-radius: 15px; }.schedule-form .footnote { margin-top: 0; }
.scope-note { font-size: 13px; color: #806334; padding: 12px 14px; background: #fcf2dd; border: 1px solid #eddec0; border-radius: 12px; margin: 12px 0; }.scope-note .btn { margin: 10px 0 0; display: flex; }.cooldown-field { max-width: 240px; }.save-row { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-top: 18px; padding: 15px; background: #eaf2e2; border: 1px solid #d5e2c8; border-radius: 14px; }.save-message { font-size: 13px; color: #45673e; margin-top: 13px; white-space: pre-wrap; line-height: 1.85; }.save-message:empty { display: none; }.save-message.error { color: #a44438; }
.notice { background: #ecf3e6; border: 1px solid #bacead; color: #45623d; border-radius: 16px; padding: 16px 18px; margin-bottom: 18px; font-size: 13px; overflow-wrap: anywhere; }.notice strong { font-size: 14px; }.notice p { margin: 6px 0 11px; }.notice.error, .conflict { background: #fff0e9; border-color: #e2bca9; color: #874c36; }.pending { background: #fff5df; border-color: #e5d2a7; color: #765d2e; }.notice details { margin: 13px 0; font-size: 12px; }.notice summary { cursor: pointer; font-weight: 600; padding: 5px 0; }.notice details p { margin: 8px 0; }.form-error { font-size: 13px; color: #a44438; margin-top: 11px; overflow-wrap: anywhere; }
.request-list { display: grid; gap: 11px; }.request-actions { display: flex; align-items: end; gap: 9px; flex-wrap: wrap; margin-top: 13px; }.request-actions .field { margin: 0; max-width: 125px; }.request-actions .btn { padding: 9px 12px; }.request-status { font-size: 11px; color: #4e7043; font-weight: 600; }.grant-list { font-size: 12px; color: var(--muted); margin-top: 13px; }.grant-list p { margin: 5px 0; }.grant-list:empty { display: none; }
.audit-list { font-size: 12px; max-height: 320px; overflow: auto; scrollbar-width: thin; }.audit-entry { padding: 12px 2px; border-top: 1px solid var(--border); overflow-wrap: anywhere; }.audit-entry time { display: block; color: var(--muted); font-size: 11px; margin-top: 3px; }.audit-entry p { color: var(--muted); margin-top: 5px; }
.screen-metadata { display: flex; flex-direction: column; gap: 4px; color: #655b71; font-size: 12px; margin: 13px 0; padding: 13px 15px; background: #f2edf5; border-radius: 12px; }.screen-view { background: #27362f; padding: 13px; border-radius: 16px; text-align: center; }.screen-view img { display: block; max-width: 100%; max-height: 580px; object-fit: contain; margin: 0 auto; border-radius: 9px; }.screen-lag { color: #dce7d4; font-size: 12px; margin: 11px 0 0; }.screen-lag.stale { color: #efd194; }
.footer-note { text-align: center; margin: 28px 18px; }.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(12px); background: #477b66; color: #fff; border-radius: 13px; padding: 12px 20px; font-size: 13px; opacity: 0; pointer-events: none; transition: .2s; z-index: 99; box-shadow: 0 7px 20px rgba(31, 58, 40, .20); max-width: 90vw; text-align: center; line-height: 1.7; }.toast.show { opacity: 1; transform: translateX(-50%); }.toast.err { background: #a44b3d; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@media (max-width: 950px) { .container { padding: 22px 18px; }.feature-nav a { padding: 7px 8px; }.login-form-panel { padding: 38px 28px; }.hero-copy h2 { font-size: 26px; }.hero-art { width: 210px; }.section-heading { align-items: start; }.feature-icon { width: 52px; height: 52px; }.feature-heading { gap: 10px; }.status-card .gp-head > p { margin-left: 62px; } }
@media (max-width: 780px) { #deviceWorkspace { grid-template-columns: minmax(0, 1fr); gap: 16px; }.schedule-columns { grid-template-columns: minmax(0, 1fr); gap: 20px; }.login-card { max-width: 620px; grid-template-columns: 1fr; margin: 14px auto; }.login-intro { padding: 27px 28px 24px; position: relative; }.login-card h2 { font-size: 25px; }.login-intro .card-note { max-width: 78%; font-size: 12px; }.login-intro .eyebrow { margin-top: 19px; }.login-art { width: 160px; height: 160px; position: absolute; right: -14px; bottom: -17px; margin: 0; opacity: .96; }.login-art img { height: 160px; }.login-caption { text-align: left; font-size: 12px; margin-top: 16px; }.login-form-panel { padding: 29px 28px; }.login-form-heading { margin-bottom: 21px; }.dashboard-hero { padding: 24px; gap: 12px; }.hero-art { width: 190px; height: 178px; }.hero-art img { height: 196px; }.hero-copy h2 { font-size: 24px; }.hero-promises { gap: 7px 12px; margin-top: 14px; }.feature-nav { top: 8px; border-radius: 15px; padding: 5px; }.feature-nav a { flex: 0 0 auto; font-size: 12px; min-height: 42px; }.feature-nav svg { width: 24px; height: 24px; } }
@media (max-width: 560px) { .container { padding: 16px 12px; }.header { padding: 15px 16px; }.header-brand { gap: 8px; }.brand-mark { width: 39px; height: 39px; }.header h1 { font-size: 20px; }.header small { font-size: 11px; margin-left: 8px; }.date { font-size: 11px; }.session-bar { width: 100%; justify-content: flex-end; font-size: 12px; }.session-bar .btn { padding: 8px 12px; min-height: 38px; }.card, .guard-panel { padding: 19px; border-radius: 19px; }.section-heading { margin-bottom: 15px; gap: 11px; }h2 { font-size: 17px; }.feature-icon { width: 48px; height: 48px; }.section-kicker { font-size: 11px; }.dashboard-hero { padding: 23px 21px 20px; min-height: 0; position: relative; flex-direction: column; align-items: stretch; gap: 12px; }.hero-copy { position: relative; z-index: 1; width: 100%; }.hero-copy h2 { font-size: 22px; max-width: none; width: 100%; margin-top: 13px; text-wrap: balance; }.hero-copy > p { max-width: none; font-size: 13px; }.hero-promises { max-width: none; font-size: 11px; gap: 6px 10px; }.hero-art { position: relative; align-self: center; width: 180px; height: 166px; right: auto; bottom: auto; margin: 0 auto -5px; opacity: 1; }.hero-art img { height: 176px; }.hero-copy .soft-tag { font-size: 11px; padding: 3px 9px; }.login-card { padding: 0; }.login-intro { padding: 24px; }.login-intro .card-note { max-width: 76%; line-height: 1.8; }.login-card h2 { font-size: 23px; }.login-art { right: -5px; bottom: -11px; width: 125px; height: 134px; }.login-art img { height: 140px; }.login-form-panel { padding: 26px 24px; }.login-form-panel .footnote { font-size: 12px; }.status-card .gp-head > p { margin-left: 0; margin-top: 12px; }.gs-btn { margin-left: 0; }.gs-item { min-width: 98px; padding: 12px 8px; }.guard-stats { gap: 8px; }.gs-num { font-size: 23px; }.gs-time { font-size: 12px; }.pair-box code { font-size: 18px; }.time-row .field { min-width: 130px; }.days { gap: 5px; }.days label { padding: 5px 6px; }.app-list { grid-template-columns: 1fr; }.notice .btn { width: 100%; }.request-actions { align-items: end; }.save-row { padding: 12px; }.save-row .btn { width: 100%; }.btn { padding: 10px 14px; }.scope-summary { gap: 6px; }.scope-chip { font-size: 10px; }.screen-metadata { font-size: 12px; }.footer-note { margin: 23px 8px; }.field { font-size: 13px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; animation: none !important; } }
.connect-container { max-width: 1060px; }.connect-container > .card > .feature-heading { margin-bottom: 16px; }.connect-step-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: stretch; }.connect-step-grid > .card { margin-bottom: 20px; }.connect-step-grid .feature-heading { margin-bottom: 16px; }.apk-details { margin: 16px 0; padding: 16px; background: #f3f7eb; border: 1px solid #dce7cc; border-radius: 14px; }.apk-details > div { display: grid; grid-template-columns: 82px minmax(0, 1fr); gap: 12px; padding: 6px 0; font-size: 13px; }.apk-details dt { color: #5e7453; }.apk-details dd { margin: 0; color: #354e33; overflow-wrap: anywhere; }.apk-sha { font-family: Consolas, monospace; font-size: 12px; }.btn.is-disabled { opacity: .48; pointer-events: none; cursor: not-allowed; }.connect-container .footer-note a { display: inline-block; margin-top: 5px; }@media (max-width: 780px) { .connect-step-grid { grid-template-columns: minmax(0, 1fr); gap: 0; } }@media (max-width: 560px) { .apk-details > div { grid-template-columns: 63px minmax(0, 1fr); gap: 9px; }.connect-container .hero-copy h2 { font-size: 22px; }.connect-container .guard-actions { align-items: stretch; }.connect-container .guard-actions .btn { width: 100%; } }