/* ClanCMS 0.3 — central theme engine, five independently styled visual systems.
   Presets affect all sections through shared layout tokens, without changing app logic. */

body[data-design] {
  background-image: linear-gradient(to bottom, color-mix(in srgb,var(--bg) 93%,transparent),color-mix(in srgb,var(--bg) 95%,transparent)),var(--page-wallpaper);
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
}
body[data-design] .hero {
  background-image:linear-gradient(110deg,rgba(18,23,59,.9),rgba(31,41,95,.66)),var(--hero-image);
  background-position:center;
  background-size:cover;
}
.brand-logo{width:100%;height:100%;object-fit:contain;display:block;border-radius:inherit}
body[data-design] .brand:has(.brand-logo) .brand-mark{background:transparent;box-shadow:none;border-radius:8px}

body[data-design="nebula"] .panel{transition:border-color .16s}
body[data-design="nebula"] .panel:hover{border-color:color-mix(in srgb,var(--accent) 27%,var(--border))}

/* Liquid Glass: transparent cards, blur, rounded iOS-like controls */
body[data-design="glass"] {
  --bg:#0d1426;--side:rgba(19,26,46,.75);--surface:rgba(33,41,64,.62);
  --surface-alt:rgba(65,78,112,.3);--border:rgba(191,204,255,.17);
  --text:#f4f6ff;--muted:#acbad2;
  --shadow:0 15px 50px rgba(0,0,0,.16);
}
body[data-design="glass"][data-theme="light"] {
  color-scheme:light;--bg:#e6eefa;--side:rgba(255,255,255,.7);
  --surface:rgba(255,255,255,.65);--surface-alt:rgba(227,236,252,.6);
  --border:rgba(114,133,168,.22);--text:#1b2846;--muted:#667893;
  --shadow:0 13px 35px rgba(39,62,109,.09);
}
body[data-design="glass"]{background-image:radial-gradient(circle at 85% 2%,rgba(142,101,255,.22),transparent 38%),radial-gradient(circle at 13% 78%,rgba(82,182,229,.16),transparent 42%),var(--page-wallpaper)}
body[data-design="glass"] .sidebar,body[data-design="glass"] .topbar,body[data-design="glass"] .panel,body[data-design="glass"] .stat-card,body[data-design="glass"] .user-pill{
  backdrop-filter:blur(24px) saturate(135%);-webkit-backdrop-filter:blur(24px) saturate(135%)}
body[data-design="glass"] .panel,body[data-design="glass"] .stat-card{border-radius:24px}
body[data-design="glass"] .hero{border-radius:27px;border:1px solid rgba(255,255,255,.22)}
body[data-design="glass"] .btn,body[data-design="glass"] .pill{border-radius:18px}
body[data-design="glass"] .panel{box-shadow:var(--shadow),inset 0 1px rgba(255,255,255,.07)}

