/* ============================================================ keyui.css — friendsGO! Key-Service Design System Shared component layer for key.php / mod.php / admin.php previews. Builds on colors_and_type.css tokens. Mobile-first card UI; .dark on flips automatically. ============================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } body { min-height: 100vh; background: var(--bg-card); font-family: var(--font-body); color: var(--fg1); } /* Material Symbols helper — use icon_name */ .ms { font-family: 'Material Symbols Rounded'; font-weight: normal; font-style: normal; line-height: 1; letter-spacing: normal; white-space: nowrap; direction: ltr; -webkit-font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased; } /* ══ HEADER ═══════════════════════════════════════════════ */ .site-header { position: sticky; top: 0; z-index: 50; background: var(--bg-overlay); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); } .header-inner { max-width: 520px; margin: 0 auto; padding: 11px 18px; display: flex; align-items: center; justify-content: space-between; gap: 10px; } .brand-link { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; } .brand-icon { width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0; background: var(--fgo-green); display: flex; align-items: center; justify-content: center; } .brand-icon svg { width: 18px; height: 18px; fill: #fff; } .brand-name { font-family: var(--font-display); font-size: 17px; font-weight: 800; color: var(--fg1); letter-spacing: -.3px; } .brand-go { color: var(--fgo-green); } .nav-toggle { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border); background: var(--bg); border-radius: var(--radius-sm); padding: 7px 12px; cursor: pointer; font-family: var(--font-body); font-size: 13px; font-weight: 600; color: var(--fg1); transition: background var(--duration-1) var(--ease); } .nav-toggle:hover { background: var(--bg-surface); } .nav-toggle .ms { font-size: 17px; color: var(--fgo-green); } .site-nav { position: absolute; top: calc(100% + 6px); right: 18px; width: 228px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 7px; display: flex; flex-direction: column; gap: 2px; opacity: 0; transform: translateY(-8px) scale(.98); transform-origin: top right; pointer-events: none; transition: opacity var(--duration-2) var(--ease), transform var(--duration-2) var(--ease); } .site-nav.open { opacity: 1; transform: none; pointer-events: all; } .nav-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--radius-sm); text-decoration: none; font-size: 13.5px; font-weight: 600; color: var(--fg1); background: none; border: none; cursor: pointer; font-family: var(--font-body); width: 100%; transition: background var(--duration-1) var(--ease); } .nav-item:hover { background: var(--bg-card); } .nav-item.active { background: var(--fgo-green-tint); color: var(--fgo-green); } .nav-item .ms { font-size: 18px; flex-shrink: 0; } .nav-item.mod .ms { color: var(--fgo-secondary); } .nav-item.admin .ms { color: var(--fg2); } .nav-item.signout, .nav-item.signout .ms { color: var(--fgo-error); } .nav-divider { height: 1px; background: var(--border); margin: 5px 3px; } .nav-label { padding: 7px 12px 3px; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--fg2); } /* ══ PAGE ═════════════════════════════════════════════════ */ .page { max-width: 480px; margin: 0 auto; padding: 14px 14px 52px; display: flex; flex-direction: column; gap: 10px; } .page-wide { max-width: 640px; } /* ── Alerts ───────────────────────────────────────────── */ .alert { border-radius: var(--radius-md); padding: 11px 14px; display: flex; align-items: flex-start; gap: 8px; font-size: 13px; font-weight: 500; line-height: 1.45; } .alert .ms { font-size: 17px; flex-shrink: 0; margin-top: 1px; } .alert-success { background: var(--fgo-green-tint); border: 1px solid var(--fgo-green-soft); color: var(--fgo-secondary); } .alert-error { background: rgba(231,111,81,.1); border: 1px solid var(--fgo-error); color: var(--fgo-error); } .alert-error strong { font-weight: 700; } /* ── One-time key banner ──────────────────────────────── */ .otk-banner { background: var(--fgo-green-tint); border: 1px solid var(--fgo-green-soft); border-radius: var(--radius-lg); padding: 14px 16px; display: none; flex-direction: column; gap: 9px; } .otk-banner.show { display: flex; } .otk-eyebrow { display: flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .7px; color: var(--fgo-secondary); } .otk-eyebrow .ms { font-size: 16px; } .otk-value { font-family: var(--font-mono); font-size: 13.5px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 9px 12px; color: var(--fg1); word-break: break-all; letter-spacing: .04em; } .otk-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .otk-copy-btn { border: 1px solid var(--fgo-green); background: var(--bg); color: var(--fgo-green); border-radius: var(--radius-sm); padding: 6px 14px; font-family: var(--font-body); font-size: 12px; font-weight: 700; cursor: pointer; transition: background var(--duration-1) var(--ease); } .otk-copy-btn:hover { background: var(--fgo-green-tint); } .otk-dismiss { background: none; border: none; color: var(--fg2); font-size: 12px; font-weight: 600; cursor: pointer; font-family: var(--font-body); padding: 6px 10px; transition: color var(--duration-1) var(--ease); } .otk-dismiss:hover { color: var(--fg1); } /* ── Card ─────────────────────────────────────────────── */ .card { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; } /* ── Page intro ───────────────────────────────────────── */ .page-intro { padding: 22px 20px; text-align: center; } .page-intro .eyebrow { display: block; margin-bottom: 6px; } .page-intro h1 { font-family: var(--font-display); font-size: var(--text-h2); font-weight: 800; letter-spacing: -.3px; color: var(--fg1); margin-bottom: 8px; line-height: 1.2; } .logo-f { color: var(--fgo-logo-friends); } .logo-g { color: var(--fgo-logo-go); } .page-intro p { font-size: 13px; color: var(--fg2); line-height: 1.65; text-wrap: pretty; } .page-intro a { color: var(--fgo-green); text-decoration: none; } .page-intro a:hover { text-decoration: underline; } /* Intro with side action (mod/admin) */ .intro-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 20px; text-align: left; flex-wrap: wrap; } .intro-row .intro-copy { flex: 1; min-width: 200px; } .intro-row .eyebrow { display: block; margin-bottom: 5px; } .intro-row h1 { font-family: var(--font-display); font-size: var(--text-h2); font-weight: 800; letter-spacing: -.3px; color: var(--fg1); margin-bottom: 6px; line-height: 1.2; } .intro-row p { font-size: 12.5px; color: var(--fg2); line-height: 1.55; text-wrap: pretty; } /* ── Section head ─────────────────────────────────────── */ .sec-head { padding: 15px 18px 0; display: flex; align-items: center; gap: 8px; } .sec-head .ms { font-size: 19px; color: var(--fgo-green); flex-shrink: 0; } .sec-title { font-family: var(--font-display); font-size: var(--text-h3); font-weight: 800; color: var(--fg1); letter-spacing: -.2px; } .sec-sub { padding: 4px 18px 0; font-size: 12px; color: var(--fg2); line-height: 1.5; text-wrap: pretty; } .sec-divider { height: 1px; background: var(--border); margin: 12px 0 0; } /* ── Body padding ─────────────────────────────────────── */ .card-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 12px; } /* ══ BUTTONS ══════════════════════════════════════════════ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: none; border-radius: 10px; font-family: var(--font-body); font-weight: 600; cursor: pointer; text-decoration: none; transition: background var(--duration-1) var(--ease), transform var(--duration-1) var(--ease); } .btn .ms { font-size: 17px; } .btn-primary { background: var(--fgo-green); color: #fff; font-size: 14px; padding: 12px 20px; min-height: var(--button-min-height); width: 100%; } .btn-primary:hover { background: var(--fgo-green-hover); } .btn-primary:active { background: var(--fgo-green-press); transform: scale(.98); } .btn-primary:disabled { opacity: .5; pointer-events: none; } .btn-ghost { background: var(--bg); color: var(--fg1); border: 1px solid var(--border); font-size: 13px; padding: 7px 13px; min-height: 36px; white-space: nowrap; } .btn-ghost:hover { background: var(--bg-card); } .btn-danger { background: var(--bg); color: var(--fgo-error); border: 1px solid var(--border); font-size: 12px; padding: 6px 11px; min-height: 32px; white-space: nowrap; } .btn-danger:hover { background: rgba(231,111,81,.09); border-color: var(--fgo-error); } .btn-sm { font-size: 12.5px; padding: 8px 14px; min-height: 38px; width: auto; } /* Auto-width primary (for inline use) */ .btn-primary.btn-inline { width: auto; padding: 10px 18px; } /* ── Feature download block ───────────────────────────── */ .dl-feature { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 11px; } .dl-kicker { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .9px; color: var(--fgo-green); } .dl-name-row { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; } .dl-name { font-size: var(--text-h4); font-weight: 700; color: var(--fg1); } .badge { display: inline-flex; align-items: center; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: var(--radius-xs); line-height: 1.5; white-space: nowrap; } .badge-neutral { background: var(--bg-card); color: var(--fg2); border: 1px solid var(--border); } .badge-green { background: var(--fgo-green-tint); color: var(--fgo-secondary); } .dl-desc { font-size: 13px; color: var(--fg2); line-height: 1.6; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 13px; text-wrap: pretty; } .dl-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } /* ── Accordion ────────────────────────────────────────── */ .accordion-trigger { width: 100%; border: none; background: var(--bg-card); border-top: 1px solid var(--border); padding: 12px 18px; display: flex; align-items: center; justify-content: space-between; cursor: pointer; font-family: var(--font-body); font-size: 13px; font-weight: 700; color: var(--fg1); transition: background var(--duration-1) var(--ease); } .accordion-trigger:hover { background: var(--bg-surface); } .acc-left { display: flex; align-items: center; gap: 8px; } .acc-count { font-size: 11px; font-weight: 600; color: var(--fg2); background: var(--bg); border: 1px solid var(--border); border-radius: 20px; padding: 1px 8px; } .acc-chevron { color: var(--fgo-green); transition: transform var(--duration-2) var(--ease); flex-shrink: 0; } .acc-chevron .ms { font-size: 19px; display: block; } .acc-chevron.open { transform: rotate(180deg); } .accordion-body { max-height: 0; overflow: hidden; transition: max-height var(--duration-3) var(--ease); } .accordion-body.open { max-height: 800px; } /* ── Download list item ───────────────────────────────── */ .dl-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 18px; border-top: 1px solid var(--border); } .dl-item-info { flex: 1; min-width: 0; } .dl-item-name { font-size: 13px; font-weight: 700; color: var(--fg1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dl-item-meta { font-size: 11px; color: var(--fg2); margin-top: 2px; } /* ── Locked / empty states ────────────────────────────── */ .locked-state { padding: 28px 18px; text-align: center; border: 1.5px dashed var(--border); border-radius: var(--radius-md); margin: 14px 18px; display: flex; flex-direction: column; align-items: center; gap: 10px; } .locked-icon { width: 46px; height: 46px; border-radius: 50%; background: var(--bg-card); display: flex; align-items: center; justify-content: center; color: var(--fg2); } .locked-icon .ms { font-size: 22px; } .locked-state h3 { font-family: var(--font-display); font-size: 15px; font-weight: 800; color: var(--fg1); } .locked-state p { font-size: 12.5px; color: var(--fg2); line-height: 1.5; text-wrap: pretty; } .empty-inline { font-size: 13px; color: var(--fg2); padding: 8px 0; } /* ── Field label + select + input ─────────────────────── */ .field-label { display: flex; flex-direction: column; gap: 5px; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .65px; color: var(--fg2); } .fld-select, .fld-input { width: 100%; min-height: 44px; background: var(--bg-input); border: 1.5px solid var(--border); border-radius: 10px; padding: 0 13px; font-family: var(--font-body); font-size: 14px; font-weight: 500; color: var(--fg1); transition: border-color var(--duration-1) var(--ease), box-shadow var(--duration-1) var(--ease); } .fld-input { font-weight: 400; } .fld-select:focus, .fld-input:focus { outline: none; border-color: var(--fgo-green); box-shadow: 0 0 0 3px var(--fgo-green-tint); } /* ── Filter row ───────────────────────────────────────── */ .filter-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .filter-row .fld-input, .filter-row .fld-select { flex: 1 1 140px; min-height: 40px; font-size: 13px; } .filter-row .btn { flex-shrink: 0; } /* ── Stats row ────────────────────────────────────────── */ .stats-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .stats-row.cols-2 { grid-template-columns: repeat(2, 1fr); } .stats-row.cols-4 { grid-template-columns: repeat(4, 1fr); } .stat-chip { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 11px 8px; text-align: center; display: flex; flex-direction: column; gap: 2px; } .stat-num { font-family: var(--font-display); font-size: 22px; font-weight: 800; color: var(--fgo-deep); line-height: 1; } .stat-lbl { font-size: 11px; font-weight: 700; color: var(--fg1); margin-top: 3px; } .stat-meta { font-size: 10px; color: var(--fg2); } /* ══ TABLES ═══════════════════════════════════════════════ */ .tbl-wrap { border: 1px solid var(--border); border-radius: var(--radius-md); overflow-x: auto; } .tbl { width: 100%; border-collapse: collapse; } .tbl thead th { background: var(--bg-card); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--fg2); text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--border); white-space: nowrap; } .tbl tbody td { padding: 9px 12px; border-bottom: 1px solid var(--border); font-size: 13px; vertical-align: middle; } .tbl tbody tr:last-child td { border-bottom: none; } .td-date { color: var(--fg2); font-size: 11.5px; white-space: nowrap; } .td-act { text-align: right; white-space: nowrap; } .td-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } .th-num { text-align: right; } .td-email { color: var(--fg1); } .td-empty { text-align: center; color: var(--fg2); padding: 18px 0 !important; font-size: 13px; } .key-mask { font-family: var(--font-mono); font-size: 12px; color: var(--fg1); } code { font-family: var(--font-mono); font-size: 12px; color: var(--fg1); } .label-input { width: 100%; min-width: 90px; background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius-xs); padding: 6px 9px; font-family: var(--font-body); font-size: 13px; color: var(--fg1); transition: border-color var(--duration-1) var(--ease); } .label-input:focus { outline: none; border-color: var(--fgo-green); } .table-input { width: 100%; min-width: 64px; background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius-xs); padding: 6px 9px; font-family: var(--font-body); font-size: 13px; color: var(--fg1); transition: border-color var(--duration-1) var(--ease); } .table-input:focus { outline: none; border-color: var(--fgo-green); } .table-input.num { text-align: right; } .w-56 { min-width: 56px; width: 56px; } .w-72 { min-width: 72px; width: 72px; } .w-90 { min-width: 90px; width: 90px; } .inline-select { min-height: 38px; background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0 10px; font-family: var(--font-body); font-size: 13px; color: var(--fg1); } .inline-select:focus { outline: none; border-color: var(--fgo-green); } .no-keys-msg { font-size: 13px; color: var(--fg2); text-align: center; padding: 14px 0; } .revoke-all-row { display: flex; justify-content: flex-end; } /* Table meta header */ .table-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; } .table-meta h3 { font-family: var(--font-display); font-size: 13px; font-weight: 800; color: var(--fg1); } .table-note { font-size: 11px; color: var(--fg2); font-weight: 600; } .table-meta-actions { display: flex; align-items: center; gap: 8px; } /* ── Edit / row action buttons ────────────────────────── */ .btn-edit { display: inline-flex; align-items: center; gap: 5px; min-height: 32px; padding: 0 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); color: var(--fg1); font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap; font-family: var(--font-body); transition: background var(--duration-1) var(--ease), border-color var(--duration-1) var(--ease), color var(--duration-1) var(--ease); } .btn-edit:hover { background: var(--fgo-green-tint); border-color: var(--fgo-green); color: var(--fgo-secondary); } .btn-edit .ms { font-size: 15px; } .btn-new { display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 14px; border: none; border-radius: 10px; background: var(--fgo-green); color: #fff; font-family: var(--font-body); font-size: 13px; font-weight: 700; cursor: pointer; transition: background var(--duration-1) var(--ease), transform var(--duration-1) var(--ease); } .btn-new:hover { background: var(--fgo-green-hover); transform: translateY(-1px); } .btn-new .ms { font-size: 17px; } /* ── Pills ────────────────────────────────────────────── */ .pill { display: inline-flex; align-items: center; font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: var(--radius-pill); line-height: 1.6; white-space: nowrap; } .pill-success { background: var(--fgo-green-tint); color: var(--fgo-secondary); } .pill-warning { background: var(--fgo-warning); color: var(--fgo-warning-text); } .pill-danger { background: rgba(231,111,81,.12); color: var(--fgo-error); } .pill-info { background: rgba(74,212,154,.14); color: var(--fgo-secondary); } .pill-neutral { background: var(--bg-card); color: var(--fg2); border: 1px solid var(--border); } /* ── Price table ──────────────────────────────────────── */ .price-tbl-wrap { border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; } .price-tbl { width: 100%; border-collapse: collapse; } .price-tbl th { background: var(--bg-card); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--fg2); text-align: center; padding: 8px 5px; border-bottom: 1px solid var(--border); } .price-tbl td { padding: 9px 5px; text-align: center; font-size: 13px; color: var(--fg1); border-bottom: 1px solid var(--border); font-variant-numeric: tabular-nums; } .price-tbl tbody tr:last-child td { border-bottom: none; } .price-tbl .td-size { font-weight: 800; font-family: var(--font-display); font-size: 15px; color: var(--fgo-deep); } .price-tbl .td-price { font-weight: 700; color: var(--fgo-green); } /* ── Conditionally-revealed block (e.g. PayPal after select) ── */ .pkg-paypal { display: none; } .pkg-paypal.show { display: block; } /* ── Lookup result card (mod) ─────────────────────────── */ .lookup-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 14px 15px; display: flex; flex-direction: column; gap: 12px; } .lookup-meta { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; flex-wrap: wrap; } .lookup-identity { display: flex; flex-direction: column; gap: 6px; } .lookup-id-row { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; } .lookup-discord { font-family: var(--font-display); font-size: 14px; font-weight: 800; color: var(--fg1); } .lookup-email { font-size: 12px; color: var(--fg2); } .lookup-joined { font-size: 11px; color: var(--fg2); white-space: nowrap; } .lookup-sub { font-family: var(--font-display); font-size: 12px; font-weight: 800; color: var(--fg1); text-transform: uppercase; letter-spacing: .5px; margin-top: 2px; } /* ── Notice / Warning card ────────────────────────────── */ .notice-warn { background: var(--fgo-warning); border: 1px solid #DDAA62; border-radius: var(--radius-md); padding: 13px 15px; display: flex; flex-direction: column; gap: 7px; } .notice-title { display: flex; align-items: center; gap: 7px; font-family: var(--font-display); font-size: 14px; font-weight: 700; color: var(--fgo-warning-text); } .notice-title .ms { font-size: 17px; color: var(--fgo-warning-text); } .notice-warn p { font-size: 12.5px; line-height: 1.6; color: var(--fgo-warning-text); text-wrap: pretty; } .notice-warn p + p { margin-top: 5px; } /* ── Pagination ───────────────────────────────────────── */ .pagination { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; } .page-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; min-height: 34px; padding: 0 8px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); color: var(--fg1); font-size: 13px; font-weight: 600; text-decoration: none; cursor: pointer; transition: background var(--duration-1) var(--ease); } .page-btn:hover { background: var(--bg-card); } .page-btn.active { background: var(--fgo-green); color: #fff; border-color: var(--fgo-green); } /* ══ TABS (admin) ═════════════════════════════════════════ */ .tabs-bar { display: flex; gap: 4px; overflow-x: auto; padding: 4px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); -webkit-overflow-scrolling: touch; } .tabs-bar::-webkit-scrollbar { height: 0; } .tab-btn { flex-shrink: 0; border: none; background: none; cursor: pointer; font-family: var(--font-body); font-size: 13px; font-weight: 600; color: var(--fg2); padding: 8px 14px; border-radius: var(--radius-sm); white-space: nowrap; transition: background var(--duration-1) var(--ease), color var(--duration-1) var(--ease); } .tab-btn:hover { color: var(--fg1); } .tab-btn.active { background: var(--bg); color: var(--fgo-green); box-shadow: var(--shadow-sm); } .tab-pane { display: none; flex-direction: column; gap: 10px; } .tab-pane.active { display: flex; } /* ── Mod log meta ─────────────────────────────────────── */ .mod-log-meta { font-size: 11.5px; color: var(--fg2); line-height: 1.5; } /* ══ MODAL ════════════════════════════════════════════════ */ .modal-scrim { position: fixed; inset: 0; z-index: 900; background: var(--scrim); display: flex; align-items: center; justify-content: center; padding: 20px; opacity: 0; pointer-events: none; transition: opacity var(--duration-2) var(--ease); } .modal-scrim.open { opacity: 1; pointer-events: all; } .modal-dialog { width: 100%; max-width: 460px; background: var(--bg-card); border-radius: var(--radius-xl); border: 1px solid var(--border); box-shadow: var(--shadow-lg); display: flex; flex-direction: column; overflow: hidden; max-height: calc(100vh - 40px); transform: scale(.96) translateY(8px); transition: transform var(--duration-2) var(--ease); } .modal-scrim.open .modal-dialog { transform: none; } .modal-header { padding: 18px 18px 0; flex-shrink: 0; } .modal-title-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .modal-title-left { display: flex; align-items: center; gap: 10px; } .modal-icon { width: 34px; height: 34px; border-radius: 10px; background: var(--fgo-green); display: flex; align-items: center; justify-content: center; color: #fff; flex-shrink: 0; } .modal-icon .ms { font-size: 18px; } .modal-title { font-family: var(--font-display); font-size: 16px; font-weight: 800; color: var(--fg1); letter-spacing: -.3px; } .modal-close { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--border); background: var(--bg); color: var(--fg2); cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background var(--duration-1) var(--ease), color var(--duration-1) var(--ease); } .modal-close:hover { background: var(--bg-surface); color: var(--fg1); } .modal-close .ms { font-size: 19px; } .modal-subtitle { font-size: 12px; color: var(--fg2); padding: 6px 0 14px; margin: 0; border-bottom: 1px solid var(--border); } .modal-body { padding: 16px 18px; overflow-y: auto; display: flex; flex-direction: column; gap: 13px; flex: 1; } .modal-grid { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; } .modal-grid .span-2 { grid-column: 1 / -1; } .modal-field { display: flex; flex-direction: column; gap: 5px; } .modal-label { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--fg2); } .modal-label .req { color: var(--fgo-error); } .modal-input, .modal-select, .modal-textarea { width: 100%; background: var(--bg-input); border: 1.5px solid var(--border); border-radius: 10px; padding: 10px 13px; color: var(--fg1); font-family: var(--font-body); font-size: 14px; min-height: 42px; transition: border-color var(--duration-1) var(--ease), box-shadow var(--duration-1) var(--ease); } .modal-input:focus, .modal-select:focus, .modal-textarea:focus { outline: none; border-color: var(--fgo-green); box-shadow: 0 0 0 3px var(--fgo-green-tint); } .modal-textarea { min-height: 84px; resize: vertical; line-height: 1.5; } .modal-hint { font-size: 11px; color: var(--fg2); margin-top: 1px; } .modal-check-row { display: flex; align-items: center; gap: 9px; min-height: 42px; cursor: pointer; } .modal-check-row input[type="checkbox"] { width: 17px; height: 17px; accent-color: var(--fgo-green); cursor: pointer; } .modal-check-label { font-size: 13.5px; font-weight: 600; color: var(--fg1); } .modal-divider { height: 1px; background: var(--border); margin: 2px 0; } .modal-footer { padding: 0 18px 18px; display: flex; gap: 9px; justify-content: flex-end; flex-shrink: 0; } .m-btn-cancel { min-height: 42px; padding: 0 18px; border: 1.5px solid var(--border); border-radius: 10px; background: var(--bg); color: var(--fg2); font-family: var(--font-body); font-size: 13.5px; font-weight: 600; cursor: pointer; transition: background var(--duration-1) var(--ease), color var(--duration-1) var(--ease); } .m-btn-cancel:hover { background: var(--bg-surface); color: var(--fg1); } .m-btn-save { min-height: 42px; padding: 0 22px; border: none; border-radius: 10px; background: var(--fgo-green); color: #fff; font-family: var(--font-body); font-size: 13.5px; font-weight: 700; cursor: pointer; transition: background var(--duration-1) var(--ease), transform var(--duration-1) var(--ease); } .m-btn-save:hover { background: var(--fgo-green-hover); } .m-btn-save:active { background: var(--fgo-green-press); transform: scale(.98); } /* ── Footer ───────────────────────────────────────────── */ .site-footer { text-align: center; padding: 6px 20px 28px; font-size: 11px; color: var(--fg2); } .site-footer a { color: var(--fgo-green); text-decoration: none; } /* ── Preview banner (vorschau only) ───────────────────── */ .preview-banner { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 7px 16px; background: var(--fgo-secondary); color: #fff; font-size: 12px; font-weight: 600; } .preview-banner .ms { font-size: 16px; color: var(--fgo-green-soft); } .preview-banner code { background: rgba(255,255,255,.15); color: #fff; padding: 1px 6px; border-radius: 5px; font-size: 11.5px; } /* ── Responsive ───────────────────────────────────────── */ @media (max-width: 380px) { .stat-num { font-size: 18px; } .stats-row { gap: 6px; } }