:root {
  --qf-green: #064638;
  --qf-green-2: #0a7a62;
  --ink: #111111;
  --text: #1d1d1f;
  --muted: #6e6e73;
  --page: #f5f5f7;
  --panel: rgba(255, 255, 255, 0.78);
  --panel-solid: #ffffff;
  --line: rgba(0, 0, 0, 0.08);
  --line-strong: rgba(0, 0, 0, 0.14);
  --sand: #f7f4ed;
  --white: #ffffff;
  --shadow-sm: 0 8px 24px rgba(0,0,0,.06);
  --shadow: 0 22px 70px rgba(0,0,0,.11);
  --radius-xl: 34px;
  --radius-lg: 24px;
  --radius-md: 16px;
  --ease: cubic-bezier(.2,.8,.2,1);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin:0; font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text",Inter,Arial,sans-serif; color:var(--text); background: radial-gradient(circle at 20% 10%, rgba(6,70,56,.10), transparent 26%), var(--page); }
button, input, a { font: inherit; }
button { cursor:pointer; border:0; }
a { color:inherit; text-decoration:none; }
.hidden { display:none !important; }
.eyebrow { margin:0 0 10px; color:var(--qf-green); font-weight:800; text-transform:uppercase; letter-spacing:.16em; font-size:12px; }
.muted { color:var(--muted); }
.glass-card, .glass-bar { background:var(--panel); backdrop-filter: blur(22px); border:1px solid var(--line); box-shadow:var(--shadow-sm); }
.login-screen { min-height:100vh; display:grid; place-items:center; padding:28px; overflow:hidden; position:relative; }
.login-orb { position:absolute; width:360px; height:360px; border-radius:999px; filter:blur(14px); opacity:.5; }
.orb-one { background:#c8ebe0; left:-120px; top:10%; }
.orb-two { background:#f0dfc7; right:-120px; bottom:8%; }
.login-card { position:relative; max-width:480px; width:100%; padding:42px; border-radius:34px; text-align:left; }
.login-logo { width:170px; height:auto; border-radius:16px; margin-bottom:20px; }
.login-card h1 { margin:0 0 14px; font-size:clamp(36px,5vw,58px); line-height:.95; letter-spacing:-.06em; }
.login-copy { color:var(--muted); font-size:17px; line-height:1.6; }
.login-form { display:grid; gap:16px; margin-top:28px; }
.login-form label { display:grid; gap:8px; font-weight:700; font-size:13px; color:#3a3a3c; }
.login-form input { border:1px solid var(--line); border-radius:16px; padding:15px 16px; outline:none; background:rgba(255,255,255,.86); }
.login-form input:focus { border-color:rgba(6,70,56,.45); box-shadow:0 0 0 4px rgba(6,70,56,.08); }
.login-form button, .primary-btn { border-radius:999px; padding:14px 20px; background:var(--qf-green); color:#fff; font-weight:800; transition:.25s var(--ease); }
.login-form button:hover, .primary-btn:hover { transform:translateY(-2px); box-shadow:0 14px 32px rgba(6,70,56,.23); }
.hint { color:var(--muted); margin:0; font-size:13px; }
.app { min-height:100vh; padding-top:92px; }
.topbar { position:fixed; top:18px; left:50%; transform:translateX(-50%); z-index:50; width:min(1500px, calc(100% - 32px)); min-height:66px; border-radius:999px; display:flex; align-items:center; gap:14px; padding:10px 12px 10px 16px; }
.brand-home { display:flex; align-items:center; gap:10px; background:transparent; min-width:max-content; font-weight:900; color:var(--text); }
.brand-home img { width:88px; height:34px; object-fit:contain; border-radius:12px; background:#fff; }
.main-nav { flex:1; display:flex; justify-content:center; gap:6px; align-items:center; }
.nav-item { position:relative; }
.nav-link { background:transparent; border-radius:999px; padding:10px 14px; color:#3a3a3c; font-weight:800; font-size:14px; transition:.2s var(--ease); }
.nav-link:hover, .nav-link.active { background:rgba(6,70,56,.10); color:var(--qf-green); }
.dropdown-menu { position:absolute; top:46px; left:50%; transform:translateX(-50%) translateY(8px); min-width:220px; background:#fff; border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow); padding:8px; opacity:0; visibility:hidden; transition:.2s var(--ease); }
.nav-item:hover .dropdown-menu { opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
.dropdown-menu .nav-link { display:block; width:100%; text-align:left; }
.logout-btn, .mobile-menu, .secondary-btn, .small-btn { border-radius:999px; padding:11px 15px; background:#fff; border:1px solid var(--line); color:var(--text); font-weight:800; transition:.2s var(--ease); }
.secondary-btn:hover, .small-btn:hover, .logout-btn:hover, .mobile-menu:hover { background:rgba(6,70,56,.08); transform:translateY(-1px); }
.mobile-menu { display:none; }
main { width:min(1500px, calc(100% - 32px)); margin:0 auto; padding:24px 0 80px; }
.page { animation:pageIn .35s var(--ease); }
@keyframes pageIn { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }
.hero-panel, .brand-hero { border-radius:var(--radius-xl); padding:clamp(30px,5vw,72px); background:linear-gradient(135deg, rgba(255,255,255,.92), rgba(255,255,255,.58)); border:1px solid var(--line); box-shadow:var(--shadow-sm); display:grid; grid-template-columns:1.1fr .9fr; gap:34px; align-items:center; overflow:hidden; }
.hero-panel h1, .brand-hero h1, .page-heading h1 { margin:0; font-size:clamp(44px,7vw,92px); line-height:.92; letter-spacing:-.07em; }
.hero-panel p, .brand-hero p, .page-heading p, .section-title p { color:var(--muted); line-height:1.7; font-size:17px; max-width:760px; }
.brand-hero img, .hero-panel img { width:100%; border-radius:28px; box-shadow:var(--shadow-sm); }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:26px; }
.page-heading, .section-title { margin:56px 0 22px; }
.section-block { margin-top:46px; scroll-margin-top:110px; }
.overview-grid, .card-grid, .asset-grid, .color-grid, .typography-grid, .download-grid, .scope-grid { display:grid; gap:18px; }
.overview-grid { grid-template-columns:repeat(4,1fr); margin-top:22px; }
.card-grid { grid-template-columns:repeat(3,1fr); }
.asset-grid { grid-template-columns:repeat(3,1fr); }
.color-grid { grid-template-columns:repeat(4,1fr); }
.typography-grid { grid-template-columns:repeat(2,1fr); }
.download-grid, .scope-grid { grid-template-columns:repeat(4,1fr); }
.overview-card, .content-card, .asset-card, .color-card, .type-card, .download-card, .path-item, .dimension-card, .scope-pill { background:#fff; border:1px solid var(--line); border-radius:24px; overflow:hidden; box-shadow:var(--shadow-sm); transition:.25s var(--ease); }
.overview-card:hover, .asset-card:hover, .download-card:hover, .path-item:hover, .dimension-card:hover { transform:translateY(-4px); box-shadow:var(--shadow); }
.overview-card { cursor:pointer; }
.overview-card img, .asset-card img { width:100%; aspect-ratio:16/10; object-fit:cover; display:block; }
.overview-card div, .asset-body, .content-card, .download-card, .type-card, .path-item, .dimension-card, .scope-pill { padding:22px; }
h2 { margin:0 0 10px; font-size:clamp(30px,4vw,54px); letter-spacing:-.05em; }
h3 { margin:0 0 8px; font-size:22px; letter-spacing:-.03em; }
p { margin-top:0; }
.card-actions, .download-chips { display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.download-chips a, .tag { border-radius:999px; padding:8px 10px; background:#f3f3f3; color:#333; font-size:12px; font-weight:800; }
.brand-layout { display:block; margin:0; }
.side-menu { position:fixed; left:max(18px, calc((100vw - 1500px) / 2 + 18px)); top:118px; z-index:45; width:270px; max-height:calc(100vh - 142px); overflow:auto; background:rgba(255,255,255,.86); backdrop-filter:blur(22px); border:1px solid var(--line); border-radius:26px; padding:12px; box-shadow:var(--shadow); display:grid; gap:4px; }
.side-menu a { padding:13px 14px; border-radius:16px; color:#3a3a3c; font-weight:850; font-size:14px; transition:.2s var(--ease); }
.side-menu a:hover, .side-menu a.active { background:rgba(6,70,56,.10); color:var(--qf-green); }
.has-floating-side-menu .brand-hero, .has-floating-side-menu .section-block { margin-left:310px; }
.has-floating-side-menu .page-heading { margin-left:310px; }
.color-card { padding:0; }
.color-swatch { height:150px; display:flex; align-items:flex-end; padding:16px; color:#fff; font-weight:900; }
.color-info { padding:20px; }
.copy-row { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:10px 0; border-top:1px solid var(--line); font-size:13px; }
.copy-row button { border-radius:999px; padding:7px 10px; background:#f5f5f5; font-weight:800; }
.type-sample { font-size:36px; font-weight:900; letter-spacing:-.04em; color:var(--qf-green); margin-bottom:12px; }
.path-list { display:grid; gap:14px; }
.path-top { display:flex; justify-content:space-between; gap:14px; align-items:center; margin-bottom:10px; }
code { display:block; padding:12px; background:#f7f7f7; border-radius:12px; overflow:auto; color:#333; }
.table-wrap { background:#fff; border:1px solid var(--line); border-radius:24px; overflow:hidden; box-shadow:var(--shadow-sm); }
table { width:100%; border-collapse:collapse; }
th, td { text-align:left; padding:18px; border-bottom:1px solid var(--line); }
th { background:#f7f7f7; font-size:13px; text-transform:uppercase; letter-spacing:.08em; }
.modal { position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:100; display:grid; place-items:center; padding:24px; }
.modal-panel { width:min(900px,100%); max-height:90vh; overflow:auto; border-radius:30px; padding:18px; background:#fff; }
.modal-close { float:right; border-radius:999px; padding:10px 14px; background:#f5f5f5; font-weight:900; }
.modal-panel img { width:100%; border-radius:22px; margin:14px 0 22px; }
.toast { position:fixed; bottom:24px; left:50%; transform:translateX(-50%); z-index:150; background:#111; color:#fff; border-radius:999px; padding:12px 18px; font-weight:800; box-shadow:var(--shadow); }
@media (max-width:1100px) { .overview-grid, .asset-grid { grid-template-columns:repeat(2,1fr); } .color-grid, .download-grid, .scope-grid { grid-template-columns:repeat(2,1fr); } .side-menu { position:sticky; top:90px; left:auto; width:100%; max-height:none; display:flex; overflow:auto; margin:22px 0; border-radius:22px; box-shadow:var(--shadow-sm); } .has-floating-side-menu .brand-hero, .has-floating-side-menu .section-block, .has-floating-side-menu .page-heading { margin-left:0; } .hero-panel, .brand-hero { grid-template-columns:1fr; } }
@media (max-width:820px) { .topbar { border-radius:24px; align-items:flex-start; flex-wrap:wrap; } .mobile-menu { display:block; margin-left:auto; } .main-nav { order:5; display:none; flex-basis:100%; flex-direction:column; align-items:stretch; padding-top:8px; } .main-nav.open { display:flex; } .nav-item, .nav-link { width:100%; text-align:left; } .dropdown-menu { position:static; visibility:visible; opacity:1; transform:none; box-shadow:none; border:0; background:rgba(255,255,255,.5); min-width:0; margin:4px 0 0 12px; } .logout-btn { display:none; } .overview-grid, .asset-grid, .color-grid, .typography-grid, .download-grid, .card-grid, .scope-grid { grid-template-columns:1fr; } .login-card { padding:28px; } }

.admin-link { position: fixed; right: 24px; bottom: 24px; z-index: 60; border-radius: 999px; padding: 12px 16px; background: #111; color: #fff; font-weight: 850; box-shadow: var(--shadow); }
.admin-link:hover { transform: translateY(-2px); }
.gallery-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; }
.gallery-card { background:#fff; border:1px solid var(--line); border-radius:24px; overflow:hidden; box-shadow:var(--shadow-sm); }
.gallery-card img { width:100%; aspect-ratio:16/10; object-fit:cover; display:block; }
.gallery-card div { padding:20px; }
.accordion-list { display:grid; gap:12px; }
.accordion-item { background:#fff; border:1px solid var(--line); border-radius:18px; padding:18px; box-shadow:var(--shadow-sm); }
.accordion-item summary { cursor:pointer; font-weight:900; }
.text-block { background:#fff; border:1px solid var(--line); border-radius:24px; padding:26px; box-shadow:var(--shadow-sm); line-height:1.7; }
.button-row { display:flex; flex-wrap:wrap; gap:12px; }
@media (max-width:820px){ .gallery-grid{grid-template-columns:1fr;} .admin-link{display:none;} }


/* Color palette groups */
.color-group { margin-top: 24px; }
.color-group > h3 { margin: 0 0 14px; font-size: clamp(22px, 2vw, 34px); }
.color-swatch.no-name { min-height: 110px; }