/* StudioBuilder — JGarcia Visuals dark theme */
:root{color-scheme:dark}
:root{
  --font-system:-apple-system,BlinkMacSystemFont,'SF Pro Display','SF Pro Text','Helvetica Neue',Helvetica,Arial,sans-serif;
  --font-mono:'SF Mono',SFMono-Regular,Menlo,Monaco,monospace;
  --text-caption2:11px;--text-caption1:12px;--text-footnote:13px;--text-subhead:15px;
  --text-body:17px;--text-title3:20px;--text-title2:22px;--text-title1:28px;--text-large:34px;
  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-8:32px;--space-10:40px;--space-12:48px;
  --radius-sm:8px;--radius-md:12px;--radius-lg:16px;--radius-xl:20px;--radius-full:9999px;
  --ease:cubic-bezier(.25,.1,.25,1);--ease-out:cubic-bezier(0,0,.58,1);--ease-spring:cubic-bezier(.175,.885,.32,1.275);
  --dur-instant:100ms;--dur-fast:200ms;--dur-normal:300ms;
  --blue:#ffffff;--green:#4ade80;--orange:#fbbf24;--red:#f87171;--gray:#8f8f97;--gold:#e0b457;
  --gray3:#34343b;--gray4:#34343b;--gray5:#101012;--gray6:#141416;
  --label:#f5f5f5;--label2:#b9b9bf;--label3:#8f8f97;
  --bg:#000000;--bg-elev:#141416;--bg-group:#141416;
  --sep:#34343b;--sep-opaque:#34343b;
  --navy:#0a0a0b;--on-accent:#141416;
  --shadow-1:0 1px 2px rgba(0,0,0,.5),0 4px 14px rgba(0,0,0,.6);
  --shadow-2:0 6px 14px rgba(0,0,0,.6),0 22px 48px rgba(0,0,0,.7);
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--bg);color:var(--label);font:var(--text-body)/1.45 var(--font-system);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
::selection{background:color-mix(in srgb,var(--blue) 24%,transparent)}
:focus{outline:none}
:focus-visible{outline:3px solid var(--blue);outline-offset:2px;border-radius:var(--radius-sm)}
h1,h2,h3{margin:0;letter-spacing:-.02em}
p{margin:0}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
input,button,select,textarea{font:inherit;color:inherit}
input{caret-color:var(--blue)}

/* nav bar */
.navbar{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--bg) 78%,transparent);
  backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:.5px solid var(--sep);padding:var(--space-2) var(--space-4) var(--space-2);
  padding-left:max(var(--space-4),env(safe-area-inset-left));padding-right:max(var(--space-4),env(safe-area-inset-right))}
.navbar .row{display:flex;align-items:center;gap:var(--space-3);min-height:44px}
.navbar .title{font-size:var(--text-body);font-weight:600;letter-spacing:-.01em}
.navbar .spacer{flex:1}
.largetitle{font-size:var(--text-large);font-weight:700;letter-spacing:-.03em;padding:var(--space-2) 0 var(--space-4)}
.subtitle{color:var(--label2);font-size:var(--text-subhead)}

/* layout */
.wrap{max-width:720px;margin:0 auto;padding:var(--space-5) var(--space-4) var(--space-12);
  padding-left:max(var(--space-4),env(safe-area-inset-left));padding-right:max(var(--space-4),env(safe-area-inset-right))}
.wrap.wide{max-width:1080px}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
  min-height:44px;padding:0 var(--space-5);border:0;border-radius:var(--radius-full);
  background:var(--blue);color:var(--on-accent);font-size:var(--text-body);font-weight:600;cursor:pointer;
  transition:transform var(--dur-instant) var(--ease-out),opacity var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease)}
