/* ============================================================ c0lor-MAG — iOS 26 "Liquid Glass" design system Ported from the v3 prototype (app3.css), adapted to: - drive the --accent family from the app's resolved primaryColor (App.tsx sets --accent + --accent-rgb inline; category teal/orange/blue when the colourful theme is on, mono primaryColor when off) - coexist with the custom Electron title bar (native window-control overlay) - layer the translucent glass over an animated colour-mesh backdrop - keep backward-compatible token aliases (--blue / --text* / --surface / --bg) so the already-ported screens resolve without churn ============================================================ */ :root { --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif; --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace; --r-xl: 28px; --r-lg: 22px; --r-md: 15px; --r-sm: 11px; --pill: 999px; /* Keep in sync with INTEGRATED_TITLE_BAR_HEIGHT in shared/electron-api.ts. */ --side-w: 250px; --tb-h: 46px; /* motion */ --spring: cubic-bezier(.34, 1.46, .54, 1); --smooth: cubic-bezier(.32, .72, 0, 1); --ease: cubic-bezier(.32, .72, 0, 1); /* legacy alias */ --green: #34C759; --red: #FF453A; --amber: #FF9F0A; } /* The accent family is derived from a single --accent (+ --accent-rgb) which App.tsx sets inline on ; --accent-2 follows automatically. Defaults below keep the design intact before JS runs / in tests (category M = teal). */ [data-theme="light"] { --accent: #0FB5AE; --accent-rgb: 15, 181, 174; --accent-2: color-mix(in srgb, var(--accent) 78%, #fff); --on-accent: #fff; /* App.tsx flips to dark ink for near-white accents */ --ink: #15151A; --ink-2: rgba(40,40,55,.66); --ink-3: rgba(40,40,55,.4); --ink-4: rgba(40,40,55,.2); --base: #E9E9EF; --glass: rgba(255,255,255,.58); --glass-2: rgba(255,255,255,.42); --glass-strong: rgba(255,255,255,.78); --glass-edge: rgba(255,255,255,.9); --glass-border: rgba(255,255,255,.55); --hair: rgba(40,40,55,.10); --sep: rgba(40,40,55,.12); --fill: rgba(120,120,135,.12); --fill-2: rgba(120,120,135,.07); --fill-press: rgba(120,120,135,.2); --track: rgba(120,120,135,.14); --field: rgba(255,255,255,.55); --thumb: #fff; --tile: #fff; --mesh-op: .4; --sh-card: 0 1px 1px rgba(20,20,30,.04), 0 10px 30px rgba(20,20,30,.10); --sh-pop: 0 8px 24px rgba(20,20,30,.10), 0 24px 60px rgba(20,20,30,.18); --sh-accent: 0 6px 20px rgba(var(--accent-rgb), .40); --sh-sm: 0 1px 2px rgba(17,17,22,.06); /* status soft fills */ --green-soft: rgba(52,199,89,.16); --amber-soft: rgba(255,159,10,.16); --red-soft: rgba(255,69,58,.14); --purple: #8b5cf6; --purple-soft: rgba(120,90,255,.14); /* legacy aliases */ --blue: var(--accent); --blue-2: var(--accent-2); --blue-soft: rgba(var(--accent-rgb), .12); --blue-line: rgba(var(--accent-rgb), .22); --sh-blue: var(--sh-accent); --sh-md: var(--sh-card); --sh-lg: var(--sh-pop); --text: var(--ink); --text-2: var(--ink-2); --text-3: var(--ink-3); --text-4: var(--ink-4); --bg: var(--base); --surface: var(--glass); --surface-2: var(--glass-2); --side-bg: var(--glass); --tb-bg: var(--glass-2); --inset: var(--field); --nav-hover: var(--fill); } [data-theme="dark"] { --accent: #0FB5AE; --accent-rgb: 15, 181, 174; --accent-2: color-mix(in srgb, var(--accent) 72%, #fff); --on-accent: #fff; /* App.tsx flips to dark ink for near-white accents */ --ink: #FFFFFF; --ink-2: rgba(235,235,245,.62); --ink-3: rgba(235,235,245,.34); --ink-4: rgba(235,235,245,.18); --base: #07070B; --glass: rgba(44,44,52,.52); --glass-2: rgba(34,34,42,.46); --glass-strong: rgba(54,54,64,.66); --glass-edge: rgba(255,255,255,.18); --glass-border: rgba(255,255,255,.10); --hair: rgba(255,255,255,.07); --sep: rgba(255,255,255,.09); --fill: rgba(140,140,160,.16); --fill-2: rgba(140,140,160,.10); --fill-press: rgba(140,140,160,.28); --track: rgba(140,140,160,.16); --field: rgba(255,255,255,.06); --thumb: #f2f2f5; --tile: #fff; --mesh-op: .8; --sh-card: 0 1px 1px rgba(0,0,0,.3), 0 14px 40px rgba(0,0,0,.5); --sh-pop: 0 20px 60px rgba(0,0,0,.6); --sh-accent: 0 6px 22px rgba(var(--accent-rgb), .5); --sh-sm: 0 1px 2px rgba(0,0,0,.45); --green-soft: rgba(52,199,89,.18); --amber-soft: rgba(255,159,10,.2); --red-soft: rgba(255,69,58,.18); --purple: #a78bfa; --purple-soft: rgba(120,90,255,.2); /* legacy aliases */ --blue: var(--accent); --blue-2: var(--accent-2); --blue-soft: rgba(var(--accent-rgb), .2); --blue-line: rgba(var(--accent-rgb), .34); --sh-blue: var(--sh-accent); --sh-md: var(--sh-card); --sh-lg: var(--sh-pop); --text: var(--ink); --text-2: var(--ink-2); --text-3: var(--ink-3); --text-4: var(--ink-4); --bg: var(--base); --surface: var(--glass); --surface-2: var(--glass-2); --side-bg: var(--glass); --tb-bg: var(--glass-2); --inset: var(--field); --nav-hover: var(--fill); } /* ---- base (scoped so Ant pages are undisturbed) ---- */ .mag-root, .mag-root * { box-sizing: border-box; } html[data-theme="light"], html[data-theme="light"] body { background: #E9E9EF; } html[data-theme="dark"], html[data-theme="dark"] body { background: #07070B; } html { transition: background .5s var(--smooth); } body.mag-body { font-family: var(--font); background: var(--base); color: var(--ink); -webkit-font-smoothing: antialiased; overflow: hidden; letter-spacing: -.012em; transition: color .5s var(--smooth); } .mag-root button { font-family: inherit; cursor: pointer; color: inherit; border: none; background: none; } .mag-root input { font-family: inherit; } .tnum { font-variant-numeric: tabular-nums; } .mag-root ::selection { background: rgba(var(--accent-rgb), .25); } .c0lor-window-no-drag { -webkit-app-region: no-drag; app-region: no-drag; } .scroll::-webkit-scrollbar { width: 10px; height: 10px; } .scroll::-webkit-scrollbar-thumb { background: var(--ink-4); border-radius: 99px; border: 3px solid transparent; background-clip: content-box; } .scroll::-webkit-scrollbar-thumb:hover { background: var(--ink-3); background-clip: content-box; } /* ===================== BACKDROP MESH ===================== */ .mesh { position: absolute; inset: -10%; z-index: 0; pointer-events: none; opacity: var(--mesh-op); filter: blur(70px) saturate(125%); transition: opacity .6s ease; } .mesh .b { position: absolute; border-radius: 50%; animation: drift 26s var(--smooth) infinite alternate; } .b1 { width: 46vw; height: 46vw; left: -6vw; top: -8vw; background: radial-gradient(circle, rgba(var(--accent-rgb),.9), transparent 66%); } .b2 { width: 40vw; height: 40vw; right: -4vw; top: 6vh; background: radial-gradient(circle, rgba(120,90,255,.55), transparent 64%); animation-delay: -8s; } .b3 { width: 42vw; height: 42vw; left: 24vw; bottom: -16vw; background: radial-gradient(circle, rgba(255,120,170,.5), transparent 64%); animation-delay: -15s; } .b4 { width: 32vw; height: 32vw; right: 16vw; bottom: -10vw; background: radial-gradient(circle, rgba(60,200,255,.5), transparent 64%); animation-delay: -20s; } @keyframes drift { 0%{transform:translate(0,0) scale(1)} 50%{transform:translate(4vw,3vh) scale(1.12)} 100%{transform:translate(-3vw,5vh) scale(.94)} } [data-theme="light"] .b1 { background: radial-gradient(circle, rgba(var(--accent-rgb),.5), transparent 66%); } [data-theme="light"] .b2 { background: radial-gradient(circle, rgba(120,90,255,.3), transparent 64%); } [data-theme="light"] .b3 { background: radial-gradient(circle, rgba(255,120,170,.28), transparent 64%); } [data-theme="light"] .b4 { background: radial-gradient(circle, rgba(60,200,255,.3), transparent 64%); } /* ===================== GLASS ===================== */ .glass { background: var(--glass); backdrop-filter: blur(34px) saturate(180%); -webkit-backdrop-filter: blur(34px) saturate(180%); border: 1px solid var(--glass-border); box-shadow: var(--sh-card), inset 0 1px 0 var(--glass-edge); } /* ===================== WINDOW / TITLEBAR ===================== */ /* Anchored to the viewport (position:fixed, NOT height:100%): the host app root is typically a plain React fragment with no full-height containing block, so height:100% here would collapse to content height — breaking vertical scroll and leaving blank space below short pages. */ .win { position: fixed; inset: 0; display: flex; flex-direction: column; background: var(--base); overflow: hidden; isolation: isolate; z-index: 0; } .tb { height: var(--tb-h); flex: 0 0 auto; display: flex; align-items: center; gap: 12px; padding: 0 10px 0 16px; background: var(--glass-2); backdrop-filter: blur(30px) saturate(180%); -webkit-backdrop-filter: blur(30px) saturate(180%); border-bottom: 1px solid var(--hair); position: relative; z-index: 40; -webkit-app-region: drag; app-region: drag; user-select: none; } /* reserve room for the native window-control overlay (min/max/close) */ .tb.tb--win32, .tb.tb--linux { padding-right: 148px; } .tb.tb--darwin { padding-left: 84px; } .tb button, .tb .tb-right, .tb .tb-right * { -webkit-app-region: no-drag; app-region: no-drag; } .tb-icn { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; color: var(--ink-2); transition: background .2s, color .2s, transform .15s var(--spring); } .tb-icn:hover { background: var(--fill); color: var(--ink); } .tb-icn:active { transform: scale(.9); } .tb-icn.on { background: rgba(var(--accent-rgb), .14); color: var(--accent); } .tb-mid { position: absolute; left: 50%; top: 0; height: 100%; transform: translateX(-50%); display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--ink-3); pointer-events: none; } .tb-mid .crumb { color: var(--ink); font-weight: 600; } .tb-mid .cat-badge { width: 21px; height: 21px; display: inline-flex; align-items: center; justify-content: center; border-radius: 7px; font-size: 11px; font-weight: 800; line-height: 1; } .tb-right { margin-left: auto; display: flex; align-items: center; gap: 5px; } .tb-online { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 13px; border-radius: 99px; font-size: 12.5px; font-weight: 650; white-space: nowrap; background: rgba(52,199,89,.16); color: var(--green); border: 1px solid rgba(52,199,89,.25); } .tb-online.off { background: var(--red-soft); color: var(--red); border-color: rgba(255,69,58,.25); } .dot { width: 7px; height: 7px; border-radius: 99px; background: currentColor; animation: pulse 2.6s var(--smooth) infinite; } @keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(52,199,89,.5)} 70%{box-shadow:0 0 0 6px rgba(52,199,89,0)} 100%{box-shadow:0 0 0 0 rgba(52,199,89,0)} } .body { flex: 1; display: flex; min-height: 0; position: relative; z-index: 1; } /* ===================== SIDEBAR (floating glass) ===================== */ .side { width: var(--side-w); flex: 0 0 auto; margin: 12px 0 12px 12px; border-radius: var(--r-xl); display: flex; flex-direction: column; min-height: 0; overflow: hidden; background: var(--glass); backdrop-filter: blur(40px) saturate(180%); -webkit-backdrop-filter: blur(40px) saturate(180%); border: 1px solid var(--glass-border); box-shadow: var(--sh-card), inset 0 1px 0 var(--glass-edge); transition: width .32s var(--smooth); } .side.collapsed { width: 64px; } /* keep in sync with SIDER_COLLAPSED_WIDTH (inline width wins) */ /* Collapse is a single continuous "one-shot": every element stays mounted and animates its width/height/opacity in lockstep with the `.side` width transition above — never conditionally rendered (DOM add/remove snaps the layout). */ .brand { display: flex; align-items: center; gap: 0; padding: 18px 20px 14px; overflow: hidden; transition: padding .32s var(--smooth); } .side.collapsed .brand { padding-left: 15px; padding-right: 15px; } .bmark { width: 34px; height: 34px; border-radius: 10px; flex: 0 0 auto; display: block; object-fit: contain; filter: drop-shadow(0 2px 6px rgba(0,0,0,.18)); transition: opacity .3s; } /* .bname collapse (max-width/opacity/margin) is driven inline in AppSidebar so it shares the `opacity` channel with the welcome-intro handoff without fighting it. */ .bname { display: inline-block; font-size: 17px; font-weight: 750; letter-spacing: -.03em; white-space: nowrap; overflow: hidden; vertical-align: middle; } .bname b { color: var(--accent); font-weight: 750; } /* M/A/G segmented control. The buttons and thumb stay in a single absolute coordinate system, then morph between horizontal and vertical positions. */ .mag-shell { --mag-active: 0; position: relative; margin: 2px 16px 16px; height: 68px; transition: margin .32s var(--smooth), height .32s var(--smooth); } .mag-shell.vmag { margin: 2px 10px 14px; height: 107px; } .mag { position: absolute; inset: 0; background: var(--track); border-radius: 13px; overflow: hidden; } .mag > .thumb { position: absolute; z-index: 0; border-radius: 10px; background: var(--glass-strong); box-shadow: 0 2px 8px rgba(0,0,0,.14), inset 0 1px 0 var(--glass-edge); left: 4px; top: 4px; width: calc((100% - 8px) / 3); height: calc(100% - 8px); transition: left .32s var(--smooth), width .32s var(--smooth), height .32s var(--smooth), transform .38s var(--spring); transform: translate3d(calc(var(--mag-active) * 100%), 0, 0); } .mag-shell.vmag .mag > .thumb { left: calc(50% - 17px); width: 34px; height: 31px; transform: translate3d(0, calc(var(--mag-active) * 34px), 0); } [data-theme="dark"] .mag > .thumb { background: rgba(var(--accent-rgb),.9); box-shadow: var(--sh-accent); } .mag button { --mag-index: 0; position: absolute; left: 4px; top: 4px; z-index: 1; min-width: 0; width: calc((100% - 8px) / 3); height: calc(100% - 8px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 7px 0; color: var(--ink-2); font-weight: 650; transform: translate3d(calc(var(--mag-index) * 100%), 0, 0); transition: left .32s var(--smooth), width .32s var(--smooth), height .32s var(--smooth), padding .32s var(--smooth), transform .32s var(--smooth), color .3s; } .mag-shell.vmag .mag button { left: calc(50% - 17px); width: 34px; height: 31px; padding: 6px 0; transform: translate3d(0, calc(var(--mag-index) * 34px), 0); } .mag button .l { position: relative; z-index: 1; font-size: 14px; font-weight: 800; } .mag button .s { position: relative; z-index: 1; font-size: 9.5px; opacity: .7; max-height: 14px; overflow: hidden; transition: max-height .28s var(--smooth), opacity .26s var(--smooth); } .side.collapsed .mag button .s { max-height: 0; opacity: 0; } .mag button.on { color: var(--ink); } [data-theme="dark"] .mag button.on { color: var(--on-accent); } [data-theme="light"] .mag button.on { color: var(--accent); } .scap { font-size: 11px; font-weight: 700; letter-spacing: .09em; color: var(--ink-3); padding: 2px 22px 8px; white-space: nowrap; overflow: hidden; max-height: 22px; opacity: 1; transition: max-height .3s var(--smooth), opacity .26s var(--smooth), padding .3s var(--smooth); } .side.collapsed .scap { max-height: 0; opacity: 0; padding-top: 0; padding-bottom: 0; } .nav { position: relative; padding: 0 12px; display: flex; flex-direction: column; gap: 3px; overflow-y: auto; overflow-x: hidden; flex: 1; } .nav-ind { position: absolute; left: 12px; right: 12px; border-radius: 13px; z-index: 0; pointer-events: none; background: rgba(var(--accent-rgb),.16); border: 1px solid rgba(var(--accent-rgb),.22); box-shadow: inset 0 1px 0 var(--glass-edge); transition: transform .44s var(--spring), height .3s var(--spring), opacity .3s; } .nitem { position: relative; z-index: 1; display: flex; align-items: center; gap: 13px; padding: 10px 13px; border-radius: 13px; text-align: left; width: 100%; color: var(--ink); transition: background .2s, transform .14s var(--spring), gap .3s var(--smooth), padding .3s var(--smooth); } .nitem:hover:not(.on) { background: var(--fill); } .nitem:active { transform: scale(.97); } /* Centre the 30px icon in the collapsed nav track via the already-transitioning padding — never `justify-content`, which can't animate and would snap the icon to the (still-wide) centre for one frame on toggle. Track = 64 (rail) − 2 (.side border) − 24 (.nav padding) = 38px, so (38−30)/2 = 4px exactly fills the box. */ .side.collapsed .nitem { padding: 10px 4px; gap: 0; } .nico { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; flex: 0 0 auto; color: var(--ink-2); transition: color .25s, background .25s, transform .3s var(--spring); } .nitem.on .nico { color: var(--on-accent); background: var(--accent); box-shadow: var(--sh-accent); transform: scale(1.04); } .nlbl { font-size: 14.5px; font-weight: 550; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 170px; opacity: 1; transition: color .25s, max-width .3s var(--smooth), opacity .26s var(--smooth); } .side.collapsed .nlbl { max-width: 0; opacity: 0; } .nitem.on .nlbl { font-weight: 680; color: var(--accent); } .nbadge { margin-left: auto; font-size: 11px; font-weight: 700; color: var(--ink-3); background: var(--fill); height: 19px; min-width: 19px; padding: 0 5px; border-radius: 99px; display: grid; place-items: center; flex: 0 0 auto; } .nitem.on .nbadge { color: var(--on-accent); background: var(--accent); } .side-foot { padding: 12px; display: flex; flex-direction: column; gap: 9px; transition: gap .3s var(--smooth); } .side.collapsed .side-foot { gap: 0; } .conncard, .conn { border-radius: var(--r-md); padding: 11px 13px; display: flex; align-items: center; gap: 11px; background: var(--glass-2); border: 1px solid var(--glass-border); box-shadow: inset 0 1px 0 var(--glass-edge); } .conncard { max-height: 80px; opacity: 1; overflow: hidden; transition: max-height .32s var(--smooth), opacity .26s var(--smooth), padding .32s var(--smooth), margin .32s var(--smooth), border-width .32s var(--smooth); } .side.collapsed .conncard { max-height: 0; opacity: 0; padding-top: 0; padding-bottom: 0; border-top-width: 0; border-bottom-width: 0; } .conncard .cdot { width: 9px; height: 9px; border-radius: 99px; background: var(--green); flex: 0 0 auto; box-shadow: 0 0 0 3px rgba(52,199,89,.18); } .conncard .cdot.off { background: var(--ink-3); box-shadow: none; } .conncard .ctxt { min-width: 0; } .conncard .cname { font-size: 12.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .conncard .cstat { font-size: 11px; color: var(--ink-3); } .collapse { width: 100%; height: 34px; border-radius: 11px; color: var(--ink-3); font-size: 12px; font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 7px; white-space: nowrap; transition: background .18s, gap .3s var(--smooth); } .collapse:hover { background: var(--fill); color: var(--ink-2); } .collapse-lbl { display: inline-block; max-width: 80px; opacity: 1; overflow: hidden; transition: max-width .3s var(--smooth), opacity .26s var(--smooth); } .side.collapsed .collapse { gap: 0; } .side.collapsed .collapse-lbl { max-width: 0; opacity: 0; } /* ===================== CONTENT ===================== */ .content { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; } .cscroll { flex: 1; min-height: 0; overflow-y: auto; } .cinner { padding: 26px 36px 64px; max-width: 1520px; } .phead { display: flex; align-items: flex-end; gap: 20px; margin-bottom: 26px; } .ptitles { flex: 1; min-width: 0; } .ptitle { font-size: 33px; font-weight: 800; letter-spacing: -.035em; line-height: 1; } .psub { font-size: 14.5px; color: var(--ink-2); margin-top: 10px; } .phead .actions { display: flex; gap: 10px; align-items: center; } /* entrance — transform-only (content always visible even if paused/hidden). NOTE: `animation: ...both` locks `transform` after it finishes, which would override any `:hover { transform }`. Do NOT apply `.stagger` to elements that need a hover-lift (.dcard/.rcard/.patch) — page entrance is driven by the framer-motion wrapper in AppLayout instead, keeping card hover-lift intact. */ .page { animation: slideUp .5s var(--spring) both; } .stagger > * { animation: slideUp .55s var(--spring) both; animation-delay: calc(var(--i, 0) * 55ms); } @keyframes slideUp { from { transform: translateY(13px); } to { transform: none; } } /* ===================== BUTTONS ===================== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: var(--pill); font-size: 14.5px; font-weight: 650; padding: 0 18px; height: 42px; white-space: nowrap; position: relative; overflow: hidden; transition: transform .14s var(--spring), background .2s, box-shadow .2s, color .2s, opacity .2s; } .btn:active { transform: scale(.94); } .btn.lg { height: 50px; font-size: 16px; padding: 0 26px; } .btn.xl { height: 56px; font-size: 17px; padding: 0 32px; } .btn.sm { height: 34px; font-size: 13px; padding: 0 14px; } .btn.block { width: 100%; } .btn.pri { background: var(--accent); color: var(--on-accent); box-shadow: var(--sh-accent); } .btn.pri::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,.28), transparent 55%); pointer-events: none; } .btn.pri:hover { filter: brightness(1.06); transform: translateY(-1px); } .btn.pri:active { transform: scale(.94); } .btn.pri:disabled { background: var(--fill); color: var(--ink-3); box-shadow: none; cursor: not-allowed; } .btn.pri:disabled::before { display: none; } .btn.glass, .btn.sec { background: var(--glass-strong); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); color: var(--ink); border: 1px solid var(--glass-border); box-shadow: inset 0 1px 0 var(--glass-edge); } .btn.glass:hover, .btn.sec:hover { background: var(--fill-press); } /* tint/danger carry the same glass depth as .btn.glass (border + inset top edge + backdrop blur) so they don't read as flat color pills on glass cards — only the tint hue says "accent action" / "destructive". */ .btn.tint { background: linear-gradient(180deg, rgba(var(--accent-rgb),.19), rgba(var(--accent-rgb),.12)); color: var(--accent); border: 1px solid rgba(var(--accent-rgb),.30); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: inset 0 1px 0 var(--glass-edge); } .btn.tint:hover { background: linear-gradient(180deg, rgba(var(--accent-rgb),.27), rgba(var(--accent-rgb),.18)); } .btn.ghost { color: var(--accent); } .btn.ghost:hover { background: rgba(var(--accent-rgb),.12); } .btn.danger { background: linear-gradient(180deg, rgba(255,69,58,.19), rgba(255,69,58,.12)); color: var(--red); border: 1px solid rgba(255,69,58,.30); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: inset 0 1px 0 var(--glass-edge); } .btn.danger:hover { background: linear-gradient(180deg, rgba(255,69,58,.27), rgba(255,69,58,.18)); } .btn:disabled { color: var(--ink-3); cursor: not-allowed; opacity: .85; } .btn.glass:disabled, .btn.sec:disabled, .btn.tint:disabled, .btn.ghost:disabled, .btn.danger:disabled { background: var(--fill); box-shadow: none; border-color: var(--glass-border); } .btn.icon { width: 42px; padding: 0; } .btn.icon.lg { width: 50px; } .btn.icon.sm { width: 34px; } /* ===================== CARD / SECTION ===================== */ .card { border-radius: var(--r-lg); background: var(--glass); backdrop-filter: blur(34px) saturate(180%); -webkit-backdrop-filter: blur(34px) saturate(180%); border: 1px solid var(--glass-border); box-shadow: var(--sh-card), inset 0 1px 0 var(--glass-edge); } .card.flat { box-shadow: inset 0 1px 0 var(--glass-edge); } .pad { padding: 22px; } .shead { display: flex; align-items: center; gap: 11px; margin: 0 0 14px 2px; } .sicn { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; flex: 0 0 auto; background: rgba(var(--accent-rgb),.15); color: var(--accent); } .sicn.blue { background: rgba(var(--accent-rgb),.15); color: var(--accent); } .sicn.alt, .sicn.purple { background: rgba(120,90,255,.16); color: var(--purple); } .sicn.green { background: var(--green-soft); color: var(--green); } .sicn.amber { background: var(--amber-soft); color: var(--amber); } .stitle { font-size: 17px; font-weight: 720; letter-spacing: -.02em; } .shead .right { margin-left: auto; display: flex; gap: 8px; align-items: center; } /* ===================== INSET LIST (iOS settings) ===================== */ .list { border-radius: var(--r-lg); overflow: hidden; background: var(--glass); backdrop-filter: blur(34px) saturate(180%); -webkit-backdrop-filter: blur(34px) saturate(180%); border: 1px solid var(--glass-border); box-shadow: var(--sh-card), inset 0 1px 0 var(--glass-edge); } .lrow { display: flex; align-items: center; gap: 14px; padding: 0 18px; min-height: 56px; position: relative; transition: background .16s; } .lrow.tall { min-height: 64px; } .lrow + .lrow::before { content: ""; position: absolute; left: 18px; right: 0; top: 0; height: 1px; background: var(--sep); } .lrow.tap, .lrow.btnrow { cursor: pointer; } .lrow.tap:hover, .lrow.btnrow:hover { background: var(--fill); } .lrow.tap:active, .lrow.btnrow:active { background: var(--fill-press); } .lrow .ll { font-size: 15px; font-weight: 500; flex: 0 0 auto; display: flex; flex-direction: column; } .lrow .lsub { font-size: 12px; color: var(--ink-3); margin-top: 2px; } /* Inline hint on the SAME line as the label (replaces the old two-line sub on settings rows — keep it short). */ .lhint { font-size: 12px; font-weight: 500; color: var(--ink-3); margin-left: 10px; } /* Single-line rows (no .lsub second line): tighter vertical rhythm. */ .list.dense .lrow { min-height: 48px; } .list.dense .lrow.tall { min-height: 56px; } .lrow .lr { margin-left: auto; display: flex; align-items: center; gap: 9px; color: var(--ink-2); font-size: 15px; min-width: 0; } .lrow .lr .val { color: var(--ink); font-weight: 550; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lrow .lr .ph { color: var(--ink-3); } .chev { color: var(--ink-4); flex: 0 0 auto; display: inline-flex; transition: transform .2s var(--spring); } .lrow.tap:hover .chev, .lrow.btnrow:hover .chev { transform: translateX(2px); } .flabel { font-size: 12.5px; font-weight: 650; color: var(--ink-2); margin-bottom: 8px; display: block; } /* ===================== CONTROLS ===================== */ .seg { position: relative; display: inline-flex; padding: 4px; background: var(--track); border-radius: 12px; } .seg .thumb { position: absolute; top: 4px; bottom: 4px; left: 0; border-radius: 9px; background: var(--glass-strong); box-shadow: 0 2px 7px rgba(0,0,0,.12), inset 0 1px 0 var(--glass-edge); transition: transform .4s var(--spring), width .4s var(--spring); } [data-theme="dark"] .seg .thumb { background: rgba(var(--accent-rgb),.85); } .seg button { position: relative; z-index: 1; color: var(--ink-2); font-size: 13px; font-weight: 650; padding: 7px 15px; border-radius: 9px; transition: color .3s; white-space: nowrap; } .seg button.on { color: var(--ink); } [data-theme="dark"] .seg button.on { color: var(--on-accent); } .seg.lg button { padding: 10px 20px; font-size: 14px; } .seg.sm { padding: 3px; border-radius: 10px; } .seg.sm .thumb { border-radius: 8px; } .seg.sm button { padding: 5px 12px; font-size: 12.5px; border-radius: 8px; } /* full-width "top bar" mode toggle: equal-width options, no empty gap */ .seg.block { display: flex; width: 100%; } .seg.block button { flex: 1; } .seg.disabled { opacity: .55; pointer-events: none; } /* Off-state track must read as a toggle: a semi-opaque fill + inner ring + inset depth (and a light glass blur), since the bare --track is near-invisible on the glass surfaces. On-state fills with the category accent. */ .sw { width: 52px; height: 31px; border-radius: 99px; background: var(--track); padding: 0; position: relative; flex: 0 0 auto; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); box-shadow: inset 0 0 0 1px var(--glass-border), inset 0 1px 2px rgba(0,0,0,.14); transition: background .35s var(--spring), box-shadow .35s; } [data-theme="dark"] .sw { background: rgba(235,235,245,.13); box-shadow: inset 0 0 0 1px rgba(255,255,255,.22), inset 0 1px 2px rgba(0,0,0,.32); } [data-theme="light"] .sw { background: rgba(40,40,55,.14); box-shadow: inset 0 0 0 1px rgba(40,40,55,.20), inset 0 1px 2px rgba(0,0,0,.07); } .sw::after { content: ""; position: absolute; top: 2.5px; left: 2.5px; width: 26px; height: 26px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.3); transition: transform .35s var(--spring), width .2s var(--spring); } .sw.on, .sw.on.blue { background: var(--accent); box-shadow: inset 0 0 0 1px rgba(0,0,0,.10), inset 0 1px 0 rgba(255,255,255,.3); } .sw.on::after { transform: translateX(21px); } .sw:disabled { opacity: .5; cursor: default; } .sw:active::after { width: 30px; } .sw.on:active::after { transform: translateX(17px); } .swwrap { display: inline-flex; align-items: center; gap: 11px; } .swside { font-size: 13px; font-weight: 600; color: var(--ink-3); transition: color .3s; } .swside.on { color: var(--ink); } .input { width: 100%; height: 44px; border-radius: var(--r-md); background: var(--field); border: 1px solid var(--glass-border); color: var(--ink); font-size: 15px; padding: 0 14px; transition: border-color .2s, box-shadow .2s; backdrop-filter: blur(8px); } .input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px rgba(var(--accent-rgb),.16); } .input::placeholder { color: var(--ink-3); } /* In light mode the near-white glass border vanishes on pale surfaces; give form fields a faint dark hairline so they read as inputs. */ [data-theme="light"] .input { border-color: var(--sep); } .f2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .chips { display: flex; flex-wrap: wrap; gap: 7px; } .chip { display: inline-flex; align-items: center; gap: 5px; height: 32px; padding: 0 9px 0 12px; border-radius: 10px; background: var(--fill); color: var(--ink); font-size: 13px; font-weight: 600; transition: transform .14s var(--spring), background .16s; } .chip:active { transform: scale(.92); } .chip .x { width: 16px; height: 16px; border-radius: 99px; display: grid; place-items: center; color: var(--ink-3); } .chip:hover .x { background: var(--fill-press); color: var(--ink); } .chip.add { border: 1px dashed var(--ink-4); background: transparent; color: var(--ink-2); } .chip.add:hover { border-color: var(--accent); color: var(--accent); } .chip.on { background: var(--accent); color: #fff; } .cbx { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 500; color: var(--ink); transition: transform .14s var(--spring); } .cbx:active { transform: scale(.96); } .cbx .box { width: 24px; height: 24px; border-radius: 8px; display: grid; place-items: center; background: var(--fill); border: 1px solid var(--glass-border); color: #fff; transition: background .2s, border-color .2s, transform .25s var(--spring); } .cbx.on .box { background: var(--accent); border-color: var(--accent); transform: scale(1.05); } /* ===================== DEVICE CARDS ===================== */ .dgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 16px; } .dcard { border-radius: var(--r-lg); padding: 18px; display: flex; flex-direction: column; gap: 15px; background: var(--glass); backdrop-filter: blur(34px) saturate(180%); -webkit-backdrop-filter: blur(34px) saturate(180%); border: 1px solid var(--glass-border); box-shadow: var(--sh-card), inset 0 1px 0 var(--glass-edge); transition: transform .3s var(--spring), box-shadow .3s; } .dcard:hover { transform: translateY(-3px); box-shadow: var(--sh-pop), inset 0 1px 0 var(--glass-edge); } .dtop { display: flex; align-items: center; gap: 14px; } .dphoto, .dtile { width: 64px; height: 64px; border-radius: 16px; background: var(--tile); display: grid; place-items: center; overflow: hidden; flex: 0 0 auto; box-shadow: 0 4px 14px rgba(0,0,0,.12); } .dphoto img, .dtile img { width: 100%; height: 100%; object-fit: contain; } .dtile.purple { background: rgba(120,90,255,.14); color: var(--purple); box-shadow: none; } .dtile.muted { background: var(--fill); color: var(--ink-3); box-shadow: none; } .dname { font-size: 16.5px; font-weight: 720; letter-spacing: -.02em; } .dmeta { font-size: 12.5px; color: var(--ink-3); margin-top: 3px; } .spill { display: inline-flex; align-items: center; gap: 6px; height: 25px; padding: 0 11px; border-radius: 99px; font-size: 12px; font-weight: 700; margin-left: auto; flex: 0 0 auto; } .spill.ok { background: var(--green-soft); color: var(--green); } .spill.idle { background: var(--amber-soft); color: var(--amber); } .spill.busy { background: rgba(var(--accent-rgb),.16); color: var(--accent); } .dstats { display: flex; gap: 20px; flex-wrap: wrap; padding: 13px 2px; border-top: 1px solid var(--sep); border-bottom: 1px solid var(--sep); } .dstat .k { font-size: 11px; color: var(--ink-3); font-weight: 650; } .dstat .v { font-size: 14px; font-weight: 650; margin-top: 3px; } .dactions { display: flex; gap: 8px; } /* `.mag-root button` (124) resets border+background; outspecify it so the glass actually renders on the