/* ========================================================================== DANGO Solutions — Platform design system (catalog, account, admin, install) Token-based, auto dark mode via prefers-color-scheme, with a manual override applied through [data-theme="dark"] / [data-theme="light"] on . ========================================================================== */ :root { --primary: #6366f1; --primary-dark: #4f46e5; --primary-light: #818cf8; --secondary: #0ea5e9; --accent: #f59e0b; --success: #10b981; --danger: #ef4444; --warning: #f59e0b; --bg-primary: #ffffff; --bg-secondary: #f8fafc; --bg-tertiary: #f1f5f9; --surface: #ffffff; --text-primary: #0f172a; --text-secondary: #475569; --text-muted: #94a3b8; --border: #e2e8f0; --border-light: #f1f5f9; --shadow-sm: 0 1px 2px rgba(15, 23, 42, .06); --shadow: 0 4px 12px rgba(15, 23, 42, .08); --shadow-lg: 0 12px 32px rgba(15, 23, 42, .12); --radius-sm: 8px; --radius: 12px; --radius-lg: 18px; --radius-full: 999px; --font-primary: 'Plus Jakarta Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif; --font-secondary: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif; --transition: .2s ease; --container: 1140px; } /* Dark tokens — applied either by system preference or manual override. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg-primary: #0f172a; --bg-secondary: #1e293b; --bg-tertiary: #334155; --surface: #1e293b; --text-primary: #f1f5f9; --text-secondary: #cbd5e1; --text-muted: #94a3b8; --border: #334155; --border-light: #1e293b; --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3); --shadow: 0 4px 12px rgba(0, 0, 0, .4); --shadow-lg: 0 12px 32px rgba(0, 0, 0, .5); } } :root[data-theme="dark"] { --bg-primary: #0f172a; --bg-secondary: #1e293b; --bg-tertiary: #334155; --surface: #1e293b; --text-primary: #f1f5f9; --text-secondary: #cbd5e1; --text-muted: #94a3b8; --border: #334155; --border-light: #1e293b; --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3); --shadow: 0 4px 12px rgba(0, 0, 0, .4); --shadow-lg: 0 12px 32px rgba(0, 0, 0, .5); } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--font-secondary); background: var(--bg-secondary); color: var(--text-primary); line-height: 1.6; -webkit-font-smoothing: antialiased; transition: background var(--transition), color var(--transition); } h1, h2, h3, h4, h5 { font-family: var(--font-primary); line-height: 1.2; margin: 0 0 .5em; } a { color: var(--primary); text-decoration: none; } a:hover { color: var(--primary-dark); } .container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 20px; } /* ---- Buttons ---- */ .btn { display: inline-flex; align-items: center; gap: .5rem; padding: .7rem 1.3rem; border-radius: var(--radius-sm); font-family: var(--font-primary); font-weight: 600; font-size: .95rem; border: 1px solid transparent; cursor: pointer; transition: transform var(--transition), box-shadow var(--transition), background var(--transition); } .btn:hover { transform: translateY(-1px); } .btn-primary { background: var(--primary); color: #fff; } .btn-primary:hover { background: var(--primary-dark); color: #fff; box-shadow: var(--shadow); } .btn-outline { background: transparent; border-color: var(--border); color: var(--text-primary); } .btn-outline:hover { border-color: var(--primary); color: var(--primary); } .btn-danger { background: var(--danger); color: #fff; } .btn-block { width: 100%; justify-content: center; } .btn-sm { padding: .45rem .85rem; font-size: .85rem; } /* ---- Cards / surfaces ---- */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 1.5rem; } /* ---- Forms ---- */ .field { margin-bottom: 1.1rem; } .field label { display: block; font-weight: 600; margin-bottom: .35rem; font-size: .9rem; } .input, .select, .textarea { width: 100%; padding: .65rem .8rem; font: inherit; background: var(--bg-primary); color: var(--text-primary); border: 1px solid var(--border); border-radius: var(--radius-sm); transition: border-color var(--transition), box-shadow var(--transition); } .input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(99, 102, 241, .15); } .help { color: var(--text-muted); font-size: .82rem; margin-top: .3rem; } /* ---- Alerts / flash ---- */ .alert { padding: .85rem 1rem; border-radius: var(--radius-sm); margin-bottom: 1rem; font-size: .92rem; border: 1px solid; } .alert-success { background: rgba(16, 185, 129, .12); border-color: var(--success); color: var(--success); } .alert-danger { background: rgba(239, 68, 68, .12); border-color: var(--danger); color: var(--danger); } .alert-info { background: rgba(99, 102, 241, .12); border-color: var(--primary); color: var(--primary); } /* ---- Badges ---- */ .badge { display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .6rem; border-radius: var(--radius-full); font-size: .75rem; font-weight: 600; background: var(--bg-tertiary); color: var(--text-secondary); } .badge-success { background: rgba(16,185,129,.15); color: var(--success); } .badge-danger { background: rgba(239,68,68,.15); color: var(--danger); } .badge-warning { background: rgba(245,158,11,.15); color: var(--accent); } /* ---- Tables ---- */ .table { width: 100%; border-collapse: collapse; font-size: .9rem; } .table th, .table td { padding: .7rem .8rem; text-align: left; border-bottom: 1px solid var(--border); } .table th { font-family: var(--font-primary); color: var(--text-secondary); font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; } .table tbody tr:hover { background: var(--bg-secondary); } /* Stacked user identity cell (admin Users table) */ .user-cell { display: flex; flex-direction: column; gap: .1rem; min-width: 0; } .user-cell .user-name { font-weight: 600; color: var(--text-primary); } .user-cell .user-email { font-size: .82rem; } .user-cell .user-company { font-size: .78rem; } .user-cell .user-company i { opacity: .7; margin-right: .15rem; } /* Inline "Send test email" result (admin Settings → Email) */ .test-email-result { margin-top: .85rem; padding: .8rem 1rem; border-radius: var(--radius-md, 10px); border: 1px solid var(--border-color, #e5e7eb); background: var(--surface-2, #f8fafc); font-size: .9rem; line-height: 1.5; } .test-email-result.pending { color: var(--text-secondary, #6b7280); } .test-email-result.ok { border-color: color-mix(in srgb, var(--success, #10b981) 45%, transparent); background: color-mix(in srgb, var(--success, #10b981) 8%, transparent); } .test-email-result.err { border-color: color-mix(in srgb, var(--danger, #ef4444) 45%, transparent); background: color-mix(in srgb, var(--danger, #ef4444) 8%, transparent); } .test-email-result .ter-head { display: flex; align-items: center; gap: .45rem; margin-bottom: .25rem; } .test-email-result.ok .ter-head i { color: var(--success, #10b981); } .test-email-result.err .ter-head i { color: var(--danger, #ef4444); } .test-email-result p { margin: .15rem 0 .5rem; } .test-email-result .ter-meta { font-size: .82rem; } .test-email-result .ter-meta code, .test-email-result .ter-log { background: var(--surface-3, rgba(0,0,0,.05)); padding: .05rem .3rem; border-radius: 4px; } .test-email-result .ter-log-label { font-size: .78rem; margin: .55rem 0 .2rem; } .test-email-result .ter-log { display: block; padding: .5rem .6rem; font-size: .78rem; white-space: pre-wrap; word-break: break-word; overflow-x: auto; } /* ---- Theme toggle ---- */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: var(--radius-full); border: 1px solid var(--border); background: var(--surface); color: var(--text-secondary); cursor: pointer; transition: var(--transition); } .theme-toggle:hover { color: var(--primary); border-color: var(--primary); } .theme-toggle .icon-sun { display: none; } :root[data-theme="dark"] .theme-toggle .icon-sun, .theme-toggle.is-dark .icon-sun { display: inline; } :root[data-theme="dark"] .theme-toggle .icon-moon, .theme-toggle.is-dark .icon-moon { display: none; } /* ---- Auth / install centered card layout ---- */ .auth-wrap { min-height: 100vh; display: grid; place-items: center; padding: 2rem 1rem; } .auth-card { width: 100%; max-width: 460px; } .auth-card .brand { text-align: center; margin-bottom: 1.5rem; } .auth-card .brand img { height: 44px; } .auth-brand { display: block; text-align: center; margin-bottom: 1.25rem; } .auth-foot { margin-top: 1.25rem; text-align: center; } /* Exact brand lockup (partials/brand-logo): navy on light, white tint on dark. Force-white callers emit a bare ; auto callers swap navy/white. Display is controlled HERE, not inline — only one tint may ever render. */ .brand-logo--auto .brand-logo__navy { display: block; } .brand-logo--auto .brand-logo__white { display: none; } :root[data-theme="dark"] .brand-logo--auto .brand-logo__navy { display: none; } :root[data-theme="dark"] .brand-logo--auto .brand-logo__white { display: block; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .brand-logo--auto .brand-logo__navy { display: none; } :root:not([data-theme="light"]) .brand-logo--auto .brand-logo__white { display: block; } } /* ---- Utility ---- */ .muted { color: var(--text-muted); } .text-center { text-align: center; } .text-right { text-align: right; } .mt-1 { margin-top: .5rem; } .mt-2 { margin-top: 1rem; } .mt-3 { margin-top: 1.5rem; } .mb-2 { margin-bottom: 1rem; } .mb-3 { margin-bottom: 1.5rem; } .stack > * + * { margin-top: 1rem; } .row { display: flex; gap: 1rem; flex-wrap: wrap; } .flex-between { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .grid { display: grid; gap: 1.25rem; } @media (min-width: 768px) { .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } } /* Extra button + alert variants */ .btn-ghost { background: transparent; border-color: transparent; color: var(--text-secondary); } .btn-ghost:hover { color: var(--primary); background: var(--bg-tertiary); } .btn-success { background: var(--success); color: #fff; } .alert-error { background: rgba(239, 68, 68, .12); border-color: var(--danger); color: var(--danger); } .alert-upgrade { background: rgba(245,158,11,.12); border-color: var(--accent); color: var(--text-primary); display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .alert-upgrade strong { color: var(--accent); } /* Page header */ .page-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; } .page-head h1 { font-size: 1.6rem; margin: 0; } .page-head .sub { color: var(--text-muted); font-size: .9rem; } /* Code/key chips */ .keycode { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; background: var(--bg-tertiary); padding: .2rem .5rem; border-radius: var(--radius-sm); font-size: .85rem; } /* ========================================================================== Admin shell ========================================================================== */ .admin-body { background: var(--bg-secondary); } .admin-shell { display: flex; min-height: 100vh; } .admin-sidebar { width: 240px; flex-shrink: 0; background: var(--surface); border-right: 1px solid var(--border); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; } .admin-brand { display: flex; align-items: center; gap: .6rem; padding: 1.1rem 1.25rem; font-family: var(--font-primary); font-weight: 800; border-bottom: 1px solid var(--border); } .admin-nav { display: flex; flex-direction: column; padding: .75rem; gap: .15rem; flex: 1; overflow-y: auto; } .admin-nav-link { display: flex; align-items: center; gap: .75rem; padding: .65rem .8rem; border-radius: var(--radius-sm); color: var(--text-secondary); font-weight: 500; font-size: .92rem; transition: var(--transition); } .admin-nav-link i { width: 18px; text-align: center; } .admin-nav-link:hover { background: var(--bg-tertiary); color: var(--text-primary); } .admin-nav-link.active { background: var(--primary); color: #fff; } .admin-sidebar-foot { padding: .75rem; border-top: 1px solid var(--border); } .admin-main { flex: 1; min-width: 0; display: flex; flex-direction: column; } .admin-topbar { display: flex; align-items: center; gap: .85rem; padding: .7rem 1.25rem; background: var(--surface); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 20; } .admin-topbar-spacer { flex: 1; } .admin-user { display: flex; align-items: center; gap: .5rem; font-weight: 600; font-size: .9rem; } .admin-logout { margin: 0; } .admin-burger { display: none; background: none; border: none; font-size: 1.2rem; color: var(--text-secondary); cursor: pointer; } .admin-content { padding: 1.75rem; max-width: 1200px; width: 100%; } @media (max-width: 900px) { .admin-sidebar { position: fixed; left: 0; top: 0; z-index: 50; transform: translateX(-100%); transition: transform var(--transition); } .admin-sidebar.open { transform: translateX(0); box-shadow: var(--shadow-lg); } .admin-burger { display: inline-flex; } .admin-content { padding: 1.1rem; } } /* Stat cards */ .stat-grid { display: grid; gap: 1rem; grid-template-columns: repeat(2, 1fr); margin-bottom: 1.75rem; } @media (min-width: 768px) { .stat-grid { grid-template-columns: repeat(4, 1fr); } } .stat-tile { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.1rem 1.25rem; } .stat-tile .label { color: var(--text-muted); font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; } .stat-tile .value { font-family: var(--font-primary); font-weight: 800; font-size: 1.7rem; margin-top: .25rem; } .stat-tile .value i { color: var(--primary); font-size: 1.1rem; } /* Tables in cards */ .table-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } .table-card .table-head { padding: 1rem 1.25rem; border-bottom: 1px solid var(--border); font-family: var(--font-primary); font-weight: 700; display: flex; justify-content: space-between; align-items: center; } .table-wrap { overflow-x: auto; } .table-card .table th, .table-card .table td { padding: .75rem 1.25rem; } /* Toolbar (search + filters) */ .toolbar { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; margin-bottom: 1.25rem; } .toolbar .input, .toolbar .select { width: auto; } .toolbar form { display: flex; gap: .6rem; flex-wrap: wrap; } /* Definition list */ .dl { display: grid; grid-template-columns: max-content 1fr; gap: .5rem 1.25rem; font-size: .92rem; } .dl dt { color: var(--text-muted); } .dl dd { margin: 0; } /* Inline action forms */ .inline-form { display: inline; margin: 0; } .actions { display: flex; gap: .4rem; flex-wrap: wrap; } /* ========================================================================== Public catalog / pricing / account ========================================================================== */ .site-shell { min-height: 100vh; display: flex; flex-direction: column; } .simple-header { background: var(--surface); border-bottom: 1px solid var(--border); } .simple-header .inner { display: flex; align-items: center; gap: 1rem; padding: .85rem 0; } .simple-header .brand { display: flex; align-items: center; gap: .6rem; font-family: var(--font-primary); font-weight: 800; color: var(--text-primary); } .simple-header nav { margin-left: auto; display: flex; align-items: center; gap: 1.25rem; } .simple-header nav a { color: var(--text-secondary); font-weight: 500; } .simple-header nav a:hover { color: var(--primary); } .page-section { padding: 2.5rem 0; flex: 1; } .simple-footer { background: var(--surface); border-top: 1px solid var(--border); padding: 1.5rem 0; color: var(--text-muted); font-size: .9rem; text-align: center; } /* Rich portal footer (mirrors marketing home footer, app.css tokens) */ .portal-footer { background: #17263f; color: rgba(255,255,255,.72); padding: 3rem 0 1.5rem; margin-top: 3rem; } .portal-footer-grid { display: grid; gap: 2rem; grid-template-columns: 1fr; } @media (min-width: 700px) { .portal-footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 2.5rem; } } .portal-footer-brand p { margin: 1rem 0 0; font-size: .9rem; line-height: 1.6; color: rgba(255,255,255,.6); max-width: 34ch; } .portal-footer-logo { display: inline-block; } .portal-footer-col h4 { color: #fff; font-family: var(--font-primary); font-size: .95rem; font-weight: 700; margin: 0 0 .9rem; } .portal-footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .55rem; } .portal-footer-col a { color: rgba(255,255,255,.72); font-size: .9rem; transition: color var(--transition); } .portal-footer-col a:hover { color: #fff; } .portal-footer-bottom { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: space-between; align-items: center; margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid rgba(255,255,255,.12); font-size: .85rem; color: rgba(255,255,255,.55); } .portal-footer-bottom a { color: rgba(255,255,255,.72); } .portal-footer-bottom a:hover { color: #fff; } /* Portal flash stack + email-verify banner */ .flash-stack .alert { margin-bottom: .75rem; } .flash-stack .alert:last-child { margin-bottom: 0; } .verify-banner-head { display: flex; gap: .85rem; align-items: flex-start; } .verify-banner-head > i { color: var(--accent); font-size: 1.35rem; margin-top: .15rem; } .catalog-grid { display: grid; gap: 1.5rem; grid-template-columns: 1fr; } @media (min-width: 700px) { .catalog-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1000px) { .catalog-grid { grid-template-columns: repeat(3, 1fr); } } .product-tile { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.5rem; display: flex; flex-direction: column; transition: transform var(--transition), box-shadow var(--transition); } .product-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow); } .product-tile .icon { width: 52px; height: 52px; border-radius: var(--radius); display: grid; place-items: center; background: rgba(99,102,241,.12); color: var(--primary); font-size: 1.4rem; margin-bottom: 1rem; } .product-tile h3 { margin: 0 0 .4rem; } .product-tile .summary { color: var(--text-secondary); font-size: .92rem; flex: 1; } .product-tile .tile-foot { margin-top: 1.25rem; display: flex; align-items: center; justify-content: space-between; gap: .5rem; } .price-from { font-family: var(--font-primary); font-weight: 700; } .price-from small { color: var(--text-muted); font-weight: 500; font-size: .78rem; } .pricing-grid { display: grid; gap: 1.25rem; grid-template-columns: 1fr; margin-top: 1.5rem; } @media (min-width: 700px) { .pricing-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } } .plan-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.5rem; display: flex; flex-direction: column; } .plan-card.featured { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); } .plan-card h3 { margin: 0 0 .25rem; } .plan-price { font-family: var(--font-primary); font-weight: 800; font-size: 1.9rem; margin: .5rem 0; } .plan-price small { font-size: .85rem; color: var(--text-muted); font-weight: 500; } .plan-features { list-style: none; padding: 0; margin: 1rem 0; font-size: .9rem; } .plan-features li { padding: .35rem 0; display: flex; gap: .5rem; align-items: flex-start; } .plan-features li i { color: var(--success); margin-top: .25rem; } .plan-card .btn { margin-top: auto; } .plan-price .cur { font-size: .9rem; color: var(--text-muted); font-weight: 600; vertical-align: super; } .plan-price .per { font-size: .85rem; color: var(--text-muted); font-weight: 500; } /* Catalog card top row + product-type badge */ .product-tile .tile-top { display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem; margin-bottom: 1rem; } .product-tile .tile-top .icon { margin-bottom: 0; } .type-badge { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .65rem; border-radius: 999px; background: rgba(99,102,241,.1); color: var(--primary); font-size: .74rem; font-weight: 600; letter-spacing: .02em; white-space: nowrap; } .tile-cta { color: var(--primary); font-size: .85rem; font-weight: 600; display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap; } .product-tile:hover .tile-cta { text-decoration: underline; } /* Product-family card: one tile that expands to reveal member packages */ .family-tile { padding: 0; overflow: hidden; } .family-tile .family-toggle { all: unset; box-sizing: border-box; display: block; width: 100%; padding: 1.5rem; cursor: pointer; } .family-tile .family-toggle:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; } .family-tile .family-caret { transition: transform var(--transition); } .family-tile.is-open .family-caret { transform: rotate(180deg); } .family-packages { display: grid; gap: 1rem; padding: 0 1.5rem 1.5rem; } .family-tile.is-collapsed .family-packages { display: none; } .family-packages .product-tile { padding: 1.15rem; background: var(--bg-secondary); } .family-packages .product-tile .icon { width: 42px; height: 42px; font-size: 1.1rem; margin-bottom: .75rem; } .family-packages .product-tile h3 { font-size: 1.05rem; } /* Sibling packages on a product detail page */ .family-siblings { display: grid; gap: .75rem; grid-template-columns: 1fr; margin-top: 1rem; } @media (min-width: 700px) { .family-siblings { grid-template-columns: repeat(2, 1fr); } } .sibling-card { display: flex; align-items: center; gap: .9rem; padding: 1rem 1.15rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); transition: transform var(--transition), box-shadow var(--transition); } .sibling-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); } .sibling-icon { width: 40px; height: 40px; flex: 0 0 auto; border-radius: var(--radius); display: grid; place-items: center; background: rgba(99,102,241,.12); color: var(--primary); } .sibling-body { display: flex; flex-direction: column; flex: 1; gap: .15rem; } .sibling-body .muted { font-size: .82rem; } .sibling-card > i { color: var(--primary); } /* Prose card (product long description, terms & conditions) */ .prose { line-height: 1.65; color: var(--text-secondary); } .prose h2 { font-size: 1.15rem; color: var(--text-primary); margin: 1.75rem 0 .6rem; } .prose h2:first-child { margin-top: 0; } .prose p { margin: 0 0 .9rem; } .prose ul, .prose ol { margin: 0 0 .9rem 1.25rem; padding: 0; } .prose li { margin-bottom: .35rem; } /* Featured-plan ribbon */ .plan-card { position: relative; } .plan-flag { position: absolute; top: -0.7rem; left: 50%; transform: translateX(-50%); background: var(--primary); color: #fff; font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: .25rem .7rem; border-radius: 999px; white-space: nowrap; } /* "How it works" steps on product pages */ .how-grid { display: grid; gap: 1.25rem; grid-template-columns: 1fr; margin-top: 1rem; } @media (min-width: 700px) { .how-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1000px) { .how-grid { grid-template-columns: repeat(4, 1fr); } } .how-step { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.25rem; } .how-step .num { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: rgba(99,102,241,.12); color: var(--primary); font-weight: 800; font-family: var(--font-primary); margin-bottom: .75rem; } .how-step h4 { margin: 0 0 .35rem; font-size: .98rem; } .how-step p { margin: 0; color: var(--text-secondary); font-size: .88rem; } .empty-state { text-align: center; padding: 3rem 1rem; color: var(--text-muted); } .empty-state i { font-size: 2.5rem; margin-bottom: 1rem; opacity: .5; } /* =================================================================== Phase 7 — Checkout, payments, settings, order detail =================================================================== */ /* Utilities used by checkout/admin views */ .container.narrow { max-width: 920px; } .badge-secondary { background: var(--bg-tertiary); color: var(--text-secondary); } .btn-ghost.danger { color: var(--danger); } .btn-ghost.danger:hover { color: #fff; background: var(--danger); } .btn-row { display: flex; gap: .6rem; flex-wrap: wrap; } .mb-3 { margin-bottom: 1rem; } /* Form primitives (settings + uploads) */ .form-group { margin-bottom: 1.1rem; } .form-label { display: block; font-weight: 600; margin-bottom: .35rem; font-size: .9rem; } .form-hint { font-size: .8rem; margin-top: .35rem; } .form-actions { display: flex; gap: .6rem; margin-top: 1rem; } .check-row { display: flex; align-items: center; gap: .6rem; padding: .5rem 0; cursor: pointer; font-size: .92rem; } .check-row input { width: 1.05rem; height: 1.05rem; accent-color: var(--primary); } /* Admin settings tabs */ .settings-tabs { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: 1.1rem; border-bottom: 1px solid var(--border); padding-bottom: .55rem; } .settings-tab { appearance: none; border: 1px solid transparent; background: transparent; cursor: pointer; display: inline-flex; align-items: center; gap: .45rem; padding: .5rem .85rem; border-radius: 8px; font: inherit; font-size: .88rem; font-weight: 600; color: var(--text-secondary); transition: background .15s ease, color .15s ease; } .settings-tab:hover { background: var(--bg-tertiary); color: var(--text-primary); } .settings-tab.is-active { background: var(--primary); color: #fff; } .settings-tab i { font-size: .82rem; } .settings-save-hint { align-self: center; font-size: .82rem; } /* Copy-to-clipboard buttons (license keys etc.) */ .copy-btn { appearance: none; border: none; background: transparent; cursor: pointer; color: var(--text-muted); font-size: .85rem; padding: .15rem .3rem; border-radius: 6px; vertical-align: middle; transition: color .15s ease, background .15s ease; } .copy-btn:hover { color: var(--primary); background: var(--bg-tertiary); } .copy-btn.copied { color: var(--success); } /* Payment activity payload viewer (admin order page + unmatched callbacks) */ .payload-details summary { cursor: pointer; font-size: .8rem; color: var(--primary); user-select: none; } .payload-details[open] summary { margin-bottom: .35rem; } .payload-pre { max-width: 480px; max-height: 260px; overflow: auto; margin: 0; font-size: .74rem; line-height: 1.45; white-space: pre-wrap; word-break: break-all; background: var(--bg-tertiary); border: 1px solid var(--border); border-radius: 8px; padding: .6rem .7rem; } /* Key/value detail lists (order/customer cards) */ .kv { display: grid; grid-template-columns: max-content 1fr; gap: .4rem 1rem; margin: 0; font-size: .92rem; } .kv dt { color: var(--text-muted); } .kv dd { margin: 0; word-break: break-word; } /* Checkout layout */ .checkout-grid { display: grid; grid-template-columns: 1fr 1.3fr; gap: 1.25rem; align-items: start; } .checkout-summary { position: sticky; top: 1rem; } .summary-line { display: flex; justify-content: space-between; font-weight: 600; } .summary-total { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px solid var(--border); padding-top: .85rem; margin-top: .25rem; font-size: 1.05rem; } .summary-total strong { font-size: 1.35rem; color: var(--primary); } /* Payment method picker */ .pay-methods { display: flex; flex-direction: column; gap: .65rem; margin: 1rem 0; } .pay-method { display: flex; gap: .75rem; align-items: flex-start; padding: .9rem 1rem; border: 1.5px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; transition: var(--transition); } .pay-method:hover { border-color: var(--primary-light); } .pay-method:has(input:checked) { border-color: var(--primary); background: rgba(99,102,241,.05); } .pay-method input { margin-top: .2rem; accent-color: var(--primary); } .pay-method-body { flex: 1; display: flex; flex-direction: column; gap: .25rem; } .pay-method-head { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; } .pay-method-desc { font-size: .85rem; } .pay-suboptions { margin-top: .5rem; } .pay-badges, .pay-badge { display: inline-flex; gap: .3rem; align-items: center; } .pay-badge { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; padding: .12rem .45rem; border-radius: var(--radius-full); background: var(--bg-tertiary); color: var(--text-secondary); } /* Converted-charge note ("You pay PKR 11,060 (USD 39 at 283.50/USD)") */ .pay-convert { display: block; font-size: .82rem; margin-top: .35rem; padding: .45rem .65rem; border-radius: var(--radius-sm); background: rgba(16,185,129,.08); color: var(--text-secondary); } .pay-convert i { color: var(--success); margin-right: .25rem; } .pay-convert strong { color: var(--text-primary); } /* Manual / bank transfer */ .amount-due { display: flex; justify-content: space-between; align-items: baseline; padding: .85rem 1rem; background: var(--bg-tertiary); border-radius: var(--radius-sm); margin: .75rem 0 1rem; } .amount-due strong { font-size: 1.4rem; color: var(--primary); } .bank-instructions { background: var(--bg-secondary); border: 1px dashed var(--border); border-radius: var(--radius-sm); padding: 1rem; font-size: .92rem; line-height: 1.7; } /* Result / thank-you pages */ .result-icon { font-size: 3.5rem; line-height: 1; } .result-icon.success { color: var(--success); } .result-icon.pending { color: var(--accent); } /* Loading spinner (gateway redirect bridge) */ .spinner { width: 38px; height: 38px; margin: 0 auto; border-radius: 50%; border: 3px solid var(--border); border-top-color: var(--primary); animation: dango-spin .8s linear infinite; } @keyframes dango-spin { to { transform: rotate(360deg); } } @media (max-width: 768px) { .checkout-grid { grid-template-columns: 1fr; } .checkout-summary { position: static; } .detail-grid { grid-template-columns: 1fr !important; } } /* Password reveal toggle (injected by app.js around every password input) */ .pw-wrap { position: relative; display: block; } .pw-wrap > input { padding-right: 2.6rem; width: 100%; } .pw-reveal { position: absolute; top: 50%; right: .5rem; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; width: 1.9rem; height: 1.9rem; padding: 0; border: 0; border-radius: 6px; background: transparent; cursor: pointer; color: var(--text-secondary); } .pw-reveal:hover { color: var(--primary); background: var(--bg-tertiary); } /* --------------------------------------------------------------------------- Support center, FAQ + ticketing (c4) --------------------------------------------------------------------------- */ .support-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.25rem; margin-top: 1rem; } .support-tile { display: flex; flex-direction: column; gap: .5rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.5rem; text-decoration: none; color: var(--text-primary); transition: border-color .15s, transform .15s, box-shadow .15s; } .support-tile:hover { border-color: var(--primary); transform: translateY(-2px); box-shadow: var(--shadow); } .support-tile-icon { display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border-radius: 12px; background: rgba(99, 102, 241, .12); color: var(--primary); font-size: 1.35rem; } .support-tile h3 { margin: .35rem 0 0; font-family: var(--font-primary); } .support-tile p { color: var(--text-secondary); font-size: .92rem; margin: 0; flex: 1; } .support-tile-link { color: var(--primary); font-weight: 600; font-size: .9rem; } .faq-group { margin-bottom: 1.25rem; } .faq-group-title { font-family: var(--font-primary); font-size: 1.1rem; margin: 0 0 .75rem; } .faq-item { border-top: 1px solid var(--border); } .faq-item:first-of-type { border-top: 0; } .faq-item summary { cursor: pointer; padding: .85rem 0; font-weight: 600; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::after { content: "\f078"; font-family: "Font Awesome 6 Free"; font-weight: 900; color: var(--text-muted); font-size: .8rem; transition: transform .2s; } .faq-item[open] summary::after { transform: rotate(180deg); } .faq-answer { padding: 0 0 1rem; color: var(--text-secondary); line-height: 1.65; } .faq-answer a { color: var(--primary); } .ticket-thread { display: flex; flex-direction: column; gap: 1rem; } .ticket-msg { border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem 1.15rem; background: var(--surface); } .ticket-msg-staff { border-left: 3px solid var(--primary); background: rgba(99, 102, 241, .05); } .ticket-msg-me { border-left: 3px solid var(--border); } .ticket-msg-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: .5rem; font-size: .85rem; } .ticket-msg-author { font-weight: 600; } .ticket-msg-author i { color: var(--primary); } .ticket-msg-time { font-size: .8rem; } .ticket-msg-body { line-height: 1.6; color: var(--text-primary); } /* ========================================================================== Payment Hub console (/admin/broker: overview, charges, settlements, test) Token-based throughout, so dark mode is inherited from the palette above. ========================================================================== */ .hub-nav { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: 1.1rem; border-bottom: 1px solid var(--border); padding-bottom: .55rem; } .hub-nav-item { display: inline-flex; align-items: center; gap: .45rem; padding: .45rem .85rem; border-radius: var(--radius-full); font-size: .88rem; font-weight: 600; color: var(--text-secondary); text-decoration: none; transition: var(--transition); } .hub-nav-item:hover { background: var(--bg-tertiary); color: var(--text-primary); } .hub-nav-item.is-active { background: var(--primary); color: #fff; } .hub-nav-item.is-active:hover { background: var(--primary-dark); color: #fff; } .hub-window { display: flex; gap: .35rem; flex-wrap: wrap; align-items: center; margin-bottom: 1.1rem; } .hub-window-opt { padding: .35rem .8rem; border: 1px solid var(--border); border-radius: var(--radius-full); font-size: .82rem; font-weight: 600; color: var(--text-secondary); text-decoration: none; background: var(--surface); transition: var(--transition); } .hub-window-opt:hover { border-color: var(--primary); color: var(--primary); } .hub-window-opt.is-active { background: var(--primary); border-color: var(--primary); color: #fff; } .hub-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; } .hub-kpi { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.1rem 1.2rem; box-shadow: var(--shadow-sm); } .hub-kpi--money { border-top: 3px solid var(--success); } .hub-kpi--alert { border-top: 3px solid var(--accent); } .hub-kpi-label { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; font-weight: 700; color: var(--text-muted); } .hub-kpi-value { font-family: var(--font-primary); font-size: 1.65rem; font-weight: 800; line-height: 1.2; margin: .35rem 0 .3rem; color: var(--text-primary); } .hub-kpi-foot { font-size: .82rem; display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; } .hub-neg { color: var(--danger); } /* Tinted panel. Also applied to .card blocks, so it must stay block-flow; the one-line "do this now" variant opts into the row layout via --bar. */ .hub-alert { background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--primary); border-radius: var(--radius); padding: 1rem 1.15rem; } .hub-alert--warn { border-left-color: var(--accent); background: rgba(245, 158, 11, .07); } .hub-alert--danger { border-left-color: var(--danger); background: rgba(239, 68, 68, .07); } .hub-alert--warn h3 i { color: var(--accent); } .hub-alert--danger h3 i { color: var(--danger); } .hub-alert--bar { display: flex; gap: 1rem; align-items: center; justify-content: space-between; flex-wrap: wrap; } .hub-alert .muted { font-size: .85rem; margin-top: .25rem; } .hub-chart { display: flex; align-items: flex-end; gap: .4rem; height: 130px; padding: .5rem 0 0; overflow-x: auto; } .hub-bar { flex: 1 1 0; min-width: 14px; display: flex; flex-direction: column; align-items: center; gap: .35rem; } .hub-bar-track { width: 100%; background: var(--bg-tertiary); border-radius: var(--radius-sm); display: flex; align-items: flex-end; min-height: 3px; } .hub-bar-paid { width: 100%; background: var(--primary); border-radius: var(--radius-sm); min-height: 2px; } .hub-bar-label { font-size: .68rem; color: var(--text-muted); white-space: nowrap; } .hub-legend { display: inline-block; width: .7rem; height: .7rem; border-radius: 3px; background: var(--bg-tertiary); vertical-align: middle; margin-right: .2rem; } .hub-legend--paid { background: var(--primary); } .hub-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1rem; } .hub-table-head { padding: 1rem 1.25rem; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; } .hub-table-head h3 { font-family: var(--font-primary); font-weight: 700; margin: 0; font-size: 1rem; } .hub-sub { font-size: .82rem; color: var(--text-muted); } .hub-note { font-size: .82rem; margin-top: .6rem; } .hub-pager { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: 1rem; font-size: .85rem; } @media (max-width: 768px) { .grid-2 { grid-template-columns: 1fr !important; } .hub-kpi-value { font-size: 1.35rem; } .hub-chart { height: 110px; } }