.btn:active{transform:scale(.97)}
.btn:disabled{opacity:.4;cursor:default;transform:none}
.btn.secondary{background:color-mix(in srgb,var(--blue) 12%,transparent);color:var(--blue)}
.btn.secondary{background:#1f1f23;color:var(--label)}
.btn.plain{background:transparent;color:var(--blue);padding:0 var(--space-2);min-height:44px}
.btn.destructive{background:color-mix(in srgb,var(--red) 12%,transparent);color:var(--red)}
.btn.small{min-height:32px;font-size:var(--text-subhead);padding:0 var(--space-4)}
.btn .sym{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* grouped list */
.group{background:var(--bg-group);border-radius:var(--radius-md);overflow:hidden;box-shadow:var(--shadow-1)}
.group + .grouphead{margin-top:var(--space-6)}
.grouphead{font-size:var(--text-footnote);font-weight:600;letter-spacing:.02em;text-transform:uppercase;color:var(--label2);
  padding:0 var(--space-4) var(--space-2);margin-top:var(--space-6)}
.grouphead:first-child{margin-top:0}
.groupnote{font-size:var(--text-footnote);color:var(--label2);padding:var(--space-2) var(--space-4) 0;line-height:1.4}
.row-item{display:flex;align-items:center;gap:var(--space-3);min-height:44px;padding:var(--space-3) var(--space-4);
  background:transparent;border:0;width:100%;text-align:left;cursor:pointer;position:relative;
  transition:background var(--dur-fast) var(--ease)}
.row-item + .row-item::before{content:"";position:absolute;left:var(--space-4);right:0;top:0;height:.5px;background:var(--sep)}
.row-item.static{cursor:default}
button.row-item:hover{background:color-mix(in srgb,var(--label) 4%,transparent)}
button.row-item:active{background:color-mix(in srgb,var(--label) 8%,transparent)}
.row-item .icon{width:29px;height:29px;border-radius:var(--radius-sm);display:grid;place-items:center;background:var(--blue);color:var(--on-accent);flex:none}
.row-item .icon .sym{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.row-item .icon.gray{background:var(--gray)}
.row-item .icon.green{background:var(--green)}
.row-item .icon.orange{background:var(--orange)}
.row-item .body{flex:1;min-width:0}
.row-item .label{font-size:var(--text-body);font-weight:400;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row-item .sub{font-size:var(--text-footnote);color:var(--label2);display:block;margin-top:1px}
.row-item .value{color:var(--label2);font-size:var(--text-body);white-space:nowrap;font-variant-numeric:tabular-nums}
.chev{width:8px;height:13px;flex:none;stroke:var(--label3);stroke-width:2.2;fill:none;stroke-linecap:round;stroke-linejoin:round}

/* badges */
.badge{font-size:var(--text-caption1);font-weight:600;padding:3px 9px;border-radius:var(--radius-full);white-space:nowrap}
.badge.shared{background:color-mix(in srgb,var(--green) 16%,transparent);color:var(--green)}
.badge.shared{color:#86efac}

.row-item.banner{background:color-mix(in srgb,var(--orange) 10%,transparent)}
.row-item.banner:hover{background:color-mix(in srgb,var(--orange) 16%,transparent)}
.badge.draft{background:color-mix(in srgb,var(--gray) 18%,transparent);color:var(--label2)}

/* fields */
.field{display:block;width:100%;min-height:44px;padding:var(--space-3) var(--space-4);
  background:var(--bg-group);border:.5px solid transparent;border-radius:var(--radius-md);
  font-size:var(--text-body);transition:border-color var(--dur-fast) var(--ease)}
.field:focus{border-color:var(--blue)}
.field::placeholder{color:var(--label3)}

/* sheet */
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.4);opacity:0;pointer-events:none;
  transition:opacity var(--dur-normal) var(--ease);z-index:40}
.scrim.on{opacity:1;pointer-events:auto}
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:41;background:var(--bg);
  border-radius:var(--radius-xl) var(--radius-xl) 0 0;box-shadow:var(--shadow-2);
  transform:translateY(100%);transition:transform var(--dur-normal) var(--ease);
  max-height:88vh;overflow:auto;padding-bottom:max(var(--space-6),env(safe-area-inset-bottom))}
.sheet.on{transform:translateY(0)}
.grabber{width:36px;height:5px;border-radius:var(--radius-full);background:var(--gray3);margin:var(--space-2) auto var(--space-1)}
.sheet .sheethead{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-2) var(--space-4) var(--space-3);min-height:44px}
.sheet .sheethead h2{font-size:var(--text-title3);font-weight:600;flex:1;text-align:center}
.sheet .sheetbody{padding:0 var(--space-4)}
@media (min-width:700px){.sheet{left:50%;right:auto;bottom:auto;top:50%;width:min(560px,92vw);
  transform:translate(-50%,-46%) scale(.98);opacity:0;border-radius:var(--radius-lg)}
  .sheet.on{transform:translate(-50%,-50%) scale(1);opacity:1}
  .grabber{display:none}}

/* link box */
.linkbox{display:flex;align-items:center;gap:var(--space-2);background:var(--bg-group);border-radius:var(--radius-md);
  padding:var(--space-3) var(--space-3) var(--space-3) var(--space-4)}
.linkbox code{flex:1;min-width:0;font:var(--text-footnote)/1.4 var(--font-mono);color:var(--label2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;user-select:all}

/* empty state */
.empty{text-align:center;padding:var(--space-12) var(--space-4)}
.empty .sym{width:44px;height:44px;stroke:var(--label3);fill:none;stroke-width:1.4;margin-bottom:var(--space-4)}
.empty h3{font-size:var(--text-title3);font-weight:600;margin-bottom:var(--space-2)}
.empty p{color:var(--label2);font-size:var(--text-subhead);max-width:34ch;margin:0 auto var(--space-5)}

/* toast */
.toast{position:fixed;left:50%;bottom:max(var(--space-8),env(safe-area-inset-bottom));transform:translate(-50%,20px);
  background:color-mix(in srgb,var(--label) 88%,transparent);color:var(--bg);padding:var(--space-3) var(--space-5);
  border-radius:var(--radius-full);font-size:var(--text-subhead);font-weight:500;opacity:0;pointer-events:none;
  transition:opacity var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease-spring);z-index:60;box-shadow:var(--shadow-2)}
.toast.on{opacity:1;transform:translate(-50%,0)}

@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}