*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
    --bg-primary:#0d0d14;--bg-secondary:#151520;--bg-card:#1a1a26;--bg-input:#1c1c28;
    --border:#2a2a3a;--border-focus:var(--accent);
    --accent:#3b82f6;--accent-glow:rgba(139,92,246,0.4);--accent-dark:#1d4ed8;--accent-light:#60a5fa;
    --text-primary:#e0e0e0;--text-secondary:#b0b0b8;--text-muted:#707080;
    /* This page's short names follow the theme's (theme-loader sets --bg-primary/--text-primary on <html>): a light
       theme left --text at #e0e0e0 on light cards and painted the quick links #0d0d14. */
    --bg:var(--bg-primary);--text:var(--text-primary);
    --live-red:#ef4444;--success:#22c55e;
    --shadow:0 4px 20px rgba(0,0,0,0.3);
}
html{height:100%;background:var(--bg)}
a{color:var(--accent)}
body{min-height:100%;color:var(--text);font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;padding-bottom:40px}

/* Layout */
.page{max-width:900px;margin:0 auto;padding:20px}
.page-header{display:flex;align-items:center;gap:16px;margin-bottom:32px}
.page-header .avatar{width:72px;height:72px;border-radius:50%;border:3px solid var(--accent);object-fit:cover}
.page-header .info{flex:1}
.page-header .info h1{font-size:22px;font-weight:800;margin-bottom:2px}
.page-header .info .subtitle{font-size:13px;color:var(--text-muted)}
.page-header .info .badges{display:flex;gap:6px;margin-top:6px}
.page-header .info .badges .badge{
    font-size:10px;padding:3px 10px;border-radius:4px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;
}
.badge-admin{background:rgba(231,76,60,0.15);color:#e74c3c}
.badge-anon{background:rgba(139,92,246,0.15);color:var(--accent-light)}
.badge-streamer{background:rgba(155,89,182,0.15);color:#9b59b6}
.badge-user{background:rgba(52,152,219,0.15);color:#3498db}

/* Section tabs */
.section-tabs{display:flex;gap:4px;margin-bottom:24px;background:var(--bg-secondary);border-radius:10px;padding:4px;overflow-x:auto}
.section-tabs :is(button,a){
    text-decoration:none;flex-shrink:0;padding:8px 16px;border:none;border-radius:8px;font-size:12px;font-weight:600;
    background:transparent;color:var(--text-muted);cursor:pointer;transition:all var(--ov-dur-2, .15s);white-space:nowrap;
}
.section-tabs button.active{background:var(--bg-card);color:var(--accent-light)}
.section-tabs :is(button,a):hover:not(.active){color:var(--text)}
/* On a computer the tabs stand as a sidebar beside the open section (L43): every setting in view, the page shorter. */
@media (min-width:1000px){
    .page{max-width:1080px}
    .settings{display:grid;grid-template-columns:208px minmax(0,1fr);gap:28px;align-items:start}
    .settings .section-tabs{position:sticky;top:76px;flex-direction:column;gap:2px;margin:0;padding:6px;overflow:visible}
    .settings .section-tabs :is(button,a){display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;font-size:13.5px;text-align:left}
    .settings .section-tabs :is(button,a) i{width:16px;text-align:center;opacity:.85}
    .settings .section-tabs button.active{box-shadow:inset 3px 0 0 var(--accent)}
}

/* Approvals (my/approvals.js): one row per waiting request, and the count on its tab */
.section-tabs .tab-badge{display:inline-block;min-width:18px;padding:0 6px;border-radius:9px;background:var(--accent-strong, var(--accent, #3472d8));color:var(--on-accent-strong, var(--on-accent, #fff));font-size:11px;line-height:18px;text-align:center}
.approval{border:1px solid var(--border);border-radius:10px;padding:14px 16px;margin-bottom:10px;background:var(--bg-secondary)}
.approval-summary{font-weight:600;color:var(--text);margin-bottom:6px;overflow-wrap:anywhere}
.approval-meta{font-size:12px;color:var(--text-secondary);margin-bottom:10px;overflow-wrap:anywhere}
.approval-who{color:var(--text);font-weight:600}
.approval-cap{font-size:11px;padding:1px 6px;border-radius:5px;background:var(--bg-input);border:1px solid var(--border)}
.approval-resources{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px;padding:0}
.approval-resources li{font-size:11px;padding:2px 8px;border-radius:6px;background:var(--bg-input);color:var(--text-secondary);overflow-wrap:anywhere}
.approval .btn-row{display:flex;gap:8px;flex-wrap:wrap}
.approvals-empty{color:var(--text-secondary);font-size:13px}

/* Section */
.section{display:none;animation:sec-in var(--ov-dur-2, .2s) var(--ov-ease-out, ease)}
.section.active{display:block}
@keyframes sec-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/* Cards */
.card{background:var(--bg-card);border:1px solid var(--border);border-radius:12px;padding:20px;margin-bottom:16px}
.card h3{font-size:14px;font-weight:700;margin-bottom:12px;display:flex;align-items:center;gap:8px}
.card h3 .icon{font-size:16px}
.card p{font-size:13px;color:var(--text-secondary);line-height:1.6}

/* Form fields */
.form-field{margin-bottom:14px}
.form-field label{display:block;font-size:11px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:5px}
/* Every text field on the page follows the active theme: its input colour, a hover tint and an accent focus ring. */
:where(input:not([type]),input[type=text],input[type=url],input[type=email],input[type=search],input[type=password],input[type=number],select,textarea){
    padding:10px 12px;background:var(--bg-input);border:1px solid var(--border);border-radius:10px;
    color:var(--text);font:inherit;font-size:13px;outline:none;min-height:40px;
    transition:border-color var(--ov-dur-2, .18s) var(--ov-ease-out, ease),box-shadow var(--ov-dur-2, .18s) var(--ov-ease-out, ease),background-color var(--ov-dur-2, .18s) var(--ov-ease-out, ease);
}
:where(input:not([type]),input[type=text],input[type=url],input[type=email],input[type=search],input[type=password],input[type=number],select,textarea):hover{border-color:color-mix(in srgb,var(--accent) 40%,var(--border))}
:where(input:not([type]),input[type=text],input[type=url],input[type=email],input[type=search],input[type=password],input[type=number],select,textarea):focus{
    border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 24%,transparent);
    background:color-mix(in srgb,var(--accent) 5%,var(--bg-input));
}
:where(input,textarea)::placeholder{color:var(--text-muted);opacity:1}
:where(input,select,textarea):user-invalid{border-color:var(--danger,#ef4444)}
.form-field input,.form-field select,.form-field textarea{width:100%}
.form-field textarea{resize:vertical;min-height:60px}
.form-field .hint{font-size:12px;color:var(--text-muted);margin-top:3px}
.theme-submit{display:grid;grid-template-columns:repeat(2,minmax(0,1fr)) auto;gap:12px;align-items:start;margin-top:16px}
.theme-submit .form-field{margin:0}
.theme-submit .btn{margin-top:21px;min-height:40px}
@media (max-width:640px){.theme-submit{grid-template-columns:1fr}.theme-submit .btn{margin-top:0}}

.btn{
    padding:8px 20px;border:none;border-radius:8px;font-size:12px;font-weight:600;cursor:pointer;transition:all var(--ov-dur-2, .15s);
}
.btn-primary{background:var(--accent-strong, var(--accent, #3472d8));color:var(--on-accent-strong, var(--on-accent,#fff))}
.btn-primary:hover{background:var(--accent-dark)}
.btn-outline{background:transparent;border:1px solid var(--border);color:var(--text)}
.btn-outline:hover{border-color:var(--accent-dark);color:var(--accent-light)}
.btn-danger{background:rgba(231,76,60,0.1);color:var(--live-red-text, var(--live-red));border:1px solid rgba(231,76,60,0.2)}
.btn-danger:hover{background:rgba(231,76,60,0.2)}
.btn-row{display:flex;gap:8px;margin-top:12px}
/* .form-field label (uppercase field names) must not restyle a checkbox's sentence, nor stretch its box full width */
.data-check,.form-field label.data-check{display:flex;gap:8px;align-items:flex-start;font-size:13px;font-weight:400;color:var(--text-secondary);line-height:1.5;text-transform:none;letter-spacing:normal;margin-bottom:0}
.data-check input,.form-field .data-check input{flex:none;width:auto;min-height:0;margin-top:3px;accent-color:var(--accent)}
.data-status{align-self:center;font-size:12px;color:var(--text-secondary)}
.module-row{display:flex;gap:12px;align-items:flex-start;padding:10px 0;border-top:1px solid var(--border)}
.module-row:first-child{border-top:0}
.module-row-main{flex:1;min-width:0}
.module-row-main strong{display:block;font-size:13px}
.module-row-main small{display:block;font-size:12px;color:var(--text-muted);line-height:1.5}
.module-row-main code{display:block;margin-top:4px;font-size:11px;color:var(--text-secondary);white-space:pre-wrap;word-break:break-word;max-height:7.5em;overflow:auto}

/* Account list */
.account-list{display:flex;flex-direction:column;gap:8px}
.account-item{
    display:flex;align-items:center;gap:12px;padding:12px;border-radius:10px;
    background:var(--bg-input);border:1px solid var(--border);
}
.account-item.active{border-color:var(--accent)}
.account-item img{width:36px;height:36px;border-radius:50%}
.account-item .name{font-size:13px;font-weight:600}
.account-item .meta{font-size:11px;color:var(--text-muted)}
.account-item .actions{margin-left:auto;display:flex;gap:6px}

/* Notification pref grid */
.notif-grid{display:grid;grid-template-columns:1fr auto auto auto auto auto;gap:8px;align-items:center;font-size:12px}
.notif-grid select.digest{min-height:30px;padding:2px 6px;border-radius:8px;border:1px solid var(--border);background:var(--bg-input);color:var(--text);font:inherit;font-size:12px}
.quiet-form{display:grid;gap:14px}
.quiet-times{display:flex;flex-wrap:wrap;gap:10px 16px}
.quiet-times label{display:flex;flex-direction:column;gap:4px;font-size:12px;font-weight:600;color:var(--text-muted)}
.quiet-times input,.quiet-times select{min-height:40px;padding:6px 10px;border-radius:10px;border:1px solid var(--border);background:var(--bg-input);color:var(--text);font:inherit;font-size:14px}
.quiet-times .quiet-tz{flex:1 1 220px}
.quiet-times .quiet-tz select{width:100%}
.quiet-form .btn-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.notif-grid .cat{font-weight:600;text-transform:capitalize}
.notif-grid .toggle{width:36px;height:20px;border-radius:10px;border:none;cursor:pointer;position:relative;transition:background var(--ov-dur-2, .2s)}
.notif-grid .toggle::after{content:'';position:absolute;width:16px;height:16px;border-radius:50%;background:#fff;top:2px;left:2px;transition:transform var(--ov-dur-2, .2s)}
.notif-grid .toggle.on{background:var(--accent)}
.notif-grid .toggle.on::after{transform:translateX(16px)}
.notif-grid .toggle.off{background:var(--border)}

/* Linked services */
.linked-item{display:flex;align-items:center;gap:12px;padding:12px;border-radius:8px;background:var(--bg-input);margin-bottom:8px;text-decoration:none;color:inherit;transition:transform var(--ov-dur-2, .15s),background var(--ov-dur-2, .15s)}
a.linked-item:hover{background:var(--bg-hover,var(--bg-card));transform:translateX(2px)}
.linked-item .svc-meta{margin-left:auto;text-align:right;font-size:11px;color:var(--text-muted);white-space:nowrap}
.linked-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin-top:14px}
.linked-grid a{display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:8px;border:1px dashed var(--border);font-size:12px;color:var(--text-secondary);text-decoration:none;transition:border-color var(--ov-dur-2, .15s),color var(--ov-dur-2, .15s)}
.linked-grid a:hover{border-color:var(--accent);color:var(--text)}
.hist-toolbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:12px}
.hist-chips{display:flex;flex-wrap:wrap;gap:6px}
.hist-chips button{padding:5px 10px;border-radius:999px;border:1px solid var(--border);background:transparent;color:var(--text-secondary);font-size:12px;cursor:pointer;transition:all var(--ov-dur-2, .15s)}
.hist-chips button.active,.hist-chips button:hover{border-color:var(--accent);color:var(--accent-light);background:rgba(var(--accent-rgb,139,92,246),.08)}
.hist-search{flex:1;min-width:160px;padding:7px 10px;border-radius:8px;border:1px solid var(--border);background:var(--bg-input);color:var(--text);font-size:13px}
.hist-pause{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--text-secondary);cursor:pointer}
.btn-small{padding:6px 10px;font-size:12px}
.hist-day{font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--text-muted);margin:14px 0 6px}
.hist-item{display:flex;align-items:center;gap:12px;padding:9px 10px;border-radius:8px;text-decoration:none;color:inherit;transition:background var(--ov-dur-1, .12s);animation:sec-in var(--ov-dur-2, .25s) var(--ov-ease-out, ease) both}
.hist-item:hover{background:var(--bg-input)}
.hist-item .hi{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;background:rgba(var(--accent-rgb,139,92,246),.12);color:var(--accent-light);flex:none}
.hist-item .ht{font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hist-item .hs{font-size:11px;color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hist-item .hx{margin-left:auto;display:flex;align-items:center;gap:10px;flex:none;font-size:11px;color:var(--text-muted)}
.hist-item .hx button{background:none;border:none;color:var(--text-muted);cursor:pointer;padding:4px;opacity:0;transition:opacity var(--ov-dur-2, .15s)}
.hist-item:hover .hx button{opacity:1}
.hist-item .hx button:hover{color:var(--danger-text, var(--danger,#ef4444))}
.hist-empty{padding:26px;text-align:center;color:var(--text-muted);font-size:13px}
.linked-item .svc-icon{font-size:20px;width:32px;text-align:center}
.linked-item .svc-name{font-size:13px;font-weight:600}
.linked-item .svc-user{font-size:11px;color:var(--text-muted)}
.linked-item .svc-status{margin-left:auto;font-size:11px;font-weight:600;color:var(--success-text, var(--success))}

/* Themes */
.theme-hero{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;flex-wrap:wrap;margin-bottom:18px}
.theme-hero-copy{max-width:560px}
.theme-hero-copy p{margin-top:8px}
.theme-current{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:10px;background:var(--bg-input);border:1px solid var(--border);min-width:220px}
.theme-current-swatch{display:flex;gap:4px}
.theme-current-swatch span,.theme-preview-swatch span{width:18px;height:18px;border-radius:50%;border:1px solid color-mix(in srgb, var(--text-primary, #fff) 8%, transparent);display:inline-block}
.theme-current .label{font-size:10px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.08em}
.theme-current .name{font-size:13px;font-weight:700;margin-top:2px}
.theme-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
/* Seasonal themes (themes.js renderSeason): the season's switch above the grid. */
.theme-season{display:flex;align-items:center;justify-content:space-between;gap:12px 16px;flex-wrap:wrap;margin:0 0 14px;padding:14px 16px;border-radius:14px;border:1px solid color-mix(in srgb,var(--accent) 40%,var(--border));background:color-mix(in srgb,var(--accent) 9%,var(--bg-card))}
.theme-season[hidden]{display:none}
.theme-season strong{display:block;font-size:1rem}
.theme-season p{margin:4px 0 0;color:var(--text-secondary);font-size:.9rem;max-width:60ch}
.theme-custom-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.theme-custom-row{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text-secondary);background:var(--bg-input);border:1px solid var(--border);border-radius:10px;padding:8px 10px;cursor:pointer}
.theme-custom-row input[type=color]{width:34px;height:34px;border:none;border-radius:8px;background:none;cursor:pointer;padding:0}
.theme-custom-row input[type=color]::-webkit-color-swatch{border:1px solid var(--border);border-radius:6px}
.theme-custom-row input[type=color]::-webkit-color-swatch-wrapper{padding:0}
.theme-card{background:var(--bg-input);border:1px solid var(--border);border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:12px;transition:border-color var(--ov-dur-2, .15s),transform var(--ov-dur-2, .15s),box-shadow var(--ov-dur-2, .15s)}
.theme-card:hover{transform:translateY(-2px);border-color:var(--accent)}
.theme-card.active{border-color:var(--accent);box-shadow:0 0 0 1px rgba(139,92,246,.25) inset}
.theme-preview{border-radius:12px;padding:14px;background:linear-gradient(135deg,var(--theme-bg-1,#202331),var(--theme-bg-2,#181a24));border:1px solid rgba(255,255,255,.06)}
.theme-preview-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:12px}
.theme-preview-chip{padding:5px 9px;border-radius:999px;background:color-mix(in srgb, var(--text-primary, #fff) 8%, transparent);color:#fff;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em}
.theme-preview-bars{display:grid;gap:7px}
.theme-preview-bars span{display:block;height:8px;border-radius:999px;background:rgba(255,255,255,.16)}
.theme-preview-bars span:first-child{width:72%}
.theme-preview-bars span:last-child{width:46%}
.theme-card h4{font-size:14px;font-weight:700}
.theme-card p{font-size:12px;color:var(--text-secondary);line-height:1.55}
.theme-card-footer{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto}
.theme-badges{display:flex;gap:6px;flex-wrap:wrap}
.theme-badge{font-size:10px;padding:4px 8px;border-radius:999px;background:color-mix(in srgb, var(--text-primary, #fff) 5%, transparent);color:var(--text-muted);text-transform:uppercase;letter-spacing:.08em;font-weight:700}
.theme-empty{padding:16px;border-radius:12px;background:var(--bg-input);border:1px dashed var(--border);text-align:center;color:var(--text-muted);font-size:13px}

/* Anon info card */
.anon-card{text-align:center;padding:32px 20px}
.anon-card .number{font-size:48px;font-weight:800;color:var(--accent);margin-bottom:8px}
.anon-card .label{font-size:12px;color:var(--text-muted);margin-bottom:16px}
.anon-card .stats{display:flex;justify-content:center;gap:24px}
.anon-card .stat{text-align:center}
.anon-card .stat .val{font-size:20px;font-weight:700}
.anon-card .stat .key{font-size:10px;color:var(--text-muted);text-transform:uppercase}

/* Loading */
.loading-spinner{text-align:center;padding:40px;color:var(--text-muted);font-size:13px}
.acct-retry-btn{display:inline-block;background:var(--accent,#8b5cf6);color:#0b0d10;border:none;border-radius:6px;padding:3px 12px;font-weight:600;font-size:0.85em;cursor:pointer;vertical-align:baseline}
.acct-retry-btn:hover{filter:brightness(1.08)}

@media(max-width:600px){
    .page{padding:12px}
    .page-header{gap:12px;margin-bottom:24px}
    .page-header .avatar{width:56px;height:56px}
    .page-header .info h1{font-size:20px}
    .notif-grid{grid-template-columns:1fr auto auto}
    .notif-grid .col-email,.notif-grid .col-toast,.notif-grid .col-digest{display:none}
}

/* You, today (plan L43, 2026-10-31): the account home. What is live for you, what you were doing, your sites, your
   money and your numbers, then Settings. Rails scroll sideways on a phone (never hidden content), two columns from 760 px. */
.page-header .info .greeting { font-size: 13px; font-weight: 600; color: var(--text-muted); margin-bottom: 2px; }
.page-header .info .greeting:empty { display: none; }
.page-header .info .badges:empty { display: none; }
.td-settings-btn { flex: none; align-self: center; text-decoration: none; }

/* Needs you (plan OpenVibe_Seven_Domains_Plan §4): the Action Center's waiting items, above the hero. Same kit:
   card surface, one line of plain text, one button. */
.ny { display: grid; gap: 10px; margin: 0 0 20px; padding: 18px 20px; border-radius: 16px; background: var(--bg-card); border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border)); box-shadow: 0 8px 30px rgba(0,0,0,.18); }
.ny[hidden] { display: none !important; }
.ny-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.ny-h h2 { display: flex; align-items: center; gap: 9px; font-size: 1.05rem; font-weight: 850; letter-spacing: -.01em; }
.ny-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 22%, transparent); }
.ny-sub { font-size: 12.5px; color: var(--text-muted); }
.ny-list { display: grid; gap: 8px; }
.ny-item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; background: var(--bg-secondary); border: 1px solid var(--border); }
.ny-ic { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: color-mix(in srgb, var(--accent) 14%, var(--bg-input)); color: var(--accent-light); font-size: 14px; }
.ny-body { flex: 1; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; }
.ny-body > * { min-width: 0; }
.ny-body h3 { font-size: 14px; font-weight: 750; overflow-wrap: anywhere; }
.ny-body p { font-size: 12.5px; color: var(--text-secondary); line-height: 1.4; overflow-wrap: anywhere; }
.ny-meta { font-size: 11.5px; color: var(--text-muted); }
.ny-btn { flex: none; display: inline-flex; align-items: center; justify-content: center; min-height: 38px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--accent); background: var(--accent); color: var(--on-accent, #fff); font: inherit; font-size: 13px; font-weight: 700; text-decoration: none; cursor: pointer; }
.ny-btn:hover, .ny-btn:focus-visible { filter: brightness(1.08); outline: none; }
.ny-btn:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 45%, transparent); }
.ny-btn[disabled] { opacity: .65; cursor: progress; }
/* A phone: the text takes the row and the button goes under it, lined up with the text (it covered the title). */
@media (max-width: 600px) { .ny { padding: 16px; } .ny-item { align-items: flex-start; flex-wrap: wrap; } .ny-body { flex: 1 1 calc(100% - 46px); } .ny-btn { margin-left: 46px; min-height: 44px; } }

.td { display: grid; gap: 22px; margin: -8px 0 36px; }
.td-sec { display: grid; gap: 10px; min-width: 0; }
/* A block with nothing in it stays out (11-07: the empty "Live now" heading showed, and read as if you were live). */
.td [hidden] { display: none !important; }
.td-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.td-h h2 { display: flex; align-items: center; gap: 8px; font-size: 1.05rem; font-weight: 800; letter-spacing: -.01em; }
.td-sub { font-size: 12.5px; color: var(--text-muted); }
.td-more { font-size: 13px; font-weight: 650; color: var(--accent-light); text-decoration: none; white-space: nowrap; }
.td-more:hover { text-decoration: underline; }
.td-pulse { width: 9px; height: 9px; border-radius: 50%; background: var(--live-red); box-shadow: 0 0 0 0 color-mix(in srgb, var(--live-red) 60%, transparent); animation: tdPulse 2s var(--ov-ease-out, ease-out) infinite; }
@keyframes tdPulse { to { box-shadow: 0 0 0 8px transparent; } }
.td-rail { display: grid; grid-auto-flow: column; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: thin; padding: 2px 2px 8px; margin: 0 -2px; }
.td-rail > * { scroll-snap-align: start; }
#td-live { grid-auto-columns: minmax(220px, 260px); }
#td-continue-list { grid-auto-columns: minmax(180px, 210px); }
.td-live { display: grid; align-content: start; gap: 4px; color: var(--text); text-decoration: none; min-width: 0; }
.td-thumb { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 30%, var(--bg-card)), var(--bg-card)); border: 1px solid var(--border); }
.td-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--ov-dur-2, .25s) var(--ov-ease-out, ease); }
.td-live:hover .td-thumb img { transform: scale(1.03); }
.td-live-dot { position: absolute; top: 8px; left: 8px; padding: 2px 7px; border-radius: 6px; background: var(--live-red); color: #fff; font-size: 10.5px; font-weight: 800; letter-spacing: .06em; }
.td-viewers { position: absolute; bottom: 8px; left: 8px; padding: 2px 7px; border-radius: 6px; background: rgba(0, 0, 0, .62); color: #fff; font-size: 11.5px; font-weight: 700; }
.td-live-name { font-size: 14px; font-weight: 750; margin-top: 4px; }
.td-live-title, .td-cont-t { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.td-live-title { font-size: 12.5px; color: var(--text-secondary); line-height: 1.35; }
.td-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.td-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--border); background: var(--bg-card); color: var(--text); font: inherit; font-size: 13px; font-weight: 650; text-decoration: none; cursor: pointer; }
.td-chip:hover, .td-chip:focus-visible { border-color: var(--accent); }
.td-chip-hot { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); background: color-mix(in srgb, var(--accent) 12%, var(--bg-card)); }
.td-card, .td-box { border-radius: 14px; background: var(--bg-card); border: 1px solid var(--border); }
.td-cont { display: grid; grid-template-rows: auto 1fr auto; gap: 8px; padding: 12px; min-height: 124px; color: var(--text); text-decoration: none; min-width: 0; }
.td-cont:hover, .td-site:hover, .td-try:hover { border-color: var(--accent); }
.td-cont-ic, .td-site-ic { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent-light); font-size: 14px; flex: none; }
.td-cont-t { font-size: 13.5px; font-weight: 650; line-height: 1.35; }
.td-cont-m { font-size: 12px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.td-grid { display: grid; align-items: start; gap: 16px; }
.td-box { display: grid; align-content: start; gap: 12px; padding: 16px; min-width: 0; }
.td-sites { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.td-site { display: grid; justify-items: center; gap: 6px; padding: 10px 4px; border-radius: 12px; border: 1px solid transparent; color: var(--text); text-decoration: none; font-size: 12px; font-weight: 650; min-width: 0; }
.td-site span:last-child { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.td-site .td-site-ic { width: 40px; height: 40px; border-radius: 12px; font-size: 16px; }
.td-tries { display: grid; gap: 8px; }
.td-tries::before { content: "Try next"; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.td-try { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 12px; border: 1px solid var(--border); color: var(--text); text-decoration: none; }
.td-try-t { display: grid; gap: 1px; min-width: 0; }
.td-try-t b { font-size: 13.5px; }
.td-try-t small { font-size: 12px; color: var(--text-muted); }
.td-bal { display: flex; align-items: baseline; gap: 8px; }
.td-bal b { font-size: 1.6rem; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.td-bal span:last-child { font-size: 13px; color: var(--text-secondary); font-weight: 600; }
.td-coin { align-self: center; width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fde68a, #f59e0b 60%, #b45309); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); }
.td-coin-v { background: radial-gradient(circle at 35% 35%, #bbf7d0, #22c55e 60%, #15803d); }
.td-money-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.td-stuff { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding-top: 14px; border-top: 1px solid var(--border); }
.td-stats { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.td-stats:empty { display: none; }
.td-stat { display: inline-flex; align-items: baseline; gap: 6px; padding: 0; border: 0; background: none; color: var(--text-secondary); font: inherit; font-size: 13px; cursor: default; }
button.td-stat { cursor: pointer; }
button.td-stat:hover span { color: var(--accent-light); }
.td-stat b { font-size: 1.05rem; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; }
.td .recent-tools { margin-top: 0; }
.settings-h { font-size: 1.05rem; font-weight: 800; margin: 0 0 12px; scroll-margin-top: 72px; }
@media (min-width: 760px) {
    .td-grid { grid-template-columns: 1.25fr 1fr; }
}
@media (max-width: 600px) {
    .td-sites { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .td-settings-btn { padding: 8px 10px; font-size: 0; gap: 0; }
    .td-settings-btn i { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
    .td-pulse { animation: none; }
    .td-thumb img { transition: none; }
}
.recent-tools { margin-top: 14px; }
.recent-tools h3 { font-size: 12px; font-weight: 700; color: var(--text-secondary); margin: 0 0 8px; display: flex; gap: 6px; align-items: center; }
.recent-tools-list { display: flex; flex-wrap: wrap; gap: 6px; }
.recent-tool { padding: 6px 10px; border-radius: 999px; background: var(--bg); border: 1px solid var(--border); color: var(--text-secondary); font-size: 12px; font-weight: 600; text-decoration: none; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recent-tool:hover { border-color: var(--accent); color: var(--accent-light); }
.recent-tools-status { margin: 6px 0 0; font-size: 12px; color: var(--text-secondary); }
.recent-tools-status:empty { display: none; }
.recent-tool-item { display: inline-flex; align-items: center; gap: 2px; max-width: 100%; }
.recent-tool-star { border: 0; background: none; color: var(--text-secondary); cursor: pointer; padding: 6px; font-size: 12px; border-radius: 999px; }
.recent-tool-star[aria-pressed="true"] { color: var(--accent-light); }
.recent-tool-star:hover, .recent-tool-star:focus-visible { color: var(--accent-light); }

/* Machines (plan L34, my/machines.js): pair one, then each machine with its state, what it runs and its roles. */
.mc-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; }
.mc-top > div { flex: 1 1 320px; min-width: 0; }
.mc-pair { margin: 16px 0 4px; padding: 16px; border-radius: 14px; border: 1px dashed color-mix(in srgb, var(--accent) 50%, var(--border)); background: color-mix(in srgb, var(--accent) 6%, transparent); display: grid; gap: 10px; }
/* Closed until "Pair a machine": its own display:grid outranked the hidden attribute, so an empty dashed box sat under
   the button (design review, 2026-11-01). */
.mc-pair[hidden] { display: none; }
.mc-pair h4 { font-size: 15px; }
.mc-code { font: 800 clamp(28px, 6vw, 40px)/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .14em; color: var(--text); }
.mc-cmd { margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--bg); border: 1px solid var(--border); overflow-x: auto; font-size: 12.5px; }
.mc-pair-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.mc-until { font-size: 12px; color: var(--text-muted); }
.mc-wait { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-secondary); }
.mc-wait-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); animation: mcBreathe 1.6s var(--ov-ease-in-out, ease-in-out) infinite; }
@keyframes mcBreathe { 50% { opacity: .25; transform: scale(.7); } }
.mc-status { min-height: 1.3em; margin: 10px 0 0; font-size: 13px; color: var(--text-secondary); }
.mc-status.is-bad { color: var(--danger-text, #ef4444); }
.mc-list { display: grid; gap: 12px; margin-top: 8px; }
.mc-card { display: grid; gap: 12px; padding: 16px; border-radius: 14px; border: 1px solid var(--border); background: var(--bg-secondary); min-width: 0; }
.mc-head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 12px; align-items: center; }
.mc-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--text-muted); box-shadow: 0 0 0 4px color-mix(in srgb, var(--text-muted) 18%, transparent); }
.mc-dot.is-on { background: var(--success); box-shadow: 0 0 0 4px color-mix(in srgb, var(--success) 22%, transparent); }
.mc-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; min-width: 0; }
.mc-name { font-size: 15.5px; font-weight: 750; overflow-wrap: anywhere; }
.mc-state { font-size: 12.5px; color: var(--text-muted); }
.mc-meta { grid-column: 2; font-size: 12.5px; color: var(--text-muted); }
.mc-meta:empty { display: none; }
.mc-rename { font: inherit; font-size: 15px; font-weight: 700; padding: 4px 8px; border-radius: 8px; border: 1px solid var(--accent); background: var(--bg-input); color: var(--text); max-width: 100%; }
.mc-running { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.mc-running li { padding: 3px 10px; border-radius: 999px; font-size: 12px; background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent-light); }
.mc-roles { border: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 8px; }
.mc-roles legend { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 6px; }
.mc-role { display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: 10px; align-items: center; min-height: 52px; padding: 8px 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--bg-card); cursor: pointer; }
.mc-role:has(input:checked) { border-color: color-mix(in srgb, var(--accent) 60%, var(--border)); background: color-mix(in srgb, var(--accent) 8%, var(--bg-card)); }
.mc-role input { width: 18px; height: 18px; accent-color: var(--accent); }
.mc-role-ic { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent-light); }
.mc-role-t { display: grid; gap: 1px; min-width: 0; }
.mc-role-t b { font-size: 13.5px; }
.mc-role-t small { font-size: 12px; color: var(--text-muted); line-height: 1.35; }
.mc-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.mc-revoke { background: transparent; border: 1px solid color-mix(in srgb, #ef4444 45%, var(--border)); color: var(--danger-text, #ef4444); }
.mc-revoke.is-sure { background: #ef4444; color: #fff; border-color: #ef4444; }
.mc-confirm { flex-basis: 100%; font-size: 12.5px; color: var(--text-secondary); }
.mc-pool > .mc-confirm, .mc-pool > .mc-acts { grid-column: 1 / -1; margin: 0; }
.mc-pool > div.mc-role { grid-template-columns: auto minmax(0, 1fr); cursor: default; }
.mc-empty { display: flex; gap: 14px; align-items: center; padding: 18px; border-radius: 14px; border: 1px dashed var(--border); color: var(--text-secondary); }
.mc-empty > i { font-size: 26px; color: var(--accent-light); }
@media (prefers-reduced-motion: reduce) { .mc-wait-dot { animation: none; } }

/* Your data choices (L24): kit fold rows, one per purpose. Phone first: one column of equal-weight buttons, never
   sideways. The kit's own /shared/kit.css draws the fold; these rules only lay out the choice inside it. */
.consent-fold { margin: 0 0 10px; }
.consent-fold .ovk-fold-body p { margin: 0 0 8px; }
.consent-fold .consent-off { color: var(--text-secondary); }
.consent-label { display: block; margin: 12px 0 6px; font-size: 12px; font-weight: 700; color: var(--text-secondary); }
.consent-actions .btn[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.consent-kind-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 12px; }
.consent-kind { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; font-size: 13px; color: var(--text-secondary); cursor: pointer; }
.consent-kind input, .consent-adult input { width: 18px; height: 18px; flex: none; accent-color: var(--accent); }
.consent-hint { margin: 4px 0 0; font-size: 12px; }
.consent-note { margin: 10px 0; font-size: 12px; }
.consent-licence-field { display: flex; flex-direction: column; gap: 6px; margin: 12px 0 0; font-size: 12px; font-weight: 700; color: var(--text-secondary); }
.consent-licence-field select { min-height: 40px; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-input); color: var(--text); font: inherit; font-weight: 500; }
.consent-adult { display: flex; align-items: center; gap: 8px; min-height: 44px; margin: 12px 0 0; font-size: 13px; font-weight: 650; color: var(--text); cursor: pointer; }
.consent-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 14px 0 10px; }
.consent-actions .btn { width: 100%; min-height: 44px; justify-content: center; margin: 0; }
.consent-history { list-style: none; margin: 10px 0 0; padding: 0; font-size: 12px; color: var(--text-secondary); }
.consent-history li { padding: 5px 0; border-top: 1px solid var(--border); }
.consent-history li:first-child { border-top: 0; }
.consent-empty { margin: 10px 0 0; font-size: 12px; }
.consent-status { min-height: 1.2em; margin: 8px 0 0; font-size: 12px; }
.consent-status.consent-error { color: var(--danger-text, #ef4444); }
/* Apps you allowed (C4): one block per app, one line per purpose with its own 44 px button. */
.consent-apps-title { margin: 18px 0 8px; font-size: 14px; font-weight: 700; color: var(--text); }
.consent-app { margin: 0 0 10px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; }
.consent-app-name { margin: 0 0 6px; overflow-wrap: anywhere; }
.consent-app-list { list-style: none; margin: 0; padding: 0; }
.consent-app-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 8px 0; border-top: 1px solid var(--border); }
.consent-app-row:first-child { border-top: 0; }
.consent-app-text { display: grid; gap: 2px; min-width: 0; flex: 1 1 200px; font-size: 13px; overflow-wrap: anywhere; }
.consent-app-text .ovk-muted { font-size: 12px; }
.consent-app-btn { min-height: 44px; margin: 0; flex: none; }
@media (min-width: 600px) {
    .consent-kind-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .consent-actions { grid-template-columns: 1fr 1fr; }
    .consent-licence-field { flex-direction: row; align-items: center; }
    .consent-licence-field select { flex: 1; min-width: 0; }
}


/* What you see (L1): a row per label, its name and what it covers, and three equal choices. Phone first: the choices
   under the words; wider, beside them. 44 px targets. */
#label-prefs { display: grid; gap: 10px; margin-top: 10px; }
.label-pref { display: grid; gap: 8px; padding: 10px 12px; border: 1px solid var(--border, rgba(255,255,255,.1)); border-radius: 12px; }
.label-pref-text { display: grid; gap: 2px; min-width: 0; }
.label-pref-text b { font-size: .95rem; }
.label-pref-text span { font-size: .82rem; color: var(--text-muted, #8b93ad); }
.label-pref-seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 3px; border-radius: 12px; background: color-mix(in srgb, var(--text-primary, #e6edf7) 5%, transparent); }
.label-pref-seg button { all: unset; box-sizing: border-box; min-height: 44px; display: grid; place-items: center; border-radius: 9px; cursor: pointer; font-weight: 650; font-size: .88rem; color: var(--text-secondary, #a8b3c7); }
.label-pref-seg button:hover { color: var(--text-primary, #e6edf7); }
.label-pref-seg button:focus-visible { outline: 2px solid var(--accent, #60a5fa); outline-offset: 1px; }
.label-pref-seg button.is-on { color: var(--text-primary, #e6edf7); background: var(--bg-secondary, #111a2c); box-shadow: 0 1px 3px rgba(0,0,0,.3), inset 0 0 0 1px color-mix(in srgb, var(--accent, #60a5fa) 55%, transparent); }
.label-prefs-status.is-bad { color: var(--danger-text, #f87171); }
@media (min-width: 640px) { .label-pref { grid-template-columns: minmax(0, 1fr) 260px; align-items: center; } }

/* Sign in on another device (server/auth/qr-signin.js): a <dialog> with the QR on a white tile on the left and
   the three steps on the right; below 600 px it stacks, QR first. The tile stays white in every theme: cameras read it. */
.qr-entry-button { min-height: 44px; margin-top: 12px; }
.qr-entry[hidden], .qr-dialog [hidden] { display: none !important; }
.qr-dialog {
    position: fixed;
    inset: 0;
    margin: auto;
    width: min(760px, calc(100vw - 24px));
    max-height: calc(100vh - 32px);
    overflow: auto;
    padding: 0;
    color: var(--text-primary, #e8e6e3);
    background: var(--bg-card, #1a1a26);
    border: 1px solid var(--border, #2a2a3a);
    border-radius: 20px;
    box-shadow: 0 30px 90px rgba(0, 0, 0, .55);
}
.qr-dialog::backdrop { background: rgba(0, 0, 0, .62); }
.qr-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px 0; }
.qr-dialog-head h2 { font-size: 18px; line-height: 1.25; letter-spacing: -.2px; }
.qr-dialog-head h2:focus { outline: none; }
.qr-close { all: unset; box-sizing: border-box; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; cursor: pointer; font-size: 26px; line-height: 1; color: var(--text-muted, #8b93ad); }
.qr-close:hover { color: var(--text-primary, #e8e6e3); background: var(--bg-input, rgba(255,255,255,.06)); }
.qr-close:focus-visible { outline: 2px solid var(--accent, #60a5fa); outline-offset: 2px; }
.qr-grid { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 26px; padding: 18px 20px 24px; align-items: start; }
.qr-left { display: flex; flex-direction: column; align-items: center; min-width: 0; }
#qr-confirm-view, #qr-done-view { width: 100%; }
.qr-tile { width: 232px; height: 232px; border-radius: 16px; padding: 20px; background: #fff; position: relative; display: grid; place-items: center; flex: none; box-shadow: 0 2px 12px rgba(0,0,0,.18); }
.qr-code { width: 192px; height: 192px; }
.qr-code svg { display: block; width: 100%; height: 100%; }
.qr-expired { position: absolute; inset: 0; border-radius: 16px; background: rgba(255,255,255,.94); color: #181a22; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 16px; text-align: center; }
.qr-expired p { font-size: 15px; font-weight: 700; }
.qr-tile.is-expired .qr-code { opacity: .16; }
.qr-bar { width: 232px; height: 4px; margin-top: 14px; border-radius: 4px; overflow: hidden; background: color-mix(in srgb, var(--text-primary, #e8e6e3) 12%, transparent); }
#qr-bar-fill { display: block; height: 100%; width: 100%; border-radius: 4px; background: var(--accent, #60a5fa); }
.qr-timer { min-height: 16px; margin-top: 6px; font-size: 12px; color: var(--text-muted, #8b93ad); }
.qr-device { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 14px; border: 1px solid var(--border, #2a2a3a); border-radius: 12px; background: var(--bg-secondary, #151520); font-size: 14px; font-weight: 650; overflow-wrap: anywhere; }
.qr-device-icon { display: grid; place-items: center; width: 18px; height: 18px; flex: none; color: var(--accent, #60a5fa); }
.qr-device-icon svg { display: block; width: 18px; height: 18px; }
.qr-confirm-label { margin: 12px 0 8px; font-size: 15px; font-weight: 500; color: var(--text-secondary, #a8b3c7); text-align: center; }
.qr-digits { display: flex; gap: 12px; justify-content: center; }
.qr-digit { width: 66px; height: 76px; padding: 0; text-align: center; font-size: 36px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--text-primary, #e8e6e3); background: var(--bg-input, #1c1c28); border: 1.5px solid var(--border, #2a2a3a); border-radius: 14px; }
.qr-digit:focus { outline: none; border-color: var(--accent, #60a5fa); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, #60a5fa) 25%, transparent); }
.qr-error { margin-top: 8px; text-align: center; font-size: 13px; line-height: 1.4; color: var(--danger-text, #ef4444); }
.qr-actions { display: grid; grid-template-columns: repeat(2, minmax(140px, 1fr)); gap: 12px; justify-content: center; margin-top: 20px; }
.qr-dialog .btn { min-height: 44px; }
.qr-actions .btn { min-height: 44px; }
.btn-quiet { color: var(--text-secondary, #a8b3c7); background: transparent; border: 1px solid var(--border, #2a2a3a); }
.btn-quiet:hover { color: var(--text-primary, #e8e6e3); }
.qr-done-check { width: 64px; height: 64px; margin: 12px auto 14px; border-radius: 50%; display: grid; place-items: center; background: var(--success, #22c55e); color: #fff; font-size: 30px; font-weight: 800; }
.qr-done-text { text-align: center; font-size: 18px; font-weight: 750; line-height: 1.3; overflow-wrap: anywhere; }
.qr-right { min-width: 0; }
.qr-steps { list-style: none; display: grid; gap: 16px; margin: 6px 0 0; padding: 0; }
.qr-steps li { display: grid; grid-template-columns: 32px minmax(0, 1fr); align-items: center; gap: 12px; font-size: 14px; line-height: 1.45; }
.qr-step-text { color: var(--text-secondary, #a8b3c7); }
.qr-step-n { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--border, #2a2a3a); font-size: 13px; font-weight: 700; color: var(--text-secondary, #a8b3c7); transition: background .2s, border-color .2s, color .2s; }
.qr-steps li.is-done .qr-step-n { border-color: var(--success, #22c55e); background: var(--success, #22c55e); color: #fff; font-size: 16px; }
.qr-steps li.is-done .qr-step-text { color: var(--text-muted, #8b93ad); }
.qr-steps li.is-current .qr-step-n { border-color: var(--accent, #60a5fa); background: var(--accent, #60a5fa); color: var(--on-accent, #fff); }
.qr-steps li.is-current .qr-step-text { color: var(--text-primary, #e8e6e3); }
.qr-note { margin-top: 22px; font-size: 12px; line-height: 1.55; color: var(--text-muted, #8b93ad); }
@keyframes qr-shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-7px); }
    40% { transform: translateX(7px); }
    60% { transform: translateX(-5px); }
    80% { transform: translateX(5px); }
}
.qr-shake { animation: qr-shake .36s ease-in-out 1; }
@media (prefers-reduced-motion: reduce) { .qr-shake { animation: none; } }
@media (max-width: 419px) {
    .qr-actions { grid-template-columns: minmax(0, 1fr); }
    .qr-actions .btn { width: 100%; }
}
@media (max-width: 600px) {
    .qr-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 14px 16px 20px; }
    .qr-right { order: 2; }
    .qr-steps { gap: 12px; }
    .qr-steps li { font-size: 13px; }
    .qr-note { margin-top: 14px; }
    .qr-dialog { border-radius: 16px; }
}

/* ── You (11-07; the owner: "front-face the best stuff we have to offer … awesome design, desktop and mobile"). The hero
   wears your profile colour (--me, set by today.js from your profile): your picture in a ring of it, your balances on
   frosted glass, and seven one-tap actions. Then On OpenVibe now: what the sites themselves put forward. ── */
.me { --me: var(--accent); position: relative; isolation: isolate; overflow: hidden; display: grid; gap: 22px; margin: 4px 0 30px; padding: 28px;
  border-radius: 28px; border: 1px solid color-mix(in srgb, var(--me) 34%, var(--border));
  background:
    radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--me) 30%, transparent) 0%, transparent 55%),
    radial-gradient(90% 120% at 100% 100%, color-mix(in srgb, var(--accent) 18%, transparent) 0%, transparent 60%),
    var(--bg-card); }
.me::after { content: ""; position: absolute; z-index: -1; right: -120px; top: -160px; width: 420px; height: 420px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--me) 38%, transparent), transparent); opacity: .7; }
.me [hidden] { display: none !important; }
.me-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 28px; }
.me-who { display: flex; align-items: center; gap: 20px; min-width: 0; flex: 1 1 320px; }
.me-face { flex: none; padding: 4px; border-radius: 50%; background: conic-gradient(from 210deg, var(--me), color-mix(in srgb, var(--me) 30%, var(--accent)), var(--me)); box-shadow: 0 10px 30px color-mix(in srgb, var(--me) 35%, transparent); }
.me-face .avatar { display: block; width: 96px; height: 96px; border-radius: 50%; object-fit: cover; border: 4px solid var(--bg-card); background: var(--bg-card); }
.me .info { min-width: 0; flex: 1 1 auto; container-type: inline-size; }
.me .greeting { font-size: 13px; font-weight: 700; letter-spacing: .04em; color: color-mix(in srgb, var(--me) 55%, var(--text-secondary)); margin-bottom: 2px; }
.me .greeting:empty, .me .badges:empty { display: none; }
/* A long name shrinks to fit its line (down to 20 px) before it breaks mid-word; --me-len is its longest word (profile.js). */
.me h1 { margin: 0; font-size: max(20px, min(clamp(28px, 4.2vw, 42px), calc(100cqi / (var(--me-len, 9) * .58)))); line-height: 1.08; font-weight: 850; letter-spacing: -.025em; overflow-wrap: anywhere; }
.me .subtitle { margin-top: 4px; font-size: 14px; color: var(--text-secondary); }
.me .badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.me-money { display: grid; gap: 8px; padding: 14px 18px; border-radius: 20px; min-width: 250px; flex: 0 1 auto;
  background: color-mix(in srgb, var(--bg-primary, #0b0f1a) 42%, transparent); border: 1px solid color-mix(in srgb, var(--text-primary, #fff) 10%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.me-bals { display: grid; gap: 6px; color: var(--text); text-decoration: none; }
.me-bal { display: flex; align-items: baseline; gap: 8px; }
.me-bal b { font-size: 26px; font-weight: 850; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.me-bal small { font-size: 13px; font-weight: 650; color: var(--text-secondary); }
.me-bals:hover b { color: var(--accent-light); }
.me-last { margin: 0; font-size: 12.5px; color: var(--text-muted); }
.me-tip { justify-self: start; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 650; color: var(--accent-light); text-decoration: none; }
.me-tip:hover { text-decoration: underline; }
.me-acts { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 10px; }
.me-acts:empty { display: none; }
.me-act { --a: var(--accent); position: relative; display: grid; justify-items: center; gap: 8px; padding: 14px 6px 12px; border-radius: 18px; min-width: 0;
  background: color-mix(in srgb, var(--bg-primary, #0b0f1a) 38%, transparent); border: 1px solid color-mix(in srgb, var(--text-primary, #fff) 8%, transparent);
  color: var(--text); text-decoration: none; transition: transform var(--ov-dur-2, .2s) var(--ov-ease-out, ease), border-color .2s, background .2s; }
.me-act:hover, .me-act:focus-visible { transform: translateY(-2px); border-color: color-mix(in srgb, var(--a) 60%, transparent); background: color-mix(in srgb, var(--a) 12%, var(--bg-card)); }
.me-act-ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; font-size: 18px; color: var(--a); background: color-mix(in srgb, var(--a) 16%, transparent); }
.me-act-t { max-width: 100%; font-size: 13px; font-weight: 700; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.me-act-n { position: absolute; top: 8px; right: calc(50% - 34px); min-width: 20px; padding: 1px 6px; border-radius: 999px; background: var(--live-red, #ef4444); color: #fff; font-size: 11px; font-weight: 800; text-align: center; box-shadow: 0 0 0 3px var(--bg-card); }
.me-act[data-tone="live"] { --a: #ef4444; } .me-act[data-tone="chat"] { --a: #22c55e; } .me-act[data-tone="vibe"] { --a: #a855f7; }
.me-act[data-tone="files"] { --a: #3b82f6; } .me-act[data-tone="codes"] { --a: #f59e0b; } .me-act[data-tone="bell"] { --a: #06b6d4; }
.me-act[data-tone="gear"] { --a: #94a3b8; } .me-act[data-tone="wallet"] { --a: #eab308; }
.me .badges .badge { font-size: 11px; padding: 3px 10px; border-radius: 999px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.td-net { align-items: start; }

.td-net { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.td-net-card { gap: 6px; padding: 14px 14px 10px; }
.td-net-h { display: flex; align-items: center; gap: 10px; padding-bottom: 6px; }
.td-net-ht { display: grid; flex: 1; min-width: 0; }
.td-net-ht b { font-size: 15px; font-weight: 800; }
.td-net-ht small { font-size: 12px; color: var(--text-muted); }
.td-net-card[data-site="media-hub"] .td-site-ic { color: #f472b6; background: color-mix(in srgb, #ec4899 16%, transparent); }
.td-net-card[data-site="games"] .td-site-ic { color: #4ade80; background: color-mix(in srgb, #22c55e 16%, transparent); }
.td-net-card[data-site="live"] .td-site-ic { color: #f87171; background: color-mix(in srgb, #ef4444 16%, transparent); }
.td-net-list { list-style: none; margin: 0; padding: 0; display: grid; }
.td-net-row { display: flex; align-items: center; gap: 12px; padding: 9px 6px; border-radius: 10px; color: var(--text); text-decoration: none; }
.td-net-row:hover { background: color-mix(in srgb, var(--text-primary, #fff) 6%, transparent); }
.td-net-list li + li .td-net-row { border-top: 1px solid color-mix(in srgb, var(--border) 70%, transparent); border-radius: 0; }
.td-net-list li + li .td-net-row:hover { border-radius: 10px; }
.td-net-i { flex: none; width: 22px; font-size: 15px; font-weight: 850; color: var(--text-muted); text-align: center; font-variant-numeric: tabular-nums; }
.td-net-thumb { flex: none; width: 64px; height: 36px; border-radius: 8px; object-fit: cover; background: color-mix(in srgb, var(--text-primary, #fff) 6%, transparent); }
.td-net-list li:first-child .td-net-i { color: var(--accent-light); }
.td-net-t { display: grid; min-width: 0; }
.td-net-t b { font-size: 14px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.td-net-t small { font-size: 12px; color: var(--text-muted); }
.td-nums .td-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; }
.td-nums .td-stat { display: grid; justify-items: start; gap: 2px; padding: 12px 14px; border-radius: 14px; background: color-mix(in srgb, var(--text-primary, #fff) 4%, transparent); text-align: left; }
.td-nums .td-stat b { font-size: 1.5rem; }
@media (min-width: 760px) { .td-grid { grid-template-columns: 1.4fr 1fr; } }
@media (max-width: 860px) { .me-acts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 600px) {
  .me { padding: 20px 16px 16px; border-radius: 24px; gap: 18px; margin-bottom: 22px; }
  .me-who { gap: 14px; flex-basis: 100%; }
  .me-face .avatar { width: 72px; height: 72px; border-width: 3px; }
  .me-money { flex: 1 1 100%; min-width: 0; grid-template-columns: 1fr auto; align-items: center; padding: 12px 14px; }
  .me-bals { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-column: 1 / -1; }
  .me-bal { flex-wrap: wrap; gap: 0 6px; }
  .me-bal b { font-size: 21px; }
  .me-bal small { flex-basis: 100%; margin-left: 22px; }
  .me-acts { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  .me-act { padding: 12px 2px 10px; border-radius: 16px; }
  .me-act-ic { width: 40px; height: 40px; font-size: 16px; }
  .me-act-t { font-size: 11.5px; }
}
@media (prefers-reduced-motion: reduce) { .me-act { transition: none; } .me-act:hover { transform: none; } }

/* Your status beside your name: the same dot as the bar's, one tap to change it. */
.me-status { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; margin-top: 10px; padding: 0 12px 0 10px; border-radius: 999px; cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--text-primary, #fff) 12%, transparent); background: color-mix(in srgb, var(--bg-primary, #0b0f1a) 40%, transparent);
  color: var(--text); font: inherit; font-size: 13px; font-weight: 650; }
.me-status:hover { border-color: color-mix(in srgb, var(--me) 55%, transparent); }
.me-status i { width: 10px; height: 10px; border-radius: 50%; background: #22c55e; flex: none; }
.me-status[data-state="away"] i { background: #f59e0b; }
.me-status[data-state="dnd"] i, .me-status[data-state="live"] i { background: #ef4444; }
.me-status[data-state="invisible"] i, .me-status[data-state="offline"] i { background: transparent; box-shadow: inset 0 0 0 2px #94a3b8; }
.me-status small { font-size: 12px; font-weight: 600; color: var(--text-muted); }
.me-status small::before { content: "·"; margin-right: 6px; }