/* ============================================================================ Design system — self-hosted Inter, token-driven light/dark themes. Theme resolution: OS preference by default; (set from the sidebar toggle, persisted in localStorage) always wins. ========================================================================== */ @font-face { font-family: 'Inter'; src: url('/fonts/InterVariable.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; } :root { --page: #f4f5f9; --page-tint: radial-gradient(1200px 500px at 85% -10%, rgba(79, 70, 229, 0.055), transparent 60%), radial-gradient(900px 420px at -10% 0%, rgba(14, 165, 164, 0.045), transparent 55%); --surface: #ffffff; --surface-2: #f8f9fc; --ink: #0f1320; --ink-2: #464d63; --muted: #858ca1; --grid: #eef0f5; --baseline: #d9dce6; --border: rgba(15, 19, 32, 0.08); --border-strong: rgba(15, 19, 32, 0.14); --series-1: #3573dd; --good: #16a34a; --good-text: #15803d; --warning: #f5b220; --serious: #ec835a; --critical: #dc3d43; --accent: #4f46e5; --accent-hover: #4338ca; --accent-ink: #ffffff; --side-bg: #ffffff; --side-bg-2: #f6f7fb; --side-ink: #171c30; --side-ink-2: #6f7690; --side-border: rgba(15, 19, 32, 0.08); --side-hover: rgba(15, 19, 32, 0.045); --shadow-sm: 0 1px 2px rgba(15, 19, 32, 0.05), 0 1px 3px rgba(15, 19, 32, 0.04); --shadow-md: 0 4px 10px rgba(15, 19, 32, 0.06), 0 12px 32px rgba(15, 19, 32, 0.10); --shadow-lg: 0 8px 20px rgba(15, 19, 32, 0.10), 0 28px 70px rgba(15, 19, 32, 0.18); --ring: color-mix(in srgb, var(--accent) 20%, transparent); --radius: 14px; --radius-sm: 10px; --field: #ffffff; } /* dark tokens, applied twice: OS preference (unless forced light) + forced dark */ @media (prefers-color-scheme: dark) { :root:not([data-theme='light']) { --page: #0b0d15; --page-tint: radial-gradient(1200px 500px at 85% -10%, rgba(109, 125, 255, 0.07), transparent 60%), radial-gradient(900px 420px at -10% 0%, rgba(45, 212, 191, 0.04), transparent 55%); --surface: #141825; --surface-2: #191e2e; --ink: #eef0f8; --ink-2: #b4bacc; --muted: #7d8499; --grid: #20263a; --baseline: #2e3549; --border: rgba(255, 255, 255, 0.09); --border-strong: rgba(255, 255, 255, 0.16); --series-1: #5b93ec; --good-text: #4ade80; --accent: #6d7dff; --accent-hover: #8695ff; --side-bg: #090b13; --side-bg-2: #141929; --side-ink: #eef0f8; --side-ink-2: #8f96ad; --side-border: rgba(255, 255, 255, 0.07); --side-hover: rgba(255, 255, 255, 0.055); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.45); --shadow-md: 0 10px 32px rgba(0, 0, 0, 0.5); --shadow-lg: 0 30px 80px rgba(0, 0, 0, 0.65); --field: #10131f; } } :root[data-theme='dark'] { --page: #0b0d15; --page-tint: radial-gradient(1200px 500px at 85% -10%, rgba(109, 125, 255, 0.07), transparent 60%), radial-gradient(900px 420px at -10% 0%, rgba(45, 212, 191, 0.04), transparent 55%); --surface: #141825; --surface-2: #191e2e; --ink: #eef0f8; --ink-2: #b4bacc; --muted: #7d8499; --grid: #20263a; --baseline: #2e3549; --border: rgba(255, 255, 255, 0.09); --border-strong: rgba(255, 255, 255, 0.16); --series-1: #5b93ec; --good-text: #4ade80; --accent: #6d7dff; --accent-hover: #8695ff; --side-bg: #090b13; --side-bg-2: #141929; --side-ink: #eef0f8; --side-ink-2: #8f96ad; --side-border: rgba(255, 255, 255, 0.07); --side-hover: rgba(255, 255, 255, 0.055); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.45); --shadow-md: 0 10px 32px rgba(0, 0, 0, 0.5); --shadow-lg: 0 30px 80px rgba(0, 0, 0, 0.65); --field: #10131f; } * { box-sizing: border-box; } html, body { margin: 0; height: 100%; } body { font: 14px/1.55 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; font-feature-settings: 'cv11' 1, 'ss01' 1; background: var(--page-tint), var(--page); background-attachment: fixed; color: var(--ink); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } ::selection { background: color-mix(in srgb, var(--accent) 24%, transparent); } /* slim, unobtrusive scrollbars */ * { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--ink) 18%, transparent) transparent; } *::-webkit-scrollbar { width: 9px; height: 9px; } *::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--ink) 16%, transparent); border-radius: 99px; border: 2px solid transparent; background-clip: content-box; } *::-webkit-scrollbar-track { background: transparent; } :where(a, button, input, select, textarea, summary):focus-visible { outline: 2px solid color-mix(in srgb, var(--accent) 65%, transparent); outline-offset: 2px; } .layout { display: flex; min-height: 100vh; } /* mobile chrome (hidden on desktop) */ .mobile-topbar { display: none; } .nav-backdrop { display: none; } /* ---- sidebar ---- */ .sidebar { width: 240px; flex-shrink: 0; background: var(--side-bg); color: var(--side-ink); padding: 22px 14px 16px; display: flex; flex-direction: column; gap: 2px; position: sticky; top: 0; height: 100vh; overflow-y: auto; border-right: 1px solid var(--side-border); } .brand { display: flex; align-items: center; gap: 11px; padding: 0 8px 20px; } .brand-mark { width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0; background: linear-gradient(135deg, var(--accent), #9333ea); color: #fff; display: grid; place-items: center; font-weight: 750; font-size: 16px; box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 45%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.25); overflow: hidden; } .brand-mark img { width: 100%; height: 100%; object-fit: cover; display: block; } .brand-name { font-weight: 700; font-size: 15px; letter-spacing: -0.015em; color: var(--side-ink); } .brand-sub { font-size: 10.5px; color: var(--side-ink-2); margin-top: 1px; letter-spacing: 0.01em; } .brand-logo-compact { color: var(--side-ink); } .mt-brand { color: var(--side-ink); } .nav-group { margin: 15px 10px 5px; font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: color-mix(in srgb, var(--side-ink-2) 78%, transparent); user-select: none; } .nav-link { display: flex; align-items: center; gap: 11px; padding: 8px 11px; border-radius: 10px; color: var(--side-ink-2); text-decoration: none; font-weight: 530; font-size: 13.5px; letter-spacing: 0.002em; transition: background 0.13s ease, color 0.13s ease; } .nav-link:hover { background: var(--side-hover); color: var(--side-ink); } .nav-link.active { background: color-mix(in srgb, var(--accent) 11%, var(--side-bg)); color: var(--accent); font-weight: 650; } .nav-link.active svg { opacity: 1; } .nav-link svg { width: 17px; height: 17px; flex-shrink: 0; opacity: 0.8; transition: opacity 0.13s ease; } .nav-badge { margin-left: auto; font-size: 10.5px; font-weight: 700; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); border-radius: 99px; padding: 1px 8px; font-variant-numeric: tabular-nums; } .nav-badge.alert { background: color-mix(in srgb, var(--critical) 16%, transparent); color: var(--critical); } .nav-badge:empty { display: none; } .sidebar-foot { margin-top: auto; padding: 12px 8px 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; border-top: 1px solid var(--side-border); } .sidebar-foot button { background: transparent; color: var(--side-ink-2); border-color: var(--side-border); box-shadow: none; } .sidebar-foot button:hover { background: var(--side-hover); color: var(--side-ink); } .mode-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.07em; padding: 4px 10px; border-radius: 99px; text-transform: uppercase; } .mode-badge.off { background: var(--side-hover); color: var(--side-ink-2); border: 1px solid var(--side-border); } .mode-badge.live { background: rgba(22, 163, 74, 0.12); color: var(--good-text); border: 1px solid rgba(22, 163, 74, 0.35); } .mode-badge .dot { width: 7px; height: 7px; border-radius: 50%; } .mode-badge.off .dot { background: var(--side-ink-2); } .mode-badge.live .dot { background: #34d058; box-shadow: 0 0 7px rgba(52, 208, 88, 0.9); animation: pulse-dot 2.4s ease infinite; } @keyframes pulse-dot { 50% { box-shadow: 0 0 2px rgba(52, 208, 88, 0.4); } } /* ---- main ---- */ .main { flex: 1; min-width: 0; padding: 30px 36px 72px; } .page-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; } .page-head h1 { margin: 0; font-size: 23px; letter-spacing: -0.025em; font-weight: 700; } .page-head .sub { color: var(--muted); font-size: 13px; margin-top: 3px; } .head-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } /* ---- cards, tables ---- */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px 22px; box-shadow: var(--shadow-sm); } .card h2 { margin: 0 0 14px; font-size: 11.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.09em; } .grid { display: grid; gap: 16px; } .grid.cols-2 { grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); } .table-wrap { overflow-x: auto; margin: 0 -6px; } table { border-collapse: collapse; width: 100%; font-size: 13.5px; } th { text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.09em; color: var(--muted); font-weight: 680; padding: 8px 11px; border-bottom: 1px solid var(--baseline); white-space: nowrap; } thead th { cursor: pointer; user-select: none; } thead th:empty { cursor: default; } th.sort-asc, th.sort-desc { color: var(--ink); } th.sort-asc::after { content: '\25B4'; margin-left: 5px; opacity: 0.75; } th.sort-desc::after { content: '\25BE'; margin-left: 5px; opacity: 0.75; } td { padding: 11px; border-bottom: 1px solid var(--grid); vertical-align: top; } tr:last-child td { border-bottom: none; } tbody tr { transition: background 0.1s ease; } tbody tr.clickable { cursor: pointer; } tbody tr:hover td { background: color-mix(in srgb, var(--accent) 3.5%, transparent); } td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; } th.sortable { cursor: pointer; user-select: none; } th.sortable:hover { color: var(--ink); } /* an order the customer wants cancelled: the whole row turns red */ tbody tr.row-cancel td { background: color-mix(in srgb, var(--critical) 8%, transparent); } tbody tr.row-cancel:hover td { background: color-mix(in srgb, var(--critical) 13%, transparent); } .mono { font-variant-numeric: tabular-nums; } .cell-title { font-weight: 570; } .qty-hi { color: var(--critical); font-size: 14.5px; } .cell-sub { color: var(--muted); font-size: 12px; margin-top: 1px; } .prod-line { display: block; } /* ---- stat tiles ---- */ .tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(176px, 1fr)); gap: 14px; margin-bottom: 18px; } .tile { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow-sm); transition: transform 0.14s ease, box-shadow 0.14s ease, border-color 0.14s ease; } .tile:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); border-color: var(--border-strong); } .tile .label { font-size: 10.5px; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em; } .tile .value { font-size: 28px; font-weight: 730; margin-top: 5px; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; } .tile .hint { font-size: 12px; color: var(--ink-2); margin-top: 3px; } .tile.alert .value { color: var(--critical); } /* ---- pills & status ---- */ .pill { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 650; padding: 2.5px 9px; border-radius: 99px; border: 1px solid var(--border); color: var(--ink-2); white-space: nowrap; background: color-mix(in srgb, var(--ink) 3%, transparent); } .pill.open { border-color: color-mix(in srgb, var(--series-1) 35%, transparent); color: var(--series-1); background: color-mix(in srgb, var(--series-1) 9%, transparent); } .pill.good { border-color: color-mix(in srgb, var(--good) 35%, transparent); color: var(--good-text); background: color-mix(in srgb, var(--good) 9%, transparent); } .pill.bad { border-color: color-mix(in srgb, var(--critical) 40%, transparent); color: var(--critical); background: color-mix(in srgb, var(--critical) 9%, transparent); } .pill.warn { border-color: color-mix(in srgb, var(--warning) 55%, transparent); color: var(--ink-2); background: color-mix(in srgb, var(--warning) 13%, transparent); } /* ---- batches ---- */ .batch-options { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } @media (max-width: 700px) { .batch-options { grid-template-columns: 1fr; } } .batch-option { display: block; text-align: left; padding: 15px 17px; border-radius: var(--radius); cursor: pointer; } .batch-option:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); } .batch-option:disabled { opacity: 0.5; cursor: not-allowed; } .batch-option .bo-head { font-weight: 700; display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 5px; } .batch-option p { color: var(--muted); font-size: 12px; font-weight: 400; line-height: 1.45; margin: 0; white-space: normal; } .container-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 26px; padding: 0 7px; border-radius: 8px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); } tbody tr.row-done td { opacity: 0.55; } /* barcode scan: the containers that need the scanned product */ tbody tr.scan-hit td { background: color-mix(in srgb, var(--accent) 12%, transparent); } /* ---- buttons & forms ---- */ button, .btn { font: inherit; font-weight: 600; font-size: 13px; border-radius: var(--radius-sm); border: 1px solid var(--border-strong); background: var(--surface); color: var(--ink); padding: 7px 14px; cursor: pointer; box-shadow: var(--shadow-sm); transition: background 0.13s ease, border-color 0.13s ease, transform 0.06s ease, box-shadow 0.13s ease; } button:hover, .btn:hover { background: color-mix(in srgb, var(--ink) 4%, var(--surface)); border-color: color-mix(in srgb, var(--ink) 22%, var(--border-strong)); } button:active { transform: translateY(1px); } button.primary { background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 88%, #ffffff), var(--accent)); border-color: color-mix(in srgb, var(--accent) 80%, #000); color: var(--accent-ink); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 2px 8px color-mix(in srgb, var(--accent) 38%, transparent); } button.primary:hover { background: linear-gradient(180deg, color-mix(in srgb, var(--accent-hover) 88%, #ffffff), var(--accent-hover)); border-color: var(--accent-hover); } button.danger { color: var(--critical); border-color: color-mix(in srgb, var(--critical) 40%, transparent); } button.danger:hover { background: color-mix(in srgb, var(--critical) 7%, var(--surface)); } button.small { padding: 4px 11px; font-size: 12px; border-radius: 8px; } button:disabled { opacity: 0.45; cursor: not-allowed; transform: none; } label.field { display: block; margin-bottom: 13px; } label.field span { display: block; font-size: 12px; font-weight: 600; color: var(--ink-2); margin-bottom: 5px; } input, select, textarea { font: inherit; width: 100%; padding: 8px 11px; border-radius: var(--radius-sm); border: 1px solid var(--baseline); background: var(--field); color: var(--ink); transition: border-color 0.12s ease, box-shadow 0.12s ease; } input:hover, select:hover, textarea:hover { border-color: color-mix(in srgb, var(--ink) 24%, var(--baseline)); } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3.5px var(--ring); } input.inline { width: 86px; padding: 5px 9px; font-size: 13px; } .form-row { display: flex; gap: 12px; } .form-row > * { flex: 1; } .checkbox-row { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; } .checkbox-row input { width: auto; accent-color: var(--accent); } input[type='checkbox'], input[type='radio'] { accent-color: var(--accent); } .filters { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; } .filters select, .filters input { width: auto; } .pager { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; } .tabs { display: flex; gap: 8px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; } .tab { background: transparent; box-shadow: none; border: 1px solid var(--border); border-radius: 99px; padding: 6px 16px; color: var(--ink-2); font-weight: 600; } .tab:hover { background: color-mix(in srgb, var(--ink) 4%, transparent); } .tab.active { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 35%, transparent); } .pager-label { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; } /* ---- modal ---- */ .modal-backdrop { position: fixed; inset: 0; background: rgba(6, 8, 16, 0.6); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); display: grid; place-items: center; z-index: 50; padding: 20px; animation: backdrop-in 0.16s ease; } @keyframes backdrop-in { from { opacity: 0; } } .modal { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; width: 100%; max-width: 640px; max-height: 88vh; overflow-y: auto; padding: 24px 26px; box-shadow: var(--shadow-lg), inset 0 1px 0 color-mix(in srgb, #ffffff 6%, transparent); animation: modal-in 0.18s cubic-bezier(0.2, 0.9, 0.3, 1.2); } @keyframes modal-in { from { opacity: 0; transform: translateY(10px) scale(0.985); } } .modal.wide { max-width: 880px; } .modal-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 16px; } .modal-head h2 { margin: 0; font-size: 17px; font-weight: 700; letter-spacing: -0.015em; } .modal-close { border: none; background: none; font-size: 21px; color: var(--muted); padding: 0 4px; box-shadow: none; line-height: 1; } .modal-close:hover { color: var(--ink); background: none; border: none; } .modal-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; } /* ---- toasts ---- */ .toasts { position: fixed; bottom: 18px; right: 18px; display: flex; flex-direction: column; gap: 8px; z-index: 100; } .toast { background: #12162a; color: #eef0f8; border: 1px solid rgba(255, 255, 255, 0.1); border-left: 4px solid var(--good); border-radius: 12px; padding: 12px 16px; min-width: 240px; max-width: 380px; box-shadow: var(--shadow-lg); font-size: 13px; animation: toast-in 0.22s cubic-bezier(0.2, 0.9, 0.3, 1.15); } .toast.error { border-left-color: var(--critical); } @keyframes toast-in { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: none; } } /* ---- progress ---- */ .progress { height: 9px; border-radius: 99px; overflow: hidden; background: color-mix(in srgb, var(--ink) 7%, transparent); border: 1px solid var(--border); } .progress-fill { height: 100%; width: 0%; background: linear-gradient(90deg, var(--series-1), var(--accent)); border-radius: 99px; transition: width 0.4s ease; } .progress-label { font-size: 12.5px; color: var(--ink-2); margin: 6px 0 0; font-variant-numeric: tabular-nums; } .batch-results { margin: 0; padding: 0; list-style: none; } .batch-results li { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; padding: 8px 2px; border-bottom: 1px solid var(--grid); font-size: 13px; } .batch-results li:last-child { border-bottom: none; } .batch-results .ok { color: var(--good-text); font-weight: 700; } .batch-results .fail { color: var(--critical); font-weight: 700; } .feed { margin: 0; padding: 0; list-style: none; } .feed li { padding: 9px 2px; border-bottom: 1px solid var(--grid); font-size: 13px; } .feed li:last-child { border-bottom: none; } .feed .when { color: var(--muted); font-size: 11.5px; } .notice { border: 1px solid color-mix(in srgb, var(--warning) 45%, transparent); background: color-mix(in srgb, var(--warning) 9%, transparent); border-radius: 12px; padding: 11px 15px; font-size: 13px; margin-bottom: 16px; } a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; } /* ---- login / setup ---- */ .auth-wrap { min-height: 78vh; display: grid; place-items: center; position: relative; } .auth-wrap::before, .auth-wrap::after { content: ''; position: absolute; border-radius: 50%; filter: blur(70px); pointer-events: none; z-index: 0; opacity: 0.55; } .auth-wrap::before { width: 420px; height: 420px; top: 4%; right: 12%; background: radial-gradient(circle, color-mix(in srgb, var(--accent) 26%, transparent), transparent 70%); } .auth-wrap::after { width: 380px; height: 380px; bottom: 2%; left: 10%; background: radial-gradient(circle, rgba(14, 165, 164, 0.16), transparent 70%); } .auth-card { width: 100%; max-width: 410px; padding: 32px 30px; position: relative; z-index: 1; border-radius: 20px; box-shadow: var(--shadow-lg); background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .auth-card .brand-mark { width: 52px; height: 52px; font-size: 21px; margin: 0 auto 14px; border-radius: 14px; } .auth-card h1 { text-align: center; font-size: 21px; margin: 0 0 4px; letter-spacing: -0.025em; } .auth-card .sub { text-align: center; color: var(--muted); font-size: 13px; margin-bottom: 22px; } .logo-preview { width: 44px; height: 44px; border-radius: 10px; border: 1px solid var(--border); object-fit: cover; vertical-align: middle; margin-right: 8px; background: var(--page); } /* ---- debug log ---- */ .debug-log { font-size: 12.5px; } .debug-log summary { cursor: pointer; padding: 4px 0; } .debug-log pre { background: color-mix(in srgb, var(--ink) 5%, transparent); border-radius: 9px; padding: 9px 11px; overflow-x: auto; font-size: 11.5px; white-space: pre-wrap; word-break: break-all; } /* ---- chart ---- */ .chart-wrap { position: relative; } .chart-tooltip { position: absolute; pointer-events: none; z-index: 5; background: var(--surface); border: 1px solid var(--border); border-radius: 9px; padding: 6px 10px; font-size: 12px; box-shadow: var(--shadow-md); white-space: nowrap; display: none; } .chart-tooltip .t-label { color: var(--muted); } .chart-tooltip .t-value { font-weight: 700; font-variant-numeric: tabular-nums; } /* ---- misc ---- */ .empty { color: var(--muted); text-align: center; padding: 30px 10px; font-size: 13.5px; } .kv { display: grid; grid-template-columns: 150px 1fr; gap: 5px 14px; font-size: 13.5px; margin: 0; } .kv dt { color: var(--muted); } .kv dd { margin: 0; } .section-gap { margin-top: 16px; } .perf-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(155px, 1fr)); gap: 10px; } .perf { border: 1px solid var(--border); border-radius: 12px; padding: 11px 13px; background: var(--surface-2); } .perf .name { font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; color: var(--muted); text-transform: uppercase; } .perf .score { font-size: 20px; font-weight: 730; margin-top: 3px; letter-spacing: -0.015em; } .perf .norm { font-size: 12px; color: var(--muted); } /* ---- mobile: topbar + slide-in navigation drawer ---- */ @media (max-width: 820px) { body { padding-top: calc(54px + env(safe-area-inset-top, 0px)); } .mobile-topbar { /* equal fixed side columns: the logo centers on the SCREEN, not in the leftover space between two differently-sized buttons */ display: grid; grid-template-columns: 46px 1fr 46px; align-items: center; gap: 10px; position: fixed; top: 0; left: 0; right: 0; z-index: 65; height: calc(54px + env(safe-area-inset-top, 0px)); padding: env(safe-area-inset-top, 0px) 10px 0; background: var(--side-bg); color: var(--side-ink); border-bottom: 1px solid var(--side-border); } .mobile-topbar button { background: transparent; border: none; box-shadow: none; color: var(--side-ink); font-size: 21px; padding: 8px 10px; line-height: 1; } .mt-brand { font-weight: 700; font-size: 15.5px; letter-spacing: -0.01em; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* the sidebar becomes a drawer */ .sidebar { position: fixed; top: 0; left: 0; bottom: 0; z-index: 80; width: min(300px, 86vw); height: 100dvh; padding-top: calc(18px + env(safe-area-inset-top, 0px)); transform: translateX(-105%); transition: transform 0.22s ease; box-shadow: var(--shadow-lg); border-right: none; } body.nav-open .sidebar { transform: none; } .nav-backdrop { display: block; position: fixed; inset: 0; z-index: 75; background: rgba(6, 8, 16, 0.55); opacity: 0; pointer-events: none; transition: opacity 0.22s ease; } body.nav-open .nav-backdrop { opacity: 1; pointer-events: auto; } body.nav-open { overflow: hidden; } .nav-link { padding: 11px 12px; font-size: 15px; } /* content density & touch targets */ .main { padding: 16px 12px calc(56px + env(safe-area-inset-bottom, 0px)); } .page-head h1 { font-size: 19px; } .page-head { margin-bottom: 14px; } .card { padding: 14px; border-radius: 12px; } .tiles { grid-template-columns: repeat(auto-fit, minmax(136px, 1fr)); gap: 10px; } .tile { padding: 12px 14px; } .tile .value { font-size: 22px; } button, .btn { min-height: 40px; } button.small, .btn.small, .copy-btn, .modal-close, .tab { min-height: 0; } /* 16px stops iOS Safari from zooming into focused fields */ input, select, textarea { font-size: 16px; min-height: 42px; } input.inline { min-height: 36px; } /* …but checkboxes/radios must stay small boxes, not 42px-tall lines */ input[type='checkbox'], input[type='radio'] { min-height: 0; width: 18px; height: 18px; vertical-align: middle; } .filters select, .filters input { flex: 1 1 40%; min-width: 0; } .filters input[type="search"], .filters input[type="text"] { flex: 1 1 100%; } /* tables become compact horizontal sliders: one line per cell, the row keeps its natural width and the table scrolls sideways */ .table-wrap { margin: 0 -14px; padding: 0 14px; -webkit-overflow-scrolling: touch; } .table-wrap td, .table-wrap th { white-space: nowrap; } .table-wrap .prod-line, .table-wrap .cell-title { max-width: 56vw; overflow: hidden; text-overflow: ellipsis; } .table-wrap .cell-sub { max-width: 56vw; overflow: hidden; text-overflow: ellipsis; } .table-wrap .note-text { max-width: 40vw; } td { padding: 9px 8px; vertical-align: middle; } th { padding: 8px; } /* modals become bottom sheets */ .modal-backdrop { padding: 0; place-items: end center; } .modal, .modal.wide { max-width: 100%; width: 100%; max-height: calc(100dvh - 40px); border-radius: 18px 18px 0 0; padding: 18px 16px calc(18px + env(safe-area-inset-bottom, 0px)); animation: sheet-in 0.22s cubic-bezier(0.2, 0.9, 0.3, 1.05); } .form-row { flex-direction: column; gap: 0; } .modal-foot { position: sticky; bottom: 0; background: var(--surface); padding-top: 10px; } /* landing & misc */ .landing-hero h1 { font-size: 26px; } .weekend-banner, .today-strip { font-size: 13px; } .kv { grid-template-columns: 110px 1fr; } } @keyframes sheet-in { from { transform: translateY(24px); opacity: 0.6; } } /* ---- global search, tags & notes, bulk bar, onboarding ---- */ .global-search { display: flex; align-items: center; gap: 8px; width: 100%; margin: 0 0 10px; padding: 8px 12px; font-size: 13px; color: var(--side-ink-2); background: rgba(255, 255, 255, 0.05); border: 1px solid var(--side-border); border-radius: 10px; cursor: pointer; text-align: left; box-shadow: none; } .global-search:hover { color: var(--side-ink); border-color: color-mix(in srgb, var(--accent) 55%, var(--side-border)); background: rgba(255, 255, 255, 0.07); } .global-search .kbd { margin-left: auto; font-size: 10.5px; padding: 2px 6px; border: 1px solid var(--side-border); border-radius: 5px; color: var(--side-ink-2); background: rgba(255, 255, 255, 0.05); white-space: nowrap; } .pal-input { width: 100%; font-size: 16px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 11px; background: var(--field); color: var(--ink); margin-bottom: 10px; } .pal-results { max-height: 55vh; overflow-y: auto; } .pal-group { font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); padding: 10px 6px 4px; } .pal-item { padding: 8px 10px; border-radius: 9px; cursor: pointer; font-size: 13.5px; } .pal-item.active { background: color-mix(in srgb, var(--accent) 14%, transparent); } .tag { display: inline-block; font-size: 11px; font-weight: 600; padding: 1px 8px; margin-right: 4px; border-radius: 999px; border: 1px solid hsl(var(--tag-h, 210) 60% 55% / 0.55); background: hsl(var(--tag-h, 210) 70% 55% / 0.14); color: hsl(var(--tag-h, 210) 55% 38%); } .note-line { margin-top: 3px; display: flex; align-items: center; flex-wrap: wrap; gap: 3px; } .note-text { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .row-sel { width: 15px; height: 15px; margin-right: 7px; vertical-align: -2px; accent-color: var(--accent); cursor: pointer; } .bulk-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border)); background: color-mix(in srgb, var(--accent) 7%, var(--surface)); border-radius: 12px; padding: 8px 12px; margin-bottom: 12px; font-size: 13px; } .ob-steps { list-style: none; margin: 6px 0 0; padding: 0; font-size: 13.5px; } .ob-steps li { padding: 5px 0; display: flex; align-items: center; gap: 9px; } .ob-steps li.done { color: var(--muted); text-decoration: line-through; } .ob-mark { font-weight: 700; width: 18px; text-align: center; } .ob-steps li.done .ob-mark { color: var(--ok, #2e9e5b); text-decoration: none; } /* ---- QOL widgets ---- */ .toast-action { margin-left: 12px; padding: 3px 12px; font-size: 12px; font-weight: 700; border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 7px; background: transparent; color: #cfd6ff; cursor: pointer; box-shadow: none; } .toast-action:hover { background: rgba(255, 255, 255, 0.1); color: #fff; } .toast.error .toast-action { border-color: rgba(255, 255, 255, 0.5); color: inherit; } .copy-btn { border: none; background: none; padding: 0 2px; font-size: 12px; cursor: pointer; opacity: 0.35; vertical-align: baseline; line-height: 1; box-shadow: none; } .copy-btn:hover { opacity: 1; background: none; border: none; } tr:hover .copy-btn { opacity: 0.7; } .live-pill { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 12px; padding: 6px 14px; font-size: 13px; font-weight: 600; cursor: pointer; color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--surface)); border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border)); border-radius: 999px; } .today-strip { display: flex; flex-wrap: wrap; gap: 8px 26px; align-items: center; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); padding: 11px 17px; margin-bottom: 16px; font-size: 13.5px; box-shadow: var(--shadow-sm); } .today-strip strong { font-size: 15px; font-variant-numeric: tabular-nums; } .pm-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; } .pm-container { font-size: 24px; min-width: 46px; height: 46px; line-height: 46px; } .pm-order { font-size: 19px; font-weight: 700; } .pm-items { display: grid; gap: 8px; margin-bottom: 14px; } .pm-item { display: flex; gap: 12px; align-items: center; border: 1px solid var(--border); border-radius: 12px; padding: 10px 14px; } .pm-qty { font-size: 22px; font-weight: 800; min-width: 44px; text-align: center; } /* ---- admin panel, announcements, support banner ---- */ #admin-banner { position: sticky; top: 0; z-index: 60; display: flex; align-items: center; gap: 12px; justify-content: center; padding: 8px 16px; font-size: 13px; font-weight: 600; background: linear-gradient(90deg, #7c2d12, #92400e); color: #fff; border-bottom: 1px solid rgba(255, 255, 255, 0.25); } #admin-banner button { background: rgba(255, 255, 255, 0.15); color: #fff; border-color: rgba(255, 255, 255, 0.4); } .announcement { display: flex; justify-content: space-between; align-items: center; gap: 12px; border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--border)); background: color-mix(in srgb, var(--accent) 8%, var(--surface)); border-radius: 12px; padding: 10px 14px; margin-bottom: 10px; font-size: 13.5px; } .announcement.warn { border-color: color-mix(in srgb, var(--critical) 45%, var(--border)); background: color-mix(in srgb, var(--critical) 8%, var(--surface)); } /* ---- weekend head start banner ---- */ .weekend-banner { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border)); background: linear-gradient(100deg, color-mix(in srgb, var(--accent) 12%, var(--surface)), var(--surface)); border-radius: var(--radius); padding: 12px 16px; margin-bottom: 12px; font-size: 13.5px; } /* ---- help center & tickets ---- */ .md-body h2 { font-size: 17px; margin: 14px 0 6px; letter-spacing: -0.015em; } .md-body h3 { font-size: 15px; margin: 12px 0 5px; } .md-body h4 { font-size: 13.5px; margin: 10px 0 4px; } .md-body p { margin: 7px 0; line-height: 1.6; } .md-body .md-list { margin: 6px 0 6px 20px; } .md-body .md-list li { margin: 3px 0; } .md-body code { font-family: ui-monospace, monospace; font-size: 12.5px; padding: 1px 5px; border-radius: 5px; background: color-mix(in srgb, var(--ink) 7%, transparent); } .ticket-thread { display: grid; gap: 8px; margin-bottom: 12px; max-height: 46vh; overflow-y: auto; } .ticket-msg { border: 1px solid var(--border); border-radius: 12px; padding: 10px 14px; font-size: 13.5px; background: var(--surface-2); } .ticket-msg.admin { border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); background: color-mix(in srgb, var(--accent) 7%, var(--surface)); } /* ---- chemidalwms platform brand ---- */ @font-face { font-family: 'Baloo 2'; font-style: normal; font-weight: 800; font-display: swap; src: url('/fonts/Baloo2-ExtraBold.woff2') format('woff2'); } .wm { font-family: 'Baloo 2', 'Arial Rounded MT Bold', 'Nunito', sans-serif; font-weight: 800; } .tl { font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif; font-weight: 600; } .brand-logo-full svg { width: min(480px, 100%); height: auto; display: block; margin: 0 auto; } /* the landing logo follows the resolved theme: colored on light, white on dark */ .brand-logo-full .logo-light { display: block; } .brand-logo-full .logo-dark { display: none; } :root[data-theme='dark'] .brand-logo-full .logo-light { display: none; } :root[data-theme='dark'] .brand-logo-full .logo-dark { display: block; } @media (prefers-color-scheme: dark) { :root:not([data-theme='light']) .brand-logo-full .logo-light { display: none; } :root:not([data-theme='light']) .brand-logo-full .logo-dark { display: block; } } .brand.brand-stack { display: block; } .brand-stack .brand-logo-compact svg { width: 100%; max-width: 224px; height: auto; display: block; padding-top: 6px; } .brand-stack .brand-sub { margin-top: 2px; padding-left: 6px; } .mobile-topbar #mt-brand svg { width: min(250px, 64vw); height: auto; display: block; margin: 0 auto; } .sidebar-store { margin-top: auto; padding: 12px 8px 0; border-top: 1px solid var(--side-border); } .sidebar-store[hidden] { display: none; } .sidebar-store:not([hidden]) + .sidebar-foot { margin-top: 0; border-top: 0; padding-top: 8px; } .ss-name { display: flex; align-items: center; gap: 7px; font-weight: 700; font-size: 13.5px; color: var(--side-ink); letter-spacing: -0.01em; } .ss-logo { width: 22px; height: 22px; border-radius: 6px; object-fit: cover; flex-shrink: 0; } .ss-mail { font-size: 11.5px; color: var(--side-ink-2); margin-top: 2px; word-break: break-all; } .auth-card .brand-logo-full svg { width: min(300px, 100%); margin: -14px auto 0; } /* ---- public landing page ---- */ .landing { max-width: 1000px; margin: 0 auto; padding: 40px 10px 20px; } .landing-hero { text-align: center; padding: 30px 16px 34px; position: relative; } .landing-hero .brand-mark { width: 64px; height: 64px; font-size: 26px; border-radius: 17px; margin: 0 auto 18px; } .landing-hero h1 { font-size: 34px; letter-spacing: -0.035em; margin: 0 0 10px; } .landing-tagline { font-size: 16.5px; color: var(--ink-2); max-width: 560px; margin: 0 auto 22px; line-height: 1.6; } .landing-cta { display: flex; gap: 10px; justify-content: center; margin-bottom: 12px; flex-wrap: wrap; } .landing-cta button { font-size: 14.5px; padding: 10px 22px; border-radius: 12px; } .landing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 14px; margin-top: 10px; } .landing-feature h3 { margin: 8px 0 6px; font-size: 15px; letter-spacing: -0.01em; } .landing-feature p { margin: 0; color: var(--ink-2); font-size: 13px; line-height: 1.55; } .lf-icon { font-size: 22px; } .landing-foot { text-align: center; margin-top: 26px; } /* ---- customer questions (ticket thread) ---- */ .q-thread { display: flex; flex-direction: column; gap: 10px; max-height: 46vh; overflow-y: auto; padding: 4px 2px; } .q-msg { max-width: 86%; } .q-msg.in { align-self: flex-start; } .q-msg.out { align-self: flex-end; text-align: right; } .q-msg-meta { font-size: 11px; color: var(--muted); margin: 0 4px 3px; } .q-msg-text { display: inline-block; text-align: left; white-space: pre-wrap; word-break: break-word; font-size: 13.5px; line-height: 1.55; padding: 9px 12px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); } .q-msg.out .q-msg-text { background: var(--accent-soft, rgba(79, 70, 229, 0.10)); border-color: var(--accent-border, rgba(79, 70, 229, 0.25)); } /* ---- landing page v3: soft sky, centered hero (Wike-style) ---- */ /* this page commits to its own light palette and ignores the app theme — the same look for every visitor */ body.lp-mode .sidebar, body.lp-mode .mobile-topbar, body.lp-mode .nav-backdrop { display: none; } body.lp-mode .main { padding: 0; max-width: none; } body.lp-mode { color: #0f1320; background: radial-gradient(900px 480px at 12% -4%, rgba(140, 170, 255, 0.55), transparent 60%), radial-gradient(1100px 520px at 88% -8%, rgba(255, 176, 216, 0.5), transparent 62%), radial-gradient(720px 420px at 55% 10%, rgba(186, 156, 255, 0.32), transparent 60%), linear-gradient(180deg, #eaf0ff 0%, #f6f4ff 34%, #fdf2f8 58%, #ffffff 82%); background-attachment: fixed; } .lp { max-width: 1120px; margin: 0 auto; padding: clamp(14px, 2.4vw, 28px) clamp(16px, 3vw, 32px) 40px; } /* top bar */ .lp-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 18px; margin-bottom: clamp(34px, 6vw, 74px); background: rgba(255, 255, 255, 0.6); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.8); border-radius: 999px; box-shadow: 0 8px 30px rgba(30, 42, 120, 0.08); } .lp-logo svg { height: 24px; width: auto; display: block; } .lp-nav { display: flex; gap: clamp(14px, 2.4vw, 34px); } .lp-nav a { color: #30364a; text-decoration: none; font-weight: 600; font-size: 14px; } .lp-nav a:hover { color: #4f46e5; } .lp-top-login { flex-shrink: 0; } /* hero: centered */ .lp-hero { text-align: center; } .lp-hero h1 { font-size: clamp(34px, 5.4vw, 64px); line-height: 1.06; letter-spacing: -0.038em; margin: 0 0 18px; font-weight: 780; color: #495066; } .lp-grad { color: #0f1320; } .lp-sub { font-size: clamp(15px, 1.4vw, 17.5px); line-height: 1.65; color: #464d63; max-width: 620px; margin: 0 auto 26px; } .lp-cta { display: flex; gap: 12px; align-items: center; justify-content: center; flex-wrap: wrap; margin-bottom: 16px; } .lp-btn-grad { display: inline-flex; align-items: center; gap: 10px; background: #0f1320; color: #fff; border: none; border-radius: 999px; font-size: 15.5px; font-weight: 650; padding: 13px 15px 13px 26px; box-shadow: 0 14px 30px rgba(15, 19, 32, 0.28); cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease; } .lp-btn-grad:hover { transform: translateY(-1px); box-shadow: 0 18px 36px rgba(15, 19, 32, 0.32); } .lp-btn-arrow { width: 30px; height: 30px; border-radius: 50%; background: #ff5c39; display: grid; place-items: center; font-size: 15px; } .lp-btn-ghost { background: rgba(255, 255, 255, 0.75); color: #0f1320; border: 1.5px solid #d9dcea; border-radius: 999px; font-size: 15px; font-weight: 600; padding: 12px 24px; cursor: pointer; box-shadow: none; } .lp-btn-ghost:hover { border-color: #4f46e5; color: #4f46e5; background: #fff; } .lp-locked { font-size: 13px; color: #464d63; } .lp-ticks { list-style: none; display: flex; gap: 20px; flex-wrap: wrap; justify-content: center; margin: 0 0 34px; padding: 0; } .lp-ticks li { font-size: 13px; color: #464d63; } .lp-ticks li::before { content: '\2713'; margin-right: 7px; color: #16a34a; font-weight: 700; } /* hero product mock: browser window */ .lp-window { max-width: 860px; margin: 0 auto; background: #fff; border-radius: 18px; border: 1px solid #e7e9f4; box-shadow: 0 40px 90px rgba(30, 42, 120, 0.16), 0 6px 18px rgba(30, 42, 120, 0.08); overflow: hidden; text-align: left; } .lp-dots { display: flex; gap: 6px; padding: 12px 14px; border-bottom: 1px solid #eef0f7; } .lp-dots i { width: 10px; height: 10px; border-radius: 50%; background: #e5e7f0; } .lp-dots i:nth-child(1) { background: #f87171; } .lp-dots i:nth-child(2) { background: #fbbf24; } .lp-dots i:nth-child(3) { background: #34d399; } .lp-mock { display: grid; grid-template-columns: 150px minmax(0, 1fr); } .lp-mock-side { border-right: 1px solid #eef0f7; padding: 18px 14px; display: flex; flex-direction: column; gap: 13px; } .lp-mock-side i { display: block; height: 8px; border-radius: 99px; background: #eef0f7; } .lp-mock-side i:first-child { background: #4f46e5; } .lp-mock-main { padding: 16px 18px 20px; } .lp-mock-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; margin-bottom: 14px; } .lp-mock-kpi { border: 1px solid #eef0f7; border-radius: 12px; padding: 10px 12px; } .lp-mock-kpi span { display: block; font-size: 10.5px; font-weight: 650; color: #858ca1; } .lp-mock-kpi strong { display: block; font-size: 19px; letter-spacing: -0.02em; margin: 2px 0; } .lp-mock-kpi em { font-style: normal; font-size: 10.5px; color: #858ca1; } .lp-mock-kpi em.up { color: #15803d; } .lp-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 2px; border-top: 1px solid #f2f4f9; font-size: 13px; } .lp-chip { border-radius: 999px; padding: 3px 10px; font-size: 11.5px; font-weight: 650; white-space: nowrap; } .lp-chip.ok { background: #e4f6ec; color: #157347; } .lp-chip.warn { background: #fff3d6; color: #8a6100; } .lp-chip.open { background: #e8edff; color: #3730a3; } /* logo strip */ .lp-logos { display: flex; gap: clamp(18px, 4vw, 56px); justify-content: center; flex-wrap: wrap; padding: clamp(26px, 4vw, 44px) 0; } .lp-logos span { font-weight: 750; font-size: 16px; color: #b3b9cb; letter-spacing: -0.01em; } /* features */ .lp-features { text-align: center; padding: clamp(14px, 2.6vw, 30px) 0; } .lp-features h2, .lp-pricing h2, .lp-faq h2, .lp-close h2 { font-size: clamp(23px, 3vw, 32px); letter-spacing: -0.03em; margin: 0 0 10px; color: #0f1320; font-weight: 760; } .lp-section-sub { color: #464d63; font-size: 14.5px; margin: 0 auto 26px; max-width: 520px; } .lp-feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px; text-align: left; } .lp-feature { border: 1px solid #ecedf5; border-radius: 18px; padding: 20px; background: rgba(255, 255, 255, 0.85); box-shadow: 0 6px 22px rgba(30, 42, 120, 0.05); } .lp-feature h3 { margin: 10px 0 6px; font-size: 15px; letter-spacing: -0.01em; color: #0f1320; } .lp-feature p { margin: 0; color: #464d63; font-size: 13px; line-height: 1.58; } .lf-icon { font-size: 22px; } /* stats band */ .lp-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; padding: clamp(26px, 4vw, 44px) 0; text-align: center; } .lp-stat strong { display: block; font-size: clamp(30px, 3.6vw, 44px); font-weight: 780; letter-spacing: -0.03em; color: #0f1320; } .lp-stat span { font-size: 13px; color: #464d63; max-width: 240px; display: inline-block; } /* pricing */ .lp-pricing { text-align: center; padding: clamp(10px, 2vw, 22px) 0 clamp(22px, 3vw, 36px); } .lp-price { font-size: 42px; font-weight: 780; letter-spacing: -0.03em; color: #0f1320; } .lp-price span { font-size: 14px; font-weight: 500; color: #464d63; letter-spacing: 0; } .lp-pricing p { color: #464d63; font-size: 13.5px; margin: 6px 0 18px; } /* faq */ .lp-faq { max-width: 680px; margin: 0 auto; padding: clamp(14px, 2.6vw, 30px) 0; text-align: center; } .lp-qa { text-align: left; background: rgba(255, 255, 255, 0.85); border: 1px solid #ecedf5; border-radius: 14px; padding: 4px 18px; margin-bottom: 10px; } .lp-qa summary { cursor: pointer; font-weight: 650; font-size: 14.5px; padding: 12px 0; list-style: none; position: relative; } .lp-qa summary::-webkit-details-marker { display: none; } .lp-qa summary::after { content: '+'; position: absolute; right: 2px; color: #858ca1; font-weight: 500; font-size: 18px; } .lp-qa[open] summary::after { content: '\2013'; } .lp-qa p { margin: 0 0 14px; font-size: 13.5px; line-height: 1.62; color: #464d63; } /* closing cta */ .lp-close { text-align: center; padding: clamp(34px, 5vw, 60px) 24px; margin-top: 12px; background: radial-gradient(520px 240px at 22% 0%, rgba(140, 170, 255, 0.4), transparent 65%), radial-gradient(560px 260px at 82% 8%, rgba(255, 176, 216, 0.38), transparent 66%), rgba(255, 255, 255, 0.7); border: 1px solid rgba(255, 255, 255, 0.9); border-radius: 26px; box-shadow: 0 18px 50px rgba(30, 42, 120, 0.10); } .lp-close p { color: #464d63; font-size: 14.5px; margin: 0 0 20px; } /* footer */ .lp-foot { text-align: center; padding: clamp(26px, 4vw, 40px) 0 6px; font-size: 12.5px; color: #858ca1; } .lp-foot .lp-logo svg { margin: 0 auto 12px; } .lp-foot nav { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; margin-bottom: 10px; } .lp-foot a { color: #464d63; text-decoration: none; font-weight: 600; font-size: 13px; } .lp-foot a:hover { color: #4f46e5; } @media (max-width: 760px) { .lp-nav { display: none; } .lp-mock { grid-template-columns: 1fr; } .lp-mock-side { display: none; } } /* ---- KPI stat cards (dashboard) ---- */ .kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 14px; margin-bottom: 14px; } .kpi { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 15px 18px; box-shadow: var(--shadow-sm); } .kpi.alert { border-color: color-mix(in srgb, var(--critical) 40%, var(--border)); } .kpi-label { font-size: 12px; font-weight: 650; color: var(--muted); } .kpi-line { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 5px 0 4px; min-height: 34px; } .kpi-value { font-size: 27px; font-weight: 750; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } .kpi .spark { width: 108px; height: 26px; color: var(--accent); opacity: 0.9; flex-shrink: 0; } .kpi-foot { font-size: 12px; color: var(--muted); display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 26px; } .kpi-delta { font-size: 12px; font-weight: 650; color: var(--muted); } .kpi-delta.up { color: var(--good-text); } .kpi-delta.down { color: var(--critical); } /* ---- invoices: filter rail + floating bulk bar ---- */ .invoice-layout { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 16px; align-items: start; } .invoice-rail input[type='search'] { width: 100%; margin-bottom: 10px; } .rail-group { font-size: 11px; font-weight: 750; letter-spacing: 0.08em; color: var(--muted); margin: 10px 0 6px; } .rail-radio { display: flex; gap: 8px; align-items: center; padding: 5px 2px; font-size: 13.5px; cursor: pointer; } .rail-radio input { width: auto; margin: 0; } .rail-hint { margin-top: 14px; font-size: 12px; color: var(--muted); line-height: 1.5; } .bulkbar { /* below the modal backdrop (50): a modal must never sit under the bar */ position: fixed; left: 50%; transform: translateX(-50%); bottom: 22px; z-index: 40; display: flex; gap: 6px; align-items: center; background: var(--side-bg); color: var(--side-ink); padding: 8px 14px; border-radius: 999px; box-shadow: var(--shadow-lg); border: 1px solid var(--side-border); } .bulkbar span { font-size: 12.5px; color: var(--side-ink-2); margin-right: 6px; white-space: nowrap; } .bulkbar button { background: transparent; border: none; color: var(--side-ink); font-weight: 600; font-size: 13px; cursor: pointer; padding: 7px 11px; border-radius: 999px; box-shadow: none; } .bulkbar button:hover { background: rgba(255, 255, 255, 0.12); } .bulkbar button.danger { color: #ff9096; } @media (max-width: 900px) { .invoice-layout { grid-template-columns: 1fr; } } /* two-column field grid inside modals (the page variant needs 360px columns) */ .modal .grid.cols-2 { grid-template-columns: 1fr 1fr; gap: 10px 12px; } @media (max-width: 560px) { .modal .grid.cols-2 { grid-template-columns: 1fr; } } /* ---- connections: channel cards ---- */ .channel-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); gap: 14px; } .channel-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 4px; } .channel-card.is-soon { opacity: 0.72; } .channel-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 8px; } .channel-icon { width: 44px; height: 44px; border-radius: 12px; color: #fff; display: grid; place-items: center; font-size: 22px; font-weight: 800; box-shadow: var(--shadow-sm); } .channel-card h3 { margin: 0; font-size: 15px; letter-spacing: -0.01em; } .channel-card p { margin: 2px 0 8px; font-size: 12.5px; line-height: 1.55; color: var(--ink-2); flex: 1; } .channel-caps { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 10px; } .channel-actions { display: flex; gap: 6px; } .channel-add { width: 100%; border: 1px solid var(--border-strong); background: var(--surface); border-radius: 10px; padding: 9px 0; font-weight: 650; font-size: 13.5px; cursor: pointer; } .channel-add:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); } .channel-add:disabled { color: var(--muted); cursor: default; } /* iOS-style toggle for connections */ .switch { position: relative; display: inline-block; width: 40px; height: 24px; flex-shrink: 0; } .switch input { opacity: 0; width: 0; height: 0; } .switch i { position: absolute; inset: 0; border-radius: 999px; background: var(--baseline); transition: background 0.18s ease; cursor: pointer; } .switch i::before { content: ''; position: absolute; width: 18px; height: 18px; border-radius: 50%; background: #fff; top: 3px; left: 3px; transition: transform 0.18s ease; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); } .switch input:checked + i { background: var(--accent); } .switch input:checked + i::before { transform: translateX(16px); } .switch input:disabled + i { opacity: 0.55; cursor: default; } /* ---- content topbar: search + notifications + account ---- */ .app-topbar { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 24px; } .app-topbar[hidden] { display: none; } .topbar-search { display: inline-flex; align-items: center; gap: 10px; width: min(460px, 60%); background: var(--surface); border: 1px solid var(--border-strong); border-radius: 12px; padding: 9px 12px; color: var(--muted); font-size: 13.5px; font-weight: 500; cursor: pointer; box-shadow: var(--shadow-sm); text-align: left; } .topbar-search:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border-strong)); background: var(--surface); } .topbar-search .ts-text { flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .topbar-search .kbd, .global-search .kbd { font-size: 10.5px; font-weight: 650; color: var(--muted); border: 1px solid var(--border-strong); border-radius: 6px; padding: 1px 7px; } .topbar-right { display: flex; align-items: center; gap: 10px; } .topbar-icon { position: relative; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-size: 15px; background: var(--surface); border: 1px solid var(--border-strong); cursor: pointer; box-shadow: var(--shadow-sm); padding: 0; } .bell-dot { position: absolute; top: 7px; right: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--critical); border: 2px solid var(--surface); } .topbar-avatar { width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0; padding: 0; background: linear-gradient(135deg, var(--accent), #9333ea); border: none; color: #fff; font-weight: 750; font-size: 14.5px; display: grid; place-items: center; cursor: pointer; box-shadow: 0 3px 10px color-mix(in srgb, var(--accent) 40%, transparent); overflow: hidden; } .topbar-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; } .bell-pop { position: absolute; top: 46px; right: 0; z-index: 55; width: min(360px, 92vw); max-height: 420px; overflow-y: auto; background: var(--surface); border: 1px solid var(--border-strong); border-radius: 14px; box-shadow: var(--shadow-lg); padding: 10px 12px; } .bell-pop h3 { margin: 4px 2px 8px; font-size: 11px; font-weight: 750; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); } @media (max-width: 860px) { .app-topbar { display: none; } } /* ---- sidebar tree: collapsible parents + railed sub-links ---- */ .nav-row { display: flex; align-items: center; gap: 2px; } .nav-row .nav-link { flex: 1; min-width: 0; } .nav-caret { flex-shrink: 0; width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; background: none; border: none; box-shadow: none; padding: 0; color: inherit; cursor: pointer; opacity: 0.7; } .nav-caret:hover { background: var(--side-hover); opacity: 1; } .nav-caret svg { width: 13px; height: 13px; transition: transform 0.16s ease; } .nav-item.open .nav-caret svg { transform: rotate(180deg); } .nav-link .nav-badge { margin-left: auto; } .nav-caret { color: var(--side-ink-2); } .nav-sub { position: relative; margin: 2px 0 5px; padding-left: 29px; display: flex; flex-direction: column; gap: 1px; } .nav-sub[hidden] { display: none; } .nav-sub::before { content: ''; position: absolute; left: 19px; top: 5px; bottom: 5px; width: 2px; border-radius: 2px; background: var(--side-border); } .nav-sublink { display: flex; align-items: center; gap: 8px; padding: 6.5px 11px; border-radius: 9px; color: var(--side-ink-2); text-decoration: none; font-weight: 530; font-size: 13px; transition: background 0.13s ease, color 0.13s ease; } .nav-sublink:hover { background: var(--side-hover); color: var(--side-ink); } .nav-sublink.active { color: var(--accent); font-weight: 650; background: color-mix(in srgb, var(--accent) 9%, var(--side-bg)); } .nav-sublink .nav-badge { margin-left: auto; }