/* ========================================================================= Connecfy Design System ========================================================================= Approach: CSS custom properties for theming, utility-first naming where it makes components readable, semantic class names where they don't. Dark mode: [data-theme="dark"] on , toggled from Settings. Mobile sidebar: drawer pattern (off-canvas), toggled with #nav-toggle. ========================================================================= */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600&display=swap'); /* ── Tokens ──────────────────────────────────────────────────── */ :root { --brand: #4F46E5; --brand-h: #4338CA; --brand-light: #EEF2FF; --brand-mid: #818CF8; --brand-dim: #C7D2FE; --ok: #059669; --ok-bg: #ECFDF5; --ok-rim: #A7F3D0; --warn: #B45309; --warn-bg: #FFFBEB; --warn-rim: #FDE68A; --bad: #DC2626; --bad-bg: #FEF2F2; --bad-rim: #FECACA; --info: #0369A1; --info-bg: #E0F2FE; --n950:#0C0C0D; --n900:#18181B; --n800:#27272A; --n700:#3F3F46; --n600:#52525B; --n500:#71717A; --n400:#A1A1AA; --n300:#D4D4D8; --n200:#E4E4E7; --n150:#EBEBED; --n100:#F4F4F5; --n50:#FAFAFA; --white:#FFFFFF; --bg: var(--white); --bg2: var(--n50); --bg3: var(--n100); --border:var(--n200); --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; --mono: 'JetBrains Mono', 'Fira Code', Consolas, monospace; --sh-xs: 0 1px 2px rgb(0 0 0/.06); --sh-sm: 0 1px 3px rgb(0 0 0/.08), 0 1px 2px rgb(0 0 0/.05); --sh-md: 0 4px 8px rgb(0 0 0/.07), 0 2px 4px rgb(0 0 0/.04); --sh-lg: 0 12px 24px rgb(0 0 0/.08),0 4px 8px rgb(0 0 0/.04); --sh-xl: 0 24px 48px rgb(0 0 0/.10),0 8px 16px rgb(0 0 0/.05); --sh-focus: 0 0 0 3px rgb(79 70 229/.20); --r-xs:4px; --r-sm:6px; --r:8px; --r-md:12px; --r-lg:16px; --r-xl:20px; --r-2xl:28px; --r-full:9999px; --ease: cubic-bezier(.4,0,.2,1); --ease-out: cubic-bezier(0,0,.2,1); --fast:100ms; --mid:160ms; --slow:240ms; } /* ── Dark mode ───────────────────────────────────────────────── */ [data-theme="dark"] { --n950:#F0F0F1; --n900:#E4E4E7; --n800:#D4D4D8; --n700:#A1A1AA; --n600:#71717A; --n500:#52525B; --n400:#3F3F46; --n300:#2E2E32; --n200:#232325; --n150:#1D1D1F; --n100:#19191B; --n50:#141416; --white:#0F0F11; --bg:#0F0F11; --bg2:#141416; --bg3:#19191B; --border:#232325; --brand-light:rgba(79,70,229,.15); --brand-dim:rgba(99,102,241,.35); --ok-bg:rgba(5,150,105,.12); --ok-rim:rgba(5,150,105,.3); --warn-bg:rgba(180,83,9,.12); --warn-rim:rgba(180,83,9,.3); --bad-bg:rgba(220,38,38,.12); --bad-rim:rgba(220,38,38,.3); --info-bg:rgba(3,105,161,.15); --sh-focus:0 0 0 3px rgba(99,102,241,.3); --sh-xs:0 1px 2px rgba(0,0,0,.3); --sh-sm:0 1px 3px rgba(0,0,0,.35); --sh-md:0 4px 8px rgba(0,0,0,.4); --sh-lg:0 12px 24px rgba(0,0,0,.45); } [data-theme="dark"] body { background:var(--bg); } [data-theme="dark"] .pub-header { background:rgba(15,15,17,.92); border-bottom-color:#232325; } [data-theme="dark"] .hero { background:linear-gradient(180deg,#0F0F11 0%,#141416 100%); } [data-theme="dark"] .section-alt { background:#141416; border-color:#232325; } [data-theme="dark"] .hero h1 { color:#F0F0F1; } [data-theme="dark"] .section-title { color:#F0F0F1; } [data-theme="dark"] .auth-page { background:var(--bg); } [data-theme="dark"] .auth-card { background:#141416; border-color:#232325; } /* ── Reset ───────────────────────────────────────────────────── */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{font-family:var(--sans);font-size:15px;line-height:1.5;color:var(--n800); background:var(--bg);-webkit-font-smoothing:antialiased} a{color:inherit;text-decoration:none} a:where(:not([class])){color:var(--brand);text-underline-offset:2px} a:where(:not([class])):hover{text-decoration:underline} img,svg,video{display:block;max-width:100%} ul,ol{list-style:none} button{cursor:pointer;font-family:inherit;border:none;background:none} :focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:var(--r-xs)} ::selection{background:var(--brand-light)} h1,h2,h3,h4,h5,h6{letter-spacing:-.02em;line-height:1.2;font-weight:600} /* ── Buttons ─────────────────────────────────────────────────── */ .btn { display:inline-flex;align-items:center;justify-content:center;gap:7px; padding:0 16px;height:38px;font-family:var(--sans);font-size:14px; font-weight:500;border-radius:var(--r);border:1.5px solid transparent; cursor:pointer;white-space:nowrap;text-decoration:none!important; transition:background var(--fast) var(--ease),border-color var(--fast) var(--ease), color var(--fast) var(--ease),box-shadow var(--fast) var(--ease), transform var(--fast) var(--ease); user-select:none;position:relative;overflow:hidden; } .btn::after{content:'';position:absolute;inset:0;border-radius:inherit; background:transparent;transition:background var(--fast) var(--ease)} .btn:active::after{background:rgba(0,0,0,.07)} .btn:disabled{opacity:.45;pointer-events:none} .btn svg{width:15px;height:15px;flex-shrink:0} .btn-primary{background:var(--brand);color:#fff;border-color:var(--brand); box-shadow:0 1px 2px rgb(79 70 229/.25),inset 0 1px 0 rgb(255 255 255/.10)} .btn-primary:hover{background:var(--brand-h);border-color:var(--brand-h); transform:translateY(-1px);box-shadow:0 3px 8px rgb(79 70 229/.30)} .btn-primary:active{transform:translateY(0)} .btn-secondary{background:var(--white);color:var(--n700);border-color:var(--n200);box-shadow:var(--sh-xs)} .btn-secondary:hover{background:var(--n50);border-color:var(--n300);transform:translateY(-1px);box-shadow:var(--sh-sm)} .btn-secondary:active{transform:translateY(0)} .btn-ghost{background:transparent;color:var(--n600);border-color:transparent} .btn-ghost:hover{background:var(--n100);color:var(--n800)} .btn-danger{background:var(--bad);color:#fff;border-color:var(--bad)} .btn-danger:hover{background:#B91C1C;transform:translateY(-1px);box-shadow:0 3px 8px rgb(220 38 38/.25)} .btn-dark{background:var(--n900);color:#fff;border-color:var(--n900)} .btn-dark:hover{background:var(--n800);transform:translateY(-1px);box-shadow:var(--sh-md)} .btn-xs{height:28px;padding:0 10px;font-size:12px} .btn-sm{height:32px;padding:0 13px;font-size:13px} .btn-lg{height:44px;padding:0 22px;font-size:15px;font-weight:600;border-radius:var(--r-md)} .btn-xl{height:52px;padding:0 28px;font-size:16px;font-weight:600;border-radius:var(--r-md)} .btn-full{width:100%} .btn.is-loading{pointer-events:none} .btn.is-loading .btn-label{opacity:0} .btn.is-loading::before{content:'';position:absolute;width:16px;height:16px; border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%; animation:spin .7s linear infinite} @keyframes spin{to{transform:rotate(360deg)}} /* ── Forms ───────────────────────────────────────────────────── */ .field{display:flex;flex-direction:column;gap:5px;margin-bottom:18px} .field:last-child{margin-bottom:0} .label{font-size:13.5px;font-weight:500;color:var(--n700)} .label-opt{font-weight:400;color:var(--n400);font-size:12px} .hint{font-size:12.5px;color:var(--n400);margin-top:3px;line-height:1.5} .field-error{font-size:12.5px;color:var(--bad);margin-top:3px} .input{width:100%;height:38px;padding:0 13px;background:var(--white); border:1.5px solid var(--n200);border-radius:var(--r);color:var(--n900); font-size:14px;font-family:var(--sans); transition:border-color var(--fast) var(--ease),box-shadow var(--fast) var(--ease); appearance:none} .input::placeholder{color:var(--n400)} .input:hover:not(:disabled):not(:focus){border-color:var(--n300)} .input:focus{outline:none;border-color:var(--brand);box-shadow:var(--sh-focus)} .input:disabled{background:var(--n50);color:var(--n400);cursor:not-allowed} .input.has-error{border-color:var(--bad)} .input.has-error:focus{box-shadow:0 0 0 3px rgb(220 38 38/.15)} select.input{cursor:pointer;padding-right:32px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23a1a1aa' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 12px center} textarea.input{height:auto;min-height:100px;padding:11px 13px;resize:vertical;line-height:1.6} input[type=radio],input[type=checkbox]{width:16px;height:16px;accent-color:var(--brand);cursor:pointer} /* Password input wrapper */ .pw-wrap{position:relative} .pw-wrap .input{padding-right:42px} .pw-toggle{position:absolute;right:11px;top:50%;transform:translateY(-50%); background:none;border:none;color:var(--n400);cursor:pointer;padding:4px; display:flex;align-items:center;transition:color var(--fast)} .pw-toggle:hover{color:var(--n700)} .pw-toggle svg{width:16px;height:16px} /* ── Cards ───────────────────────────────────────────────────── */ .card{background:var(--white);border:1.5px solid var(--border);border-radius:var(--r-lg);padding:22px} .card-sm{padding:16px} .card-lg{padding:28px} .card-flush{padding:0} .card-link{text-decoration:none!important;color:inherit;display:block; transition:border-color var(--mid) var(--ease),box-shadow var(--mid) var(--ease),transform var(--mid) var(--ease)} .card-link:hover{border-color:var(--brand-dim);box-shadow:var(--sh-md);transform:translateY(-2px)} /* ── Stats ───────────────────────────────────────────────────── */ .stat{background:var(--white);border:1.5px solid var(--border);border-radius:var(--r-lg);padding:20px 22px} .stat-label{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--n400);margin-bottom:10px} .stat-num{font-size:32px;font-weight:800;letter-spacing:-.04em;color:var(--n900);line-height:1} .stat-num.green{color:var(--ok)} .stat-num.amber{color:var(--warn)} .stat-num.red{color:var(--bad)} .stat-num.brand{color:var(--brand)} .stat-note{font-size:12.5px;color:var(--n400);margin-top:6px} .stat-note a{color:var(--brand);font-weight:500} .stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));gap:14px;margin-bottom:24px} /* ── Badges ──────────────────────────────────────────────────── */ .badge{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:var(--r-full); font-size:12px;font-weight:500;white-space:nowrap} .badge::before{content:'';width:5px;height:5px;border-radius:50%;background:currentColor;flex-shrink:0} .badge-success,.badge-online,.badge-sent,.badge-delivered{background:var(--ok-bg);color:var(--ok)} .badge-warning,.badge-sending{background:var(--warn-bg);color:var(--warn)} .badge-danger,.badge-failed{background:var(--bad-bg);color:var(--bad)} .badge-info{background:var(--info-bg);color:var(--info)} .badge-neutral,.badge-queued,.badge-offline{background:var(--n100);color:var(--n500)} .badge-brand{background:var(--brand-light);color:var(--brand)} /* ── Toast ───────────────────────────────────────────────────── */ #toast-stack{position:fixed;bottom:24px;right:24px;z-index:9999; display:flex;flex-direction:column;gap:10px;pointer-events:none} .toast{display:flex;align-items:flex-start;gap:11px;min-width:300px;max-width:420px; padding:14px 16px;background:var(--n900);color:var(--white);border-radius:var(--r-lg); box-shadow:0 8px 32px rgb(0 0 0/.25);font-size:14px;pointer-events:all; border:1px solid rgb(255 255 255/.08);animation:toast-in var(--slow) var(--ease-out) forwards} .toast.out{animation:toast-out var(--mid) var(--ease) forwards} .toast-icon{font-size:15px;flex-shrink:0;margin-top:1px} .toast-body{flex:1} .toast-title{font-weight:600;color:#fff;margin-bottom:2px} .toast-msg{font-size:13.5px;color:rgba(255,255,255,.6)} .toast-close{background:none;border:none;color:rgba(255,255,255,.4);cursor:pointer; font-size:18px;line-height:1;flex-shrink:0;transition:color var(--fast)} .toast-close:hover{color:#fff} .toast.success .toast-icon{color:#34D399} .toast.error .toast-icon{color:#F87171} .toast.warning .toast-icon{color:#FCD34D} .toast.info .toast-icon{color:#60A5FA} @keyframes toast-in{from{opacity:0;transform:translateX(20px) scale(.97)}to{opacity:1;transform:translateX(0) scale(1)}} @keyframes toast-out{from{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(12px)}} /* ── Flash messages ──────────────────────────────────────────── */ .flash{padding:12px 16px;border-radius:var(--r-md);font-size:14px;margin-bottom:18px; border:1.5px solid transparent;display:flex;align-items:flex-start;gap:9px} .flash.success,.flash.messages{background:var(--ok-bg);color:var(--ok);border-color:var(--ok-rim)} .flash.error,.flash.danger{background:var(--bad-bg);color:var(--bad);border-color:var(--bad-rim)} .flash.warning{background:var(--warn-bg);color:var(--warn);border-color:var(--warn-rim)} .flash.info{background:var(--info-bg);color:var(--info)} /* ── Tables ──────────────────────────────────────────────────── */ .table-wrap{overflow-x:auto} .table{width:100%;border-collapse:collapse;font-size:13.5px} .table thead th{text-align:left;padding:10px 16px;font-size:11px;font-weight:700; text-transform:uppercase;letter-spacing:.07em;color:var(--n400); border-bottom:1.5px solid var(--n150);background:var(--n50);white-space:nowrap} .table tbody td{padding:13px 16px;border-bottom:1px solid var(--n100);vertical-align:middle} .table tbody tr:last-child td{border-bottom:none} .table tbody tr{transition:background var(--fast) var(--ease)} .table tbody tr:hover td{background:var(--n50)} .col-mono{font-family:var(--mono);font-size:12.5px;color:var(--n600)} /* ── Code ────────────────────────────────────────────────────── */ .code-block{position:relative;background:#0D1117;border:1.5px solid #21262D; border-radius:var(--r-lg);padding:20px 22px;font-family:var(--mono); font-size:13px;line-height:1.75;color:#E6EDF3;overflow-x:auto} .t-cmt{color:#8B949E} .t-key{color:#79C0FF} .t-str{color:#A5D6FF} .t-num{color:#FF7B72} .t-fn{color:#D2A8FF} .t-ok{color:#3FB950} .t-hl{color:#FFA657} .copy-btn{position:absolute;top:12px;right:12px;padding:4px 10px; background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12); border-radius:var(--r-sm);color:rgba(255,255,255,.55);font-size:11.5px; cursor:pointer;font-family:var(--sans);transition:background var(--fast),color var(--fast)} .copy-btn:hover{background:rgba(255,255,255,.13);color:#fff} .copy-btn.copied{color:#3FB950;border-color:rgba(63,185,80,.4)} .icode{font-family:var(--mono);font-size:.85em;background:var(--n100);color:var(--brand); padding:1px 6px;border-radius:var(--r-xs);border:1px solid var(--n200)} /* ── Status indicators ───────────────────────────────────────── */ .s-dot{display:inline-block;width:8px;height:8px;border-radius:50%;flex-shrink:0} .s-dot.online{background:var(--ok);box-shadow:0 0 0 3px var(--ok-bg);animation:hbeat 2.5s ease-in-out infinite} .s-dot.offline{background:var(--n300)} @keyframes hbeat{0%,100%{box-shadow:0 0 0 3px var(--ok-bg)}50%{box-shadow:0 0 0 5px var(--ok-bg)}} .battery{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--n600)} .battery-track{width:36px;height:10px;background:var(--n150);border-radius:var(--r-full);overflow:hidden} .battery-fill{height:100%;border-radius:var(--r-full);background:var(--ok);transition:width .4s var(--ease)} .battery-fill.mid{background:var(--warn)} .battery-fill.low{background:var(--bad);animation:pulse-red 1.5s ease-in-out infinite} @keyframes pulse-red{0%,100%{opacity:1}50%{opacity:.55}} /* ── Empty states ────────────────────────────────────────────── */ .empty{display:flex;flex-direction:column;align-items:center;text-align:center; padding:52px 24px 56px;color:var(--n400)} .empty-icon{font-size:38px;margin-bottom:16px;display:block} .empty h3{font-size:16px;font-weight:600;color:var(--n700);margin-bottom:6px} .empty p{font-size:14px;max-width:320px;line-height:1.6;margin-bottom:20px} /* ── Pagination ──────────────────────────────────────────────── */ .pager{display:flex;align-items:center;gap:5px;padding-top:16px} .pager a,.pager .pager-cur{display:flex;align-items:center;justify-content:center; min-width:32px;height:32px;padding:0 10px;border-radius:var(--r);font-size:13.5px; transition:background var(--fast),color var(--fast)} .pager a{color:var(--n600);border:1px solid var(--n200);background:var(--white)} .pager a:hover{background:var(--n50);border-color:var(--n300)} .pager .pager-cur{background:var(--brand);color:#fff;font-weight:600} /* ── Avatar ──────────────────────────────────────────────────── */ .avatar{width:34px;height:34px;border-radius:50%; background:linear-gradient(135deg,var(--brand) 0%,#7C3AED 100%);color:#fff; font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center; flex-shrink:0;letter-spacing:.02em} .avatar-lg{width:52px;height:52px;font-size:18px} /* ── Theme toggle ────────────────────────────────────────────── */ .theme-toggle{display:flex;align-items:center;gap:10px;cursor:pointer;padding:10px 0} .theme-toggle-track{width:42px;height:24px;border-radius:12px;background:var(--n200); position:relative;transition:background var(--fast);flex-shrink:0} .theme-toggle-thumb{position:absolute;top:3px;left:3px;width:18px;height:18px; border-radius:50%;background:var(--white);box-shadow:var(--sh-xs); transition:transform var(--mid) var(--ease)} [data-theme="dark"] .theme-toggle-track{background:var(--brand)} [data-theme="dark"] .theme-toggle-thumb{transform:translateX(18px)} .theme-toggle-label{font-size:14px;font-weight:500;color:var(--n700);user-select:none} /* ── Settings ────────────────────────────────────────────────── */ .settings-tabs{display:flex;gap:2px;border-bottom:1.5px solid var(--n200);margin-bottom:28px} .settings-tab{padding:9px 16px 10px;font-size:14px;font-weight:500;color:var(--n500); cursor:pointer;border:none;background:transparent;border-bottom:2px solid transparent; margin-bottom:-1.5px;font-family:var(--sans);transition:color var(--fast),border-color var(--fast); text-decoration:none;display:block} .settings-tab:hover{color:var(--n800)} .settings-tab.active{color:var(--brand);border-bottom-color:var(--brand);font-weight:600} .settings-section{border:1.5px solid var(--n200);border-radius:var(--r-lg);overflow:hidden;margin-bottom:24px} .settings-section-header{padding:16px 22px;background:var(--n50);border-bottom:1px solid var(--n200); display:flex;align-items:center;justify-content:space-between} .settings-section-title{font-size:13.5px;font-weight:700;color:var(--n800)} .settings-section-sub{font-size:13px;color:var(--n400);margin-top:2px} .settings-row{display:flex;align-items:flex-start;justify-content:space-between; padding:18px 22px;border-bottom:1px solid var(--n100);gap:24px} .settings-row:last-child{border-bottom:none} .settings-row-label{font-size:14px;font-weight:500;color:var(--n800);margin-bottom:3px} .settings-row-desc{font-size:13px;color:var(--n400);line-height:1.5} .settings-row-value{font-size:14px;color:var(--n600);font-family:var(--mono)} .danger-zone{border:1.5px solid var(--bad-rim);border-radius:var(--r-lg);overflow:hidden} .danger-zone-header{padding:14px 20px;background:var(--bad-bg);border-bottom:1px solid var(--bad-rim)} .danger-zone-title{font-size:13px;font-weight:700;color:var(--bad)} .danger-zone-body{padding:18px 20px;display:flex;align-items:center;justify-content:space-between;gap:24px} /* ── Conversation ────────────────────────────────────────────── */ .contact-list{display:flex;flex-direction:column} .contact-row{display:flex;align-items:center;gap:14px;padding:14px 20px; border-bottom:1px solid var(--n150);text-decoration:none!important;color:inherit; transition:background var(--fast)} .contact-row:hover{background:var(--bg3)} .contact-avatar{width:42px;height:42px;border-radius:50%; background:linear-gradient(135deg,var(--brand),#7C3AED);color:#fff; font-size:15px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0} .contact-body{flex:1;min-width:0} .contact-number{font-size:14.5px;font-weight:600;color:var(--n900);font-family:var(--mono)} .contact-preview{font-size:13px;color:var(--n500);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .contact-meta{text-align:right;flex-shrink:0} .contact-time{font-size:12px;color:var(--n400)} .convo-msg{background:var(--bg2);border:1px solid var(--n150);border-radius:var(--r-lg); padding:12px 16px;max-width:72%;position:relative} .convo-msg-text{font-size:14px;color:var(--n800);line-height:1.55} .convo-msg-meta{display:flex;align-items:center;gap:8px;margin-top:6px} .convo-msg-time{font-size:11.5px;color:var(--n400)} /* ═════════════════════════════════════════════════════════════ AUTH PAGES — completely redesigned Clean centered card, no split-panel, no emoji as icons. ═════════════════════════════════════════════════════════════ */ .auth-page { min-height: 100vh; background: var(--n50); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px 16px; } .auth-page .top-logo { display: flex; align-items: center; gap: 9px; margin-bottom: 32px; text-decoration: none !important; } .auth-page .top-logo img { height: 26px; } .auth-page .top-logo-name { font-size: 17px; font-weight: 800; color: var(--brand); letter-spacing: -.03em; } .auth-card { width: 100%; max-width: 420px; background: var(--white); border: 1.5px solid var(--n200); border-radius: var(--r-xl); padding: 36px; box-shadow: var(--sh-lg); } .auth-card-header { margin-bottom: 28px; } .auth-card h1 { font-size: 22px; font-weight: 800; letter-spacing: -.025em; color: var(--n900); margin-bottom: 6px; } .auth-card .auth-card-sub { font-size: 14px; color: var(--n500); line-height: 1.55; } .auth-divider { height: 1px; background: var(--n150); margin: 24px 0; } .auth-footer { text-align: center; font-size: 13.5px; color: var(--n500); margin-top: 24px; } .auth-footer a { color: var(--brand); font-weight: 500; } /* Account type picker in register */ .account-type-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 5px; } .account-type-card { border: 1.5px solid var(--n200); border-radius: var(--r-md); padding: 14px; cursor: pointer; transition: border-color var(--fast), background var(--fast); position: relative; } .account-type-card:has(input:checked), .account-type-card.selected { border-color: var(--brand); background: var(--brand-light); } .account-type-card input[type=radio] { position: absolute; opacity: 0; pointer-events: none; } .account-type-card .atc-icon { font-size: 20px; margin-bottom: 8px; } .account-type-card .atc-label { font-size: 13.5px; font-weight: 600; color: var(--n800); margin-bottom: 2px; } .account-type-card .atc-desc { font-size:12px; color:var(--n500); line-height:1.45; } /* ═════════════════════════════════════════════════════════════ PUBLIC LAYOUT ═════════════════════════════════════════════════════════════ */ .pub-header{position:sticky;top:0;z-index:100;height:60px; background:rgba(255,255,255,.88);backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);border-bottom:1px solid rgba(0,0,0,.07); display:flex;align-items:center} .pub-header-wrap{max-width:1120px;width:100%;margin:0 auto;padding:0 24px; display:flex;align-items:center;gap:28px} .pub-logo{display:flex;align-items:center;gap:9px;text-decoration:none!important} .pub-logo img{height:24px} .pub-logo-name{font-size:17px;font-weight:800;color:var(--brand);letter-spacing:-.03em} .pub-nav{display:flex;align-items:center;gap:1px;flex:1} .pub-nav-link{padding:6px 12px;border-radius:var(--r);font-size:14px;font-weight:500;color:var(--n600); transition:background var(--fast),color var(--fast)} .pub-nav-link:hover{background:var(--n100);color:var(--n900);text-decoration:none} .pub-actions{display:flex;align-items:center;gap:9px} .wrap{max-width:1120px;margin:0 auto;padding:0 24px} .wrap-sm{max-width:720px;margin:0 auto;padding:0 24px} .section{padding:88px 0} .section-sm{padding:56px 0} .section-xs{padding:36px 0} .section-alt{background:var(--n50);border-top:1px solid var(--n200);border-bottom:1px solid var(--n200)} .section-dark{background:var(--n950)} .section-tag{display:inline-block;font-size:11.5px;font-weight:800;text-transform:uppercase; letter-spacing:.1em;color:var(--brand);margin-bottom:12px} .section-title{font-size:clamp(26px,4vw,38px);font-weight:800;letter-spacing:-.03em; color:var(--n950);margin-bottom:14px} .section-sub{font-size:17px;color:var(--n500);line-height:1.65} .section-dark .section-title{color:var(--white)} .section-dark .section-sub{color:rgba(255,255,255,.5)} .hero{padding:96px 0 80px;background:linear-gradient(180deg,var(--white) 0%,var(--n50) 100%);position:relative;overflow:hidden} .hero::before{content:'';position:absolute;top:-120px;right:-80px;width:640px;height:640px; background:radial-gradient(circle,rgba(79,70,229,.07) 0%,transparent 70%);pointer-events:none; animation:float 8s ease-in-out infinite} @keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}} .hero-eyebrow{display:inline-flex;align-items:center;gap:8px;background:var(--brand-light); border:1px solid var(--brand-dim);color:var(--brand);font-size:13px;font-weight:600; padding:6px 14px;border-radius:var(--r-full);margin-bottom:24px} .live-dot{width:7px;height:7px;background:var(--ok);border-radius:50%; box-shadow:0 0 0 3px rgba(5,150,105,.2);animation:live-pulse 2s ease-in-out infinite} @keyframes live-pulse{0%,100%{box-shadow:0 0 0 3px rgba(5,150,105,.2)}50%{box-shadow:0 0 0 6px rgba(5,150,105,.08)}} .hero h1{font-size:clamp(36px,5.5vw,64px);font-weight:900;letter-spacing:-.04em;color:var(--n950); line-height:1.05;max-width:820px;margin-bottom:20px} .hero h1 .grad{background:linear-gradient(90deg,#4F46E5 0%,#7C3AED 100%); -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} .hero-sub{font-size:18px;color:var(--n500);max-width:560px;line-height:1.65;margin-bottom:36px} .hero-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:52px} .code-window{background:#0D1117;border:1.5px solid #21262D;border-radius:var(--r-xl); overflow:hidden;box-shadow:var(--sh-xl);max-width:640px} .code-window-bar{display:flex;align-items:center;gap:6px;padding:12px 16px; background:#161B22;border-bottom:1px solid #21262D} .code-window-dot{width:11px;height:11px;border-radius:50%} .code-window-title{font-family:var(--mono);font-size:12px;color:#6E7681;margin-left:10px} .code-window pre{padding:22px 24px;margin:0;font-family:var(--mono);font-size:13px; line-height:1.75;color:#E6EDF3;overflow-x:auto} .trust-strip{display:flex;align-items:center;gap:28px;flex-wrap:wrap;padding-top:24px;border-top:1px solid var(--n200)} .trust-item{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--n600);font-weight:500} .feature-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:18px} .feature-card{padding:24px;background:var(--white);border:1.5px solid var(--n200);border-radius:var(--r-lg); transition:border-color var(--mid),box-shadow var(--mid),transform var(--mid)} .feature-card:hover{border-color:var(--brand-dim);box-shadow:var(--sh-md);transform:translateY(-2px)} .feature-icon{width:44px;height:44px;border-radius:var(--r-md);display:flex;align-items:center; justify-content:center;font-size:22px;margin-bottom:15px} .fi-brand{background:var(--brand-light)} .fi-green{background:var(--ok-bg)} .fi-sky{background:#E0F2FE} .fi-amber{background:var(--warn-bg)} .fi-violet{background:#EDE9FE} .feature-card h3{font-size:15.5px;font-weight:700;margin-bottom:6px;color:var(--n900)} .feature-card p{font-size:14px;color:var(--n500);line-height:1.65} .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;position:relative} .steps::before{content:'';position:absolute;top:31px;left:calc(100%/6);right:calc(100%/6); height:2px;background:linear-gradient(90deg,var(--brand),#7C3AED);border-radius:var(--r-full);z-index:0} .step{text-align:center;position:relative;z-index:1;padding:0 12px} .step-num{width:62px;height:62px;border-radius:50%;background:linear-gradient(135deg,var(--brand),#7C3AED); color:#fff;font-size:20px;font-weight:900;display:flex;align-items:center;justify-content:center; margin:0 auto 18px;box-shadow:0 0 0 7px var(--brand-light),var(--sh-md)} .step h3{font-size:16px;font-weight:700;margin-bottom:8px} .step p{font-size:14px;color:var(--n500);line-height:1.6} .flow{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:0} .flow-node{text-align:center;padding:18px 20px;background:var(--white);border:1.5px solid var(--n200); border-radius:var(--r-lg);min-width:140px;box-shadow:var(--sh-sm); transition:border-color var(--mid),transform var(--mid)} .flow-node:hover{border-color:var(--brand-dim);transform:translateY(-2px)} .flow-node-icon{font-size:26px;margin-bottom:8px} .flow-node-name{font-size:13px;font-weight:700;color:var(--n800);margin-bottom:2px} .flow-node-sub{font-size:12px;color:var(--n400)} .flow-node.hl{border-color:var(--brand);box-shadow:0 0 0 4px var(--brand-light)} .flow-arrow{padding:0 12px;font-size:18px;color:var(--brand-mid);font-weight:600;flex-shrink:0} .uc-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px} .uc-card{border-radius:var(--r-2xl);padding:32px;border:1.5px solid transparent} .uc-dev{background:linear-gradient(140deg,#EEF2FF 0%,#E8EDFF 100%);border-color:var(--brand-dim)} .uc-owner{background:linear-gradient(140deg,#ECFDF5 0%,#D1FAE5 100%);border-color:#A7F3D0} .uc-tag{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:700; text-transform:uppercase;letter-spacing:.07em;padding:4px 11px;border-radius:var(--r-full);margin-bottom:15px} .uc-dev .uc-tag{background:var(--brand-light);color:var(--brand)} .uc-owner .uc-tag{background:var(--ok-bg);color:var(--ok)} .uc-card h3{font-size:22px;font-weight:800;letter-spacing:-.025em;margin-bottom:10px} .uc-card p{font-size:14.5px;color:var(--n600);line-height:1.65;margin-bottom:18px} .uc-list{display:flex;flex-direction:column;gap:10px;margin-bottom:22px} .uc-list li{display:flex;align-items:flex-start;gap:10px;font-size:14px;color:var(--n700)} .uc-check{width:17px;height:17px;border-radius:50%;display:flex;align-items:center; justify-content:center;font-size:9px;color:#fff;flex-shrink:0;margin-top:2px} .uc-dev .uc-check{background:var(--brand)} .uc-owner .uc-check{background:var(--ok)} .price-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(248px,1fr));gap:18px;max-width:880px;margin:0 auto} .price-card{background:var(--white);border:1.5px solid var(--n200);border-radius:var(--r-xl);padding:28px;display:flex;flex-direction:column} .price-card.featured{border-color:var(--brand);box-shadow:0 0 0 1px var(--brand),var(--sh-lg);position:relative} .pop-badge{position:absolute;top:-12px;left:50%;transform:translateX(-50%); background:var(--brand);color:#fff;font-size:11.5px;font-weight:700;padding:3px 12px; border-radius:var(--r-full);white-space:nowrap} .price-name{font-size:17px;font-weight:700;margin-bottom:4px} .price-tagline{font-size:13px;color:var(--n400);margin-bottom:20px;min-height:18px} .price-amount{font-size:40px;font-weight:900;letter-spacing:-.04em;line-height:1} .price-amount sup{font-size:20px;vertical-align:top;margin-top:8px;font-weight:700} .price-period{font-size:13px;color:var(--n400);margin-bottom:20px} .price-features{flex:1;display:flex;flex-direction:column;gap:10px;margin-bottom:22px} .price-feature{display:flex;align-items:flex-start;gap:8px;font-size:13.5px;color:var(--n700)} .price-feature::before{content:'✓';color:var(--ok);font-weight:800;flex-shrink:0} .apk-section{background:linear-gradient(135deg,#1E1B4B 0%,#312E81 55%,#1C3A5F 100%); border-radius:var(--r-2xl);padding:56px 48px;text-align:center;color:#fff;position:relative;overflow:hidden} .apk-section h2{font-size:30px;font-weight:900;letter-spacing:-.03em;margin-bottom:12px} .apk-section p{color:rgba(255,255,255,.65);font-size:16px;max-width:460px;margin:0 auto 30px;line-height:1.6} .apk-specs{display:flex;justify-content:center;gap:24px;flex-wrap:wrap;margin-top:22px} .apk-spec{font-size:13px;color:rgba(255,255,255,.45);display:flex;align-items:center;gap:6px} .cta-band{background:var(--brand);border-radius:var(--r-2xl);padding:64px 48px;text-align:center;color:#fff} .cta-band h2{font-size:36px;font-weight:900;letter-spacing:-.03em;margin-bottom:12px} .cta-band p{color:rgba(255,255,255,.65);font-size:17px;margin-bottom:32px} .cta-actions{display:flex;align-items:center;gap:12px;justify-content:center;flex-wrap:wrap} .pub-footer{background:var(--n950);padding:64px 0 32px} .footer-grid{display:grid;grid-template-columns:2.5fr 1fr 1fr 1fr;gap:48px;margin-bottom:48px} .footer-brand-desc{font-size:13.5px;color:rgba(255,255,255,.4);line-height:1.7;margin-top:12px;max-width:275px} .footer-contact{font-size:13px;color:rgba(255,255,255,.35);margin-top:14px} .footer-contact a{color:rgba(255,255,255,.5);transition:color var(--fast)} .footer-contact a:hover{color:rgba(255,255,255,.8)} .footer-col h5{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:rgba(255,255,255,.3);margin-bottom:14px} .footer-col a{display:block;font-size:13.5px;color:rgba(255,255,255,.45);padding:4px 0;transition:color var(--fast)} .footer-col a:hover{color:rgba(255,255,255,.85)} .footer-bottom{border-top:1px solid rgba(255,255,255,.07);padding-top:22px; display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap; gap:10px;font-size:13px;color:rgba(255,255,255,.25)} /* ═════════════════════════════════════════════════════════════ APP SHELL — Dashboard ═════════════════════════════════════════════════════════════ */ .app{display:flex;min-height:100vh;background:var(--n50)} /* ── Sidebar ─────────────────────────────────────────────────── */ .sidebar{width:236px;flex-shrink:0;background:var(--white);border-right:1px solid var(--n200); display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow-y:auto; transition:transform var(--mid) var(--ease)} .sidebar-head{display:flex;align-items:center;gap:9px;padding:18px 16px 14px; border-bottom:1px solid var(--n150);margin-bottom:8px} .sidebar-logo-text{font-size:16px;font-weight:800;color:var(--brand);letter-spacing:-.03em} .sidebar-nav{padding:4px 8px;flex:1} .nav-section-label{display:block;font-size:10.5px;font-weight:700;text-transform:uppercase; letter-spacing:.09em;color:var(--n400);padding:10px 10px 4px} .nav-item{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:var(--r); font-size:13.5px;font-weight:500;color:var(--n600);text-decoration:none!important; transition:background var(--fast),color var(--fast);margin-bottom:1px} .nav-item:hover{background:var(--n100);color:var(--n900)} .nav-item.here{background:var(--brand-light);color:var(--brand);font-weight:600} .nav-icon{width:16px;height:16px;flex-shrink:0;opacity:.75} .nav-item.here .nav-icon{opacity:1} .sidebar-sep{height:1px;background:var(--n150);margin:8px 10px} .sidebar-foot{padding:12px 12px 14px;border-top:1px solid var(--n150);margin-top:auto} .user-chip{display:flex;align-items:center;gap:9px;padding:7px 8px;border-radius:var(--r);margin-bottom:8px} .user-info{min-width:0} .user-email{font-size:12.5px;font-weight:600;color:var(--n800);white-space:nowrap;overflow:hidden; text-overflow:ellipsis;display:block} .user-plan{font-size:11.5px;color:var(--n400)} .signout-link{display:block;text-align:center;font-size:12px;color:var(--n400);padding:5px; border-radius:var(--r-sm);transition:color var(--fast),background var(--fast)} .signout-link:hover{color:var(--bad);background:var(--bad-bg)} /* ── Mobile: hamburger overlay nav ──────────────────────────── */ .nav-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:199; opacity:0;transition:opacity var(--mid) var(--ease);pointer-events:none} .nav-overlay.open{display:block;opacity:1;pointer-events:all} #nav-toggle{display:none;background:none;border:none;color:var(--n700);cursor:pointer;padding:8px} #nav-toggle svg{width:22px;height:22px;display:block} .sidebar-close{display:none;position:absolute;top:14px;right:14px;background:none; border:none;color:var(--n500);cursor:pointer;padding:4px} .sidebar-close svg{width:20px;height:20px} /* ── Main ────────────────────────────────────────────────────── */ .app-main{flex:1;min-width:0;display:flex;flex-direction:column} .app-topbar{height:56px;display:flex;align-items:center;justify-content:space-between; padding:0 26px;background:var(--white);border-bottom:1px solid var(--n200); position:sticky;top:0;z-index:30;gap:16px} .topbar-left{display:flex;align-items:center;gap:10px} .topbar-left h1{font-size:16px;font-weight:700;color:var(--n900);letter-spacing:-.01em} .topbar-right{display:flex;align-items:center;gap:9px} .app-body{padding:26px 28px 60px;flex:1} .page-top{display:flex;align-items:flex-start;justify-content:space-between; margin-bottom:20px;gap:16px;flex-wrap:wrap} .page-top h1{font-size:19px;font-weight:700;letter-spacing:-.02em} .page-top p{font-size:13.5px;color:var(--n400);margin-top:3px} .page-top-actions{display:flex;align-items:center;gap:8px} .qa-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:13px;margin-bottom:22px} .qa-card{display:flex;align-items:center;gap:13px;padding:16px 18px;background:var(--white); border:1.5px solid var(--n200);border-radius:var(--r-lg);text-decoration:none!important;color:inherit; transition:border-color var(--mid),box-shadow var(--mid),transform var(--mid)} .qa-card:hover{border-color:var(--brand-dim);box-shadow:var(--sh-md);transform:translateY(-1.5px)} .qa-icon{width:38px;height:38px;border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;font-size:19px;flex-shrink:0} .qa-card h4{font-size:13.5px;font-weight:700;color:var(--n800);margin-bottom:2px} .qa-card p{font-size:12.5px;color:var(--n400)} /* Staff badge */ .staff-badge{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:700; text-transform:uppercase;letter-spacing:.06em;background:rgba(180,83,9,.1);color:var(--warn); border:1px solid rgba(180,83,9,.2);padding:2px 8px;border-radius:var(--r-full)} /* API key display */ .apikey-box{display:flex;align-items:center;gap:10px;background:var(--n50); border:1.5px solid var(--n200);border-radius:var(--r-md);padding:11px 14px} .apikey-val{font-family:var(--mono);font-size:13px;color:var(--n700);flex:1; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* QR pairing */ .pair-wrap{max-width:460px;margin:0 auto;text-align:center} .qr-frame{display:inline-block;padding:16px;background:var(--white);border:1.5px solid var(--n200); border-radius:var(--r-xl);box-shadow:var(--sh-md);margin:22px 0} .pair-code{font-family:var(--mono);font-size:24px;font-weight:800;letter-spacing:.15em; color:var(--brand);background:var(--brand-light);border:2px dashed var(--brand-dim); border-radius:var(--r-lg);padding:16px 24px;display:inline-block} .pair-status{display:flex;align-items:center;justify-content:center;gap:9px; font-size:14px;color:var(--n500);margin-top:18px} .spinner{width:16px;height:16px;border:2px solid var(--n200);border-top-color:var(--brand); border-radius:50%;animation:spin .7s linear infinite;flex-shrink:0} /* ── Responsive breakpoints ──────────────────────────────────── */ @media (max-width:1100px){ .footer-grid{grid-template-columns:1fr 1fr} } @media (max-width:900px){ .uc-grid{grid-template-columns:1fr} .steps{grid-template-columns:1fr}.steps::before{display:none} .section{padding:60px 0}.section-sm{padding:40px 0} .pub-nav{display:none} } /* ── Mobile sidebar — hamburger drawer ───────────────────────── */ @media (max-width:768px){ /* Show hamburger in topbar */ #nav-toggle{display:flex} /* Sidebar becomes a fixed off-canvas drawer */ .sidebar{ position:fixed; left:0;top:0;height:100%; z-index:200; transform:translateX(-100%); box-shadow:var(--sh-xl); } .sidebar.nav-open{transform:translateX(0)} .sidebar-close{display:block} /* Main content takes full width */ .app-main{width:100%} .app-body{padding:16px 14px 48px} .app-topbar{padding:0 14px} /* Footer grid collapses */ .footer-grid{grid-template-columns:1fr} .wrap,.wrap-sm{padding:0 16px} .apk-section,.cta-band{padding:36px 22px} .hero h1{font-size:36px} .hero{padding:64px 0 48px} .price-grid,.uc-grid,.feature-grid,.qa-grid{grid-template-columns:1fr} #toast-stack{bottom:14px;right:14px} .toast{min-width:260px} /* Auth card on mobile */ .auth-card{padding:24px;border-radius:var(--r-lg)} .account-type-grid{grid-template-columns:1fr} /* Docs layout */ .docs-toc{display:none} } /* ── Docs ────────────────────────────────────────────────────── */ .docs-shell{display:grid;grid-template-columns:216px 1fr;gap:48px;align-items:start; max-width:1040px;margin:0 auto;padding:0 24px} .docs-toc{position:sticky;top:76px} .docs-toc h4{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--n400);margin-bottom:10px} .docs-toc a{display:block;padding:6px 11px;font-size:13.5px;color:var(--n500);border-radius:var(--r); border-left:2px solid transparent;transition:color var(--fast),background var(--fast),border-color var(--fast);text-decoration:none} .docs-toc a:hover{color:var(--n900);background:var(--n100)} .docs-toc a.here{color:var(--brand);border-left-color:var(--brand);background:var(--brand-light)} .docs-content h1{font-size:28px;font-weight:900;letter-spacing:-.03em;margin-bottom:8px} .docs-lead{font-size:16px;color:var(--n500);margin-bottom:40px;line-height:1.65} .docs-section{margin-bottom:48px} .docs-h2{font-size:21px;font-weight:800;letter-spacing:-.02em;margin-bottom:12px; padding-top:32px;color:var(--n900);border-top:1px solid var(--n200)} .docs-h2:first-child{border-top:none;padding-top:0} .docs-p{font-size:14.5px;color:var(--n600);line-height:1.75;margin-bottom:14px} .docs-ul{padding-left:20px;list-style:disc;color:var(--n600);font-size:14.5px;line-height:1.9;margin-bottom:14px} .endpoint-bar{display:inline-flex;align-items:center;gap:11px;background:var(--n950);color:#E6EDF3; border-radius:var(--r-md);padding:9px 16px;font-family:var(--mono);font-size:13px;margin-bottom:16px} .m-post{font-size:11px;font-weight:800;padding:2px 8px;border-radius:4px;background:#FF7B72;color:#690000} .m-get{font-size:11px;font-weight:800;padding:2px 8px;border-radius:4px;background:#3FB950;color:#002E0E} .field-table{width:100%;border-collapse:collapse;font-size:13.5px;margin:14px 0 20px; border:1.5px solid var(--n200);border-radius:var(--r-md);overflow:hidden} .field-table thead th{text-align:left;padding:9px 14px;background:var(--n50);font-size:11px; font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--n400);border-bottom:1.5px solid var(--n200)} .field-table tbody td{padding:11px 14px;border-bottom:1px solid var(--n100);vertical-align:top} .field-table tbody tr:last-child td{border-bottom:none} .field-table td:first-child{font-family:var(--mono);font-size:12.5px;color:var(--brand);font-weight:600} .field-table td:nth-child(2){font-family:var(--mono);font-size:12px;color:var(--n400)} .f-req{font-size:12px;font-weight:700;font-family:var(--sans);color:var(--bad)} .f-opt{font-size:12px;font-family:var(--sans);color:var(--n400)} /* Lang switcher */ .lang-sw{display:flex;gap:2px;background:var(--n100);border-radius:var(--r-sm);padding:2px} .lang-sw button{padding:4px 9px;border-radius:5px;font-size:12px;font-weight:700;color:var(--n500); background:transparent;border:none;cursor:pointer;font-family:var(--sans); transition:background var(--fast),color var(--fast)} .lang-sw button.active{background:var(--white);color:var(--brand);box-shadow:var(--sh-xs)} /* ═══════════════════════════════════════════════════════════════ FINAL POLISH — additions that close remaining gaps ═══════════════════════════════════════════════════════════════ */ /* Quick-action shortcut grid for dashboard home ─────────────── */ .onboard-card { border: 1.5px solid var(--n-200); border-radius: var(--r-lg); padding: 20px; background: var(--white); display: flex; gap: 16px; align-items: flex-start; } .onboard-step { width: 28px; height: 28px; border-radius: 50%; background: var(--brand-light); color: var(--brand); font-size: 12px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 2px; } .onboard-step.done { background: var(--ok-bg); color: var(--ok); } .onboard-title { font-size: 14px; font-weight: 700; color: var(--n-900); margin-bottom: 3px; } .onboard-desc { font-size: 13px; color: var(--n-500); line-height: 1.55; } /* Usage progress bar ────────────────────────────────────────── */ .usage-bar-track { height: 8px; background: var(--n-150); border-radius: var(--r-full); overflow: hidden; margin: 10px 0 6px; } .usage-bar-fill { height: 100%; border-radius: var(--r-full); background: var(--brand); transition: width .5s var(--ease); } .usage-bar-fill.mid { background: var(--warn); } .usage-bar-fill.high { background: var(--bad); } .usage-label { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--n-500); } /* Device card grid (alternative to table on mobile) ─────────── */ .device-cards { display: flex; flex-direction: column; gap: 0; } .device-row { display: flex; align-items: center; gap: 14px; padding: 14px 20px; border-bottom: 1px solid var(--n-100); transition: background var(--fast); } .device-row:last-child { border-bottom: none; } .device-row:hover { background: var(--bg3); } .device-icon { width: 38px; height: 38px; background: var(--n-100); border-radius: var(--r-md); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 18px; } .device-icon.online { background: var(--ok-bg); } .device-icon.offline { background: var(--n-100); opacity: .7; } .device-meta { flex: 1; min-width: 0; } .device-name { font-size: 14px; font-weight: 600; color: var(--n-900); } .device-alias { font-size: 12px; color: var(--n-400); margin-top: 1px; } .device-number { font-family: var(--mono); font-size: 13px; color: var(--n-600); } .device-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } /* Plan comparison table ─────────────────────────────────────── */ .plan-compare { display: grid; gap: 0; border: 1.5px solid var(--n-200); border-radius: var(--r-lg); overflow: hidden; } .plan-compare-row { display: grid; padding: 12px 18px; font-size: 14px; border-bottom: 1px solid var(--n-100); align-items: center; gap: 16px; } .plan-compare-row:last-child { border-bottom: none; } .plan-compare-row:hover { background: var(--bg2); } .plan-compare-label { color: var(--n-700); font-weight: 500; } .plan-compare-val { font-weight: 600; text-align: right; } /* Inline badge list ─────────────────────────────────────────── */ .badge-row { display: flex; flex-wrap: wrap; gap: 6px; } /* Topbar search ─────────────────────────────────────────────── */ .topbar-search { display: flex; align-items: center; background: var(--n-50); border: 1.5px solid var(--n-200); border-radius: var(--r); height: 34px; padding: 0 12px; gap: 8px; font-size: 13.5px; color: var(--n-500); transition: border-color var(--fast), box-shadow var(--fast); flex: 1; max-width: 260px; } .topbar-search:focus-within { border-color: var(--brand); box-shadow: var(--sh-focus); background: var(--white); } .topbar-search input { border: none; background: transparent; font-size: 13.5px; color: var(--n-800); font-family: var(--sans); width: 100%; outline: none; } .topbar-search input::placeholder { color: var(--n-400); } /* Info callout box ──────────────────────────────────────────── */ .callout { border-radius: var(--r-md); padding: 14px 16px; border: 1.5px solid transparent; display: flex; gap: 11px; font-size: 14px; line-height: 1.55; } .callout-icon { font-size: 16px; flex-shrink: 0; margin-top: 1px; } .callout.info { background: var(--info-bg); border-color: #BAE6FD; color: var(--info); } .callout.success { background: var(--ok-bg); border-color: var(--ok-rim); color: var(--ok); } .callout.warn { background: var(--warn-bg); border-color: var(--warn-rim); color: var(--warn); } .callout.danger { background: var(--bad-bg); border-color: var(--bad-rim); color: var(--bad); } /* Fix: marketing_base uses .container which is undefined in our CSS */ .container { max-width: 1120px; margin: 0 auto; padding: 0 24px; } /* Fix: pricing page uses .pricing-kind-btns / .pricing-period-btns */ .pricing-kind-btns, .pricing-period-btns { display: flex; background: var(--n-100); border-radius: var(--r-full); padding: 3px; gap: 2px; } .pricing-kind-btns button, .pricing-period-btns button { padding: 7px 18px; border-radius: var(--r-full); font-size: 14px; font-weight: 500; color: var(--n-600); background: transparent; border: none; cursor: pointer; font-family: var(--sans); transition: background var(--fast), color var(--fast), box-shadow var(--fast); } .pricing-kind-btns button.active, .pricing-period-btns button.active { background: var(--white); color: var(--n-900); box-shadow: var(--sh-sm); } /* Responsive additions ──────────────────────────────────────── */ @media (max-width: 768px) { /* Stat grid collapses to 2 columns on mobile */ .stat-grid { grid-template-columns: 1fr 1fr !important; } /* Billing grid collapses */ .billing-grid { grid-template-columns: 1fr !important; } /* Tables scroll horizontally on mobile */ .table-wrap { -webkit-overflow-scrolling: touch; } /* Plan compare grid adjusts */ .plan-compare-row { grid-template-columns: 1fr 1fr !important; } /* Device row wraps on mobile */ .device-row { flex-wrap: wrap; } .device-actions { width: 100%; justify-content: flex-end; } /* Topbar search hidden on very small screens */ .topbar-search { display: none; } } /* === CONTACT FORM SECTION LAYOUT === */ .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; } @media (max-width: 768px) { .contact-grid { grid-template-columns: 1fr; gap: 32px; } } /* === NOTIFICATION TOGGLE === */ .toggle-row { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; border-bottom: 1px solid var(--n-100); } .toggle-row:last-child { border-bottom: none; } .toggle-row .toggle-info { flex: 1; } .toggle-row .toggle-label { font-size: 14px; font-weight: 500; color: var(--n-800); margin-bottom: 2px; } .toggle-row .toggle-desc { font-size: 13px; color: var(--n-400); } /* === SEND SMS CHAR COUNTER === */ .char-counter { font-size: 12px; color: var(--n-400); text-align: right; margin-top: 4px; } .char-counter.warn { color: var(--warn); } .char-counter.crit { color: var(--bad); } /* ═══════════════════════════════════════════════════════════════ COMPATIBILITY ALIASES — bridge legacy --c-* variable names to the current design tokens. Templates that used the old naming continue to work without changes. ═══════════════════════════════════════════════════════════════ */ :root { --c-brand: var(--brand); --c-brand-h: var(--brand-h); --c-brand-light: var(--brand-light); --c-brand-mid: var(--brand-mid); --c-brand-dim: var(--brand-dim); --c-success: var(--ok); --c-success-bg: var(--ok-bg); --c-success-ring: var(--ok-rim); --c-warn: var(--warn); --c-warn-bg: var(--warn-bg); --c-warn-ring: var(--warn-rim); --c-danger: var(--bad); --c-danger-bg: var(--bad-bg); --c-danger-ring: var(--bad-rim); /* Legacy gray scale aliases */ --gray-50: var(--n-50); --gray-100: var(--n-100); --gray-200: var(--n-200); --gray-300: var(--n-300); --gray-400: var(--n-400); --gray-500: var(--n-500); --gray-600: var(--n-600); --gray-700: var(--n-700); --gray-800: var(--n-800); --gray-900: var(--n-900); /* Legacy radius alias */ --radius-md: var(--r-md); --radius-lg: var(--r-lg); /* Muted text */ --muted: var(--n-400); --border: var(--n-200); /* n- shorthand aliases (some templates use --n-XXX directly, some drop the dash) */ --n-50: #FAFAFA; --n-100: #F4F4F5; --n-150: #EBEBED; --n-200: #E4E4E7; --n-300: #D4D4D8; --n-400: #A1A1AA; --n-500: #71717A; --n-600: #52525B; --n-700: #3F3F46; --n-800: #27272A; --n-900: #18181B; } /* settings-row-action — missing component for right-side action in settings rows */ .settings-row-action { flex-shrink: 0; } /* Pricing page components */ .price-amt { font-size: 42px; font-weight: 900; letter-spacing: -.04em; line-height: 1; color: var(--n-900); margin-bottom: 2px; } .price-amt sup { font-size: 20px; vertical-align: top; margin-top: 8px; font-weight: 700; } .price-per { font-size: 13.5px; color: var(--n-400); margin-bottom: 20px; min-height: 18px; } .price-pop-badge { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: var(--brand); color: #fff; font-size: 11.5px; font-weight: 700; padding: 3px 13px; border-radius: var(--r-full); white-space: nowrap; } .save-badge { display: inline-block; background: var(--ok-bg); color: var(--ok); font-size: 10.5px; font-weight: 700; padding: 2px 7px; border-radius: var(--r-full); margin-left: 5px; vertical-align: middle; } /* Legacy page/form classes from old templates */ .page-title { font-size: 22px; font-weight: 800; letter-spacing: -.025em; color: var(--n-900); margin-bottom: 20px; } .form-group { margin-bottom: 16px; display: flex; flex-direction: column; gap: 5px; } .form-group label { font-size: 13.5px; font-weight: 500; color: var(--n-700); } .form-group input, .form-group textarea, .form-group select { width: 100%; height: 38px; padding: 0 13px; background: var(--white); border: 1.5px solid var(--n-200); border-radius: var(--r); color: var(--n-900); font-size: 14px; font-family: var(--sans); transition: border-color 100ms, box-shadow 100ms; appearance: none; } .form-group input:focus, .form-group textarea:focus { outline: none; border-color: var(--brand); box-shadow: var(--sh-focus); } .btn-outline { display: inline-flex; align-items: center; justify-content: center; height: 38px; padding: 0 16px; font-size: 14px; font-weight: 500; font-family: var(--sans); border: 1.5px solid var(--n-300); border-radius: var(--r); background: transparent; color: var(--n-700); cursor: pointer; transition: background 100ms, border-color 100ms; text-decoration: none; } .btn-outline:hover { background: var(--n-50); }