/* GarageForge 8.1 Appearance Studio */
:root{
  --app-bg-image:none;
  --app-bg-overlay:linear-gradient(135deg, rgba(12,16,22,.82), rgba(12,16,22,.92));
  --app-card-opacity:.9;
  --app-blur:14px;
  --app-radius:18px;
  --app-density:1;
  --app-sidebar-width:245px;
  --app-shadow:0 18px 50px rgba(0,0,0,.18);
  --app-border-strong: color-mix(in srgb,var(--accent) 20%,var(--line));
  --bg2: color-mix(in srgb,var(--bg) 82%, #132435);
}
body{
  background:
   var(--app-bg-overlay),
   var(--app-bg-image),
   radial-gradient(circle at 78% 0, color-mix(in srgb,var(--accent) 18%, transparent) 0, transparent 28%),
   radial-gradient(circle at 12% 8%, color-mix(in srgb,var(--accent2) 16%, transparent) 0, transparent 24%),
   linear-gradient(180deg,var(--bg2),var(--bg));
  background-size:cover,cover,auto,auto,auto;
  background-attachment:fixed;
}
body.gf-appearance-compact{ --app-density:.9; }
body.gf-appearance-comfy{ --app-density:1.1; }
.shell{grid-template-columns:var(--app-sidebar-width) 1fr;}
aside{background:color-mix(in srgb,var(--panel) 82%, rgba(10,10,10,.45));backdrop-filter:blur(calc(var(--app-blur) * .9));}
header{background:color-mix(in srgb,var(--panel) 72%, rgba(11,15,20,.28));backdrop-filter:blur(var(--app-blur));}
.card,.panel,.plan-card75,.saas-hero75{
  border-radius:var(--app-radius)!important;
  background:linear-gradient(180deg,color-mix(in srgb,var(--panel) calc(var(--app-card-opacity) * 100%), transparent), color-mix(in srgb,var(--panel2) calc(var(--app-card-opacity) * 100%), transparent))!important;
  border-color:var(--app-border-strong)!important;
  box-shadow:var(--app-shadow)!important;
}
.nav,aside button,header button,.ghost,.smallbtn,select,input,textarea,.primary{border-radius:calc(var(--app-radius) * .62)!important;}
#content{padding:calc(24px * var(--app-density));}
.card,.panel{padding:calc(16px * var(--app-density));}
.nav,aside button,header button,.ghost,.smallbtn,.primary,select,input,textarea{padding-top:calc(9px * var(--app-density));padding-bottom:calc(9px * var(--app-density));}
.brand .mark{
  box-shadow:0 10px 24px color-mix(in srgb,var(--accent) 30%, transparent);
  background:linear-gradient(135deg,var(--accent2),var(--accent));
}
.nav:hover,.nav.active{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 28%, transparent), 0 10px 22px rgba(0,0,0,.10);}
.primary{box-shadow:0 12px 24px color-mix(in srgb,var(--accent) 18%, transparent);}
.page-head h1{letter-spacing:-.02em;}
.brand b{font-size:19px;letter-spacing:-.02em;}
.brand-kicker{text-transform:uppercase;letter-spacing:.12em;font-size:10px;color:var(--muted);}
.appearance-btn81{min-width:105px;}
#appearanceOverlay81{position:fixed;inset:0;display:none;z-index:60;background:rgba(0,0,0,.5);backdrop-filter:blur(6px);}
#appearanceOverlay81.open{display:block;}
#appearancePanel81{position:absolute;right:18px;top:18px;bottom:18px;width:min(460px,calc(100vw - 36px));overflow:auto;border:1px solid var(--app-border-strong);border-radius:24px;padding:18px;background:linear-gradient(180deg,color-mix(in srgb,var(--panel) 92%, transparent),color-mix(in srgb,var(--panel2) 96%, transparent));box-shadow:0 24px 80px rgba(0,0,0,.32);}
#appearancePanel81 h2{margin:0;font-size:26px;}
#appearancePanel81 .muted{line-height:1.5;}
.appearance-grid81{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px;}
.appearance-grid81 .full{grid-column:1/-1;}
.appearance-grid81 label{display:grid;gap:6px;font-size:12px;color:var(--muted);}
.appearance-grid81 input[type="color"]{height:42px;padding:4px;}
.appearance-grid81 input[type="range"]{padding:0;}
.appearance-presets81{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:10px;}
.appearance-preset81{border:1px solid var(--app-border-strong);background:var(--panel);color:var(--text);padding:10px;border-radius:14px;cursor:pointer;text-align:left;}
.appearance-preset81 b,.appearance-preset81 span{display:block;}
.appearance-preset81 span{font-size:12px;color:var(--muted);margin-top:4px;}
.appearance-actions81{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;margin-top:16px;}
.appearance-chip81{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--app-border-strong);padding:6px 10px;border-radius:999px;font-size:12px;color:var(--muted);background:color-mix(in srgb,var(--panel) 80%, transparent);}
.appearance-section81{margin-top:18px;padding-top:16px;border-top:1px solid color-mix(in srgb,var(--line) 70%, transparent);}
.appearance-preview81{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:10px;}
.appearance-preview81 div{min-height:70px;border:1px solid var(--app-border-strong);border-radius:14px;background:linear-gradient(180deg,color-mix(in srgb,var(--panel) 90%, transparent),color-mix(in srgb,var(--panel2) 95%, transparent));padding:10px;box-shadow:var(--app-shadow);}
.appearance-preview81 small{display:block;color:var(--muted);}
body.gf-hide-brandmark .brand .mark{display:none;}
body.gf-solid-panels .card,body.gf-solid-panels .panel,body.gf-solid-panels .plan-card75,body.gf-solid-panels .saas-hero75{background:color-mix(in srgb,var(--panel) 96%, transparent)!important;}
body.gf-ultra-glass .card,body.gf-ultra-glass .panel,body.gf-ultra-glass .plan-card75,body.gf-ultra-glass .saas-hero75{backdrop-filter:blur(calc(var(--app-blur) * 1.2));}
@media (max-width: 900px){
 .appearance-grid81{grid-template-columns:1fr;}
 .appearance-presets81{grid-template-columns:1fr;}
}