/* Vista Aero: glass-blue chrome, glossy strips and framed windows */
body[data-design="aero"]{
  --bg:#101d39;--side:#102a4b;--surface:#193554;--surface-alt:#294665;
  --border:#55799d;--text:#f0f8ff;--muted:#b2c7db;
  --shadow:0 14px 34px #0013254a
}
body[data-design="aero"][data-theme="light"]{
  color-scheme:light;--bg:#dbeaf6;--side:#d2e3f4;
  --surface:#f8fcff;--surface-alt:#e4f0fa;--border:#8ab1d0;
  --text:#18314e;--muted:#536e85;--shadow:0 12px 28px #325c881f
}
body[data-design="aero"]{background-image:radial-gradient(ellipse at 80% 14%,rgba(73,176,237,.26),transparent 45%),var(--page-wallpaper)}
body[data-design="aero"] .sidebar,body[data-design="aero"] .topbar{background-image:linear-gradient(125deg,rgba(255,255,255,.13),transparent 60%);box-shadow:inset 0 1px rgba(255,255,255,.25)}
body[data-design="aero"] .panel,body[data-design="aero"] .stat-card{border:1px solid var(--border);border-radius:14px;box-shadow:inset 0 1px rgba(255,255,255,.2),var(--shadow)}
body[data-design="aero"] .panel>h2:first-child{background:linear-gradient(90deg,rgba(99,168,222,.16),transparent);padding:11px 13px;margin:-12px -12px 14px;border-radius:10px}
body[data-design="aero"] .hero{background-image:linear-gradient(110deg,rgba(26,73,124,.83),rgba(36,129,186,.46)),var(--hero-image);border:1px solid #73a9d0}
body[data-design="aero"] .btn.primary{background-image:linear-gradient(to bottom,color-mix(in srgb,var(--accent) 58%,white),var(--accent));box-shadow:inset 0 1px rgba(255,255,255,.4),0 5px 12px #0002}
body[data-design="aero"] .brand-mark{border:1px solid #9ed8ff}

/* Windows-inspired Metro tiles: crisp square geometry and prominent typography */
body[data-design="metro"]{
  --bg:#12182a;--side:#171f32;--surface:#1e2940;--surface-alt:#293752;
  --border:#36455e;--text:#fcfcff;--muted:#a6b4cf;--shadow:none
}
body[data-design="metro"][data-theme="light"]{
  color-scheme:light;--bg:#f2f4f8;--side:#ffffff;--surface:#ffffff;
  --surface-alt:#ebeff5;--border:#d9dfeb;--text:#17223a;--muted:#667590;--shadow:none
}
body[data-design="metro"] .hero,body[data-design="metro"] .panel,body[data-design="metro"] .stat-card,
body[data-design="metro"] .btn,body[data-design="metro"] .pill,body[data-design="metro"] .user-pill,
body[data-design="metro"] .nav>a,body[data-design="metro"] .stat-icon,
body[data-design="metro"] .field input,body[data-design="metro"] .field textarea,
body[data-design="metro"] .field select{border-radius:3px}
body[data-design="metro"] .hero{background-image:linear-gradient(105deg,color-mix(in srgb,var(--accent) 65%,#093bb3),rgba(13,38,88,.4)),var(--hero-image)}
body[data-design="metro"] .hero h1{font-weight:450;letter-spacing:-.055em}
body[data-design="metro"] .panel{border-top:3px solid color-mix(in srgb,var(--accent) 70%,transparent)}
body[data-design="metro"] .nav>a.active{background:var(--accent);color:#fff}
body[data-design="metro"] .stat-card{border-left:5px solid var(--accent)}
body[data-design="metro"] h1,body[data-design="metro"] h2{font-weight:570}

/* ICQ/MSN inspired styling: greenish blue, messenger window controls */
body[data-design="retro"]{
  font-family:Tahoma,Verdana,Arial,sans-serif;
  --bg:#142536;--side:#163342;--surface:#214051;--surface-alt:#2a5160;
  --border:#557d86;--text:#f5fffa;--muted:#bed9d3;
  --shadow:0 8px 22px #00121b45
}
body[data-design="retro"][data-theme="light"]{
  color-scheme:light;--bg:#e4f2ec;--side:#d4e9e2;--surface:#f8fffc;
  --surface-alt:#e5f3ec;--border:#98c7b9;--text:#1a413a;--muted:#588278;
  --shadow:0 6px 18px #1b684021
}
body[data-design="retro"] .topbar{background-image:linear-gradient(to bottom,rgba(143,224,182,.13),transparent)}
body[data-design="retro"] .panel,body[data-design="retro"] .stat-card{border-radius:9px;border-width:2px}
body[data-design="retro"] .hero{background-image:linear-gradient(95deg,rgba(24,106,106,.9),rgba(23,69,111,.51)),var(--hero-image);border:2px solid #75cda5}
body[data-design="retro"] .brand-mark{border-radius:50%;background:linear-gradient(145deg,#41bf91,var(--accent))}
body[data-design="retro"] .stat-icon{border-radius:50%}
body[data-design="retro"] .nav>a.active{box-shadow:inset 4px 0 #66e6a7;background:var(--soft)}
body[data-design="retro"] .panel h2:before{content:'●';font-size:9px;color:#53d88f;margin-right:7px;vertical-align:3px}

/* Shared admin theme studio controls */
.theme-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(198px,1fr));gap:15px}
.theme-option{display:flex;flex-direction:column;gap:9px;border-radius:14px;padding:10px;border:2px solid var(--border);cursor:pointer;position:relative;transition:transform .15s,border-color .15s;background:var(--surface-alt)}
.theme-option:hover{transform:translateY(-2px);border-color:var(--accent)}
.theme-option:has(input:checked){border-color:var(--accent);box-shadow:0 0 0 3px var(--soft)}
.theme-option>input{position:absolute;right:16px;top:18px;width:17px;height:17px;accent-color:var(--accent);z-index:2}
.theme-option>small{color:var(--muted);line-height:1.5;min-height:43px}
.theme-title{display:flex;align-items:center;justify-content:space-between;gap:7px;flex-wrap:wrap}.theme-title strong{font-size:13px}.theme-tag{font-size:10px;letter-spacing:.3px;background:var(--soft);color:var(--accent);border-radius:30px;padding:3px 8px}
.theme-preview{display:flex;height:116px;border-radius:9px;overflow:hidden;gap:8px;padding:10px;background:var(--tp-bg,#19243c)}
.theme-preview-sidebar{width:26%;height:100%;border-radius:5px;background:var(--tp-side,#354563)}
.theme-preview-main{flex:1;display:flex;flex-direction:column;gap:8px}
.theme-preview-bar{height:24%;border-radius:5px;background:var(--tp-primary,#6958da)}
.theme-preview-card{height:27%;background:var(--tp-card,#33405b);border-radius:5px}
.theme-preview-card.short{width:65%}
.theme-option-nebula{--tp-bg:#141a33;--tp-side:#282e48;--tp-primary:#795bea;--tp-card:#384361}
.theme-option-glass{--tp-bg:#b0c4e7;--tp-side:#ffffff9c;--tp-primary:#b6a9fe;--tp-card:#f6fcff9c}
.theme-option-aero{--tp-bg:#67aee3;--tp-side:#afddf1;--tp-primary:#1c74bc;--tp-card:#d9f6ff}
.theme-option-metro{--tp-bg:#242a3d;--tp-side:#19274d;--tp-primary:#1f8dd7;--tp-card:#ad5185}
.theme-option-retro{--tp-bg:#d8f4e9;--tp-side:#39a683;--tp-primary:#5dc4e6;--tp-card:#8bd2c3}
.theme-option-imported{--tp-bg:#383046;--tp-side:#775a92;--tp-primary:#eab767;--tp-card:#8c75a0}
.theme-option-metro .theme-preview,.theme-option-metro .theme-preview *{border-radius:1px}
.theme-controls{display:flex;align-items:end;gap:20px;flex-wrap:wrap;margin-top:20px}
.theme-controls .field{margin:0}.theme-controls input[type="color"]{width:95px}
.asset-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px}
.asset-card{background:var(--surface-alt);border:1px solid var(--border);border-radius:14px;padding:15px}
.asset-card h3{margin:14px 0 5px}.asset-card p{min-height:42px;font-size:12px}
.asset-card .btn{max-width:100%;white-space:normal}
.asset-preview{height:125px;border-radius:10px;border:1px dashed var(--border);background:linear-gradient(135deg,var(--soft),var(--surface));display:grid;place-items:center;overflow:hidden}
.asset-preview img{max-width:100%;width:100%;height:100%;object-fit:cover}
.asset-preview span{font-size:36px;color:var(--accent)}
.asset-logo img{object-fit:contain;padding:10px}.asset-card form + form{margin-top:8px}
@media(max-width:900px){.asset-grid{grid-template-columns:1fr 1fr}}
@media(max-width:650px){.asset-grid{grid-template-columns:1fr}.theme-grid{grid-template-columns:repeat(auto-fit,minmax(165px,1fr))}.theme-option>small{min-height:0}}
@media(prefers-reduced-transparency:reduce){body[data-design="glass"] .sidebar,body[data-design="glass"] .panel{backdrop-filter:none;-webkit-backdrop-filter:none}}