@font-face{
  font-family:'Archivo';
  font-style:normal;
  font-weight:400 600;
  font-display:swap;
  src:url('fonts/archivo-vf.woff2?v=20260924-849d149f') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Archivo';
  font-style:normal;
  font-weight:400 600;
  font-display:swap;
  src:url('fonts/archivo-vf-ext.woff2?v=20260924-849d149f') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'IBM Plex Mono';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('fonts/ibmplexmono-400.woff2?v=20260924-849d149f') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'IBM Plex Mono';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('fonts/ibmplexmono-400-ext.woff2?v=20260924-849d149f') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'IBM Plex Mono';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('fonts/ibmplexmono-500.woff2?v=20260924-849d149f') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'IBM Plex Mono';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('fonts/ibmplexmono-500-ext.woff2?v=20260924-849d149f') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Barlow Condensed';
  font-style:italic;
  font-weight:800;
  font-display:swap;
  src:url('fonts/barlowcondensed-800i.woff2?v=20260924-849d149f') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Barlow Condensed';
  font-style:italic;
  font-weight:800;
  font-display:swap;
  src:url('fonts/barlowcondensed-800i-ext.woff2?v=20260924-849d149f') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Barlow Condensed';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('fonts/barlowcondensed-700.woff2?v=20260924-849d149f') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Barlow Condensed';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('fonts/barlowcondensed-700-ext.woff2?v=20260924-849d149f') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Barlow Condensed';
  font-style:normal;
  font-weight:800;
  font-display:swap;
  src:url('fonts/barlowcondensed-800.woff2?v=20260924-849d149f') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Barlow Condensed';
  font-style:normal;
  font-weight:800;
  font-display:swap;
  src:url('fonts/barlowcondensed-800-ext.woff2?v=20260924-849d149f') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
:root{
  --font-ui:'Archivo','Helvetica Neue',system-ui,-apple-system,Arial,sans-serif;
  --font-cond:'Barlow Condensed','Archivo',system-ui,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
}
:root{
  --ui-bg:#101010; --ui-fg:#eee;
  --btn-bg:#1b1b1b; --btn-border:#2a2a2a;
  --accent:#38bdf8;
}
*{box-sizing:border-box}
[hidden]{ display:none !important; }
html,body{ height:100%; }
html,body{
  margin:0;
  background:#151515;color:var(--ui-fg);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  -webkit-tap-highlight-color:transparent;
  -webkit-text-size-adjust:100%;
}
html{
  -webkit-user-select:none; user-select:none;
  -webkit-touch-callout:none;
}
input, textarea, [contenteditable="true"]{
  -webkit-user-select:text; user-select:text;
  -webkit-touch-callout:default;
}
*{ -webkit-user-drag:none; }
body{ overflow:hidden; }
.wrap{
  touch-action:pan-x pan-y;
  position:fixed; inset:0;
  z-index:10;
  pointer-events:none;
  margin:0 auto; max-width:980px;
  display:flex;flex-direction:column;gap:12px;
  padding:calc(14px + env(safe-area-inset-top, 0px))
          calc(14px + env(safe-area-inset-right, 0px))
          0
          calc(14px + env(safe-area-inset-left, 0px));
}
.wrap > *{ pointer-events:auto }
.toolbar{
  position:relative;
  display:flex; flex-direction:column;
  gap:8px;
  background:rgba(15,17,22,.80);
  -webkit-backdrop-filter:blur(22px) saturate(1.5);
  backdrop-filter:blur(22px) saturate(1.5);
  border:1px solid rgba(255,255,255,.09);
  border-radius:12px;
  padding:8px 10px;
  box-shadow:0 1px 0 rgba(255,255,255,.045) inset, 0 4px 9px rgba(0,0,0,.25);
}
.row{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:0; }
.toolbar .row + .row{ margin-top:2px; }
.lbl{font-size:14px;opacity:.85;margin:0 4px 0 0}
.val{font-size:12px;opacity:.75;min-width:44px;text-align:right}
.btn{
  appearance:none;border:1px solid var(--btn-border);
  background:var(--btn-bg);color:var(--ui-fg);
  padding:8px 10px;border-radius:8px;font-size:14px;line-height:1;
  cursor:pointer;user-select:none;
}
.btn.info{opacity:.75;pointer-events:none}
.btn:active{transform:translateY(1px)}
.btn.toggle[aria-pressed="true"]{outline:2px solid var(--accent);background:#222}
.btn[aria-expanded="true"]{outline:2px solid var(--accent);background:#222}
.at-end{margin-left:auto}
.btn.icon{ padding-inline:10px; }
.btn.icon svg{ width:1em; height:1em; display:block; }
.btn[disabled]{opacity:.45;pointer-events:none}
select{
  appearance:none;background:#181818;color:#fff;border:1px solid var(--btn-border);
  border-radius:8px;padding:7px 9px; font-size:14px;
}
input[type="range"]{
  height:26px;margin:0 4px;
  -webkit-appearance:none;background:transparent;cursor:pointer;
}
input[type="range"]::-webkit-slider-runnable-track{
  height:6px;background:#232323;border-radius:4px;border:1px solid #2a2a2a;
}
input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;margin-top:-8px;width:20px;height:20px;border-radius:50%;
  background:#fff;border:1px solid #888;box-shadow:0 0 0 2px #0003 inset;
}
input[type="range"]::-moz-range-track{height:6px;background:#232323;border:1px solid #2a2a2a;border-radius:4px}
input[type="range"]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#fff;border:1px solid #888}
.start{
  position:fixed;inset:0;display:none;place-items:center;
  background:rgba(0,0,0,.6);backdrop-filter:blur(4px);z-index:9999;
  padding:calc(12px + env(safe-area-inset-top,0px))
          calc(12px + env(safe-area-inset-right,0px))
          calc(12px + env(safe-area-inset-bottom,0px))
          calc(12px + env(safe-area-inset-left,0px));
}
.start.open{display:grid}
.card{
  width:min(92vw,520px);background:#131313;border:1px solid #262626;border-radius:14px;
  padding:14px;display:flex;flex-direction:column;gap:12px;
}
.card-bar{display:flex;justify-content:space-between;align-items:center}
.card .title{font-size:18px;font-weight:600}
.icon-btn{appearance:none;border:1px solid var(--btn-border);background:#1b1b1b;color:#fff;border-radius:8px;padding:8px 10px;cursor:pointer}
.sizes{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.size-btn{appearance:none;border:1px solid var(--btn-border);background:#181818;color:#fff;border-radius:10px;padding:12px 10px;cursor:pointer;text-align:center}
.size-btn:active{transform:translateY(1px)}
.dims{display:grid;grid-template-columns:1fr auto 1fr;gap:8px;align-items:end}
.dim{display:flex;flex-direction:column;gap:6px;min-width:0}
.dim span{font-size:12px;color:var(--muted,#9a9a9a)}
.dim input{
  appearance:none;-webkit-appearance:none;width:100%;box-sizing:border-box;
  border:1px solid var(--btn-border);background:#181818;color:#fff;
  border-radius:10px;padding:12px 10px;font:inherit;text-align:center;
}
.dim input:focus{outline:none;border-color:#3ea8ff}
.dim-swap{align-self:end;padding:12px 10px;line-height:1}
.cost{font-size:13px;color:var(--muted,#9a9a9a);text-align:center;min-height:1.2em}
.cost.over{color:#ff9c96}
.btn.primary{background:#1d4f7a;border-color:#2b6da6;flex:1;text-align:center;padding-block:12px}
.btn[disabled]{opacity:.45;cursor:not-allowed}
body[data-view="gallery"] .canvas-shell,
body[data-view="gallery"] .wrap{ display:none; }
body[data-view="canvas"] .gallery{ display:none; }
.gallery{
  touch-action:pan-x pan-y;
  position:fixed; inset:0; z-index:20;
  display:flex; flex-direction:column;
  background:#151515;          
  overflow:hidden;
}
.gal-bar{
  flex:0 0 auto;
  display:flex; align-items:center; gap:10px;
  border-bottom:1px solid rgba(255,255,255,.07);
  background:rgba(15,17,22,.86);
  -webkit-backdrop-filter:blur(22px) saturate(1.5);
  backdrop-filter:blur(22px) saturate(1.5);
  padding:calc(10px + env(safe-area-inset-top,0px))
          calc(14px + env(safe-area-inset-right,0px))
          10px
          calc(14px + env(safe-area-inset-left,0px));
}
.gal-title{ margin:0; font-size:19px; font-weight:600; letter-spacing:.01em;
  min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gal-actions{ margin-left:auto; display:flex; gap:8px; flex:0 0 auto; }
.gal-new{ flex:0 0 auto; padding-inline:16px; }
.gal-pick{ flex:0 0 auto; }
.gal-sel-bar{
  flex:0 0 auto;
  display:flex; gap:8px;
  border-top:1px solid rgba(255,255,255,.07);
  background:rgba(15,17,22,.86);
  -webkit-backdrop-filter:blur(22px) saturate(1.5);
  backdrop-filter:blur(22px) saturate(1.5);
  padding:10px calc(14px + env(safe-area-inset-right,0px))
          calc(10px + env(safe-area-inset-bottom,0px))
          calc(14px + env(safe-area-inset-left,0px));
}
.sel-act{ flex:1 1 0; text-align:center; padding-block:12px; }
.sel-act.danger{ color:#ff8d86; border-color:#5a2528; background:#2a1618; }
.tile-check{
  position:absolute; left:8px; top:8px; width:22px; height:22px;
  border-radius:50%; display:none; place-items:center;
  background:rgba(10,10,10,.75); border:1.5px solid rgba(255,255,255,.45);
  color:transparent; font-size:12px; line-height:1; pointer-events:none;
}
.gallery.selecting .tile-check{ display:grid; }
.tile.picked .tile-check{ background:var(--accent); border-color:var(--accent); color:#06283a; }
.tile.picked .tile-art{ border-color:var(--accent); outline:2px solid var(--accent); }
.gallery.selecting .tile-more{ visibility:hidden; }
.gallery.selecting .tile-name{ cursor:pointer; }
.gal-note,.gal-error{
  flex:0 0 auto;
  display:flex; align-items:flex-start; gap:10px;
  margin:10px calc(14px + env(safe-area-inset-right,0px)) 0 calc(14px + env(safe-area-inset-left,0px));
  padding:10px 12px; border-radius:10px;
  font-size:13px; line-height:1.45;
}
.gal-note{ background:#1b2330; border:1px solid #2b3a4d; color:#cfe2f5; }
.gal-error{ background:#3a1618; border:1px solid #7d2b2f; color:#ffd9d6; }
.gal-note-x{
  appearance:none; background:none; border:0; color:inherit; opacity:.7;
  font-size:18px; line-height:1; padding:0 2px; margin-left:auto; cursor:pointer;
}
.gal-scroll{
  touch-action:pan-y;
  flex:1 1 auto; min-height:0;
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  padding:14px calc(14px + env(safe-area-inset-right,0px))
          calc(20px + env(safe-area-inset-bottom,0px))
          calc(14px + env(safe-area-inset-left,0px));
}
.gal-build{
  position:absolute;
  right:calc(14px + env(safe-area-inset-right,0px));
  bottom:calc(8px + env(safe-area-inset-bottom,0px));
  z-index:1;
  font-size:11px; line-height:1;
  font-variant-numeric:tabular-nums;
  letter-spacing:.02em;
  color:rgba(255,255,255,.30);
  pointer-events:none;
}
.gallery.selecting .gal-build{ display:none; }
.gal-grid{
  display:grid; gap:16px 14px;
  grid-template-columns:repeat(auto-fill,minmax(132px,1fr));
  max-width:980px; margin:0 auto;
}
.tile{ position:relative; margin:0; display:flex; flex-direction:column; gap:7px; min-width:0; }
.tile-art{
  appearance:none; width:100%; aspect-ratio:1/1; padding:0;
  border:1px solid #262626; border-radius:12px; background:#141414;
  display:grid; place-items:center; overflow:hidden; cursor:pointer;
}
.tile-art:active{ transform:translateY(1px) }
.tile-art img{
  display:block; max-width:100%; max-height:100%;
  image-rendering:pixelated; image-rendering:crisp-edges;
  outline:1px solid rgba(255,255,255,.18); outline-offset:-1px;
}
.tile-cap{ display:flex; align-items:flex-start; gap:4px; min-width:0; }
.tile-text{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:2px; }
.tile-name,.tile-name-input{
  appearance:none; background:none; border:0; margin:0; padding:0;
  width:100%; font:inherit; font-size:13px; color:var(--ui-fg); text-align:left;
}
.tile-name{
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; cursor:text;
}
.tile-name-input{
  background:#181818; border:1px solid var(--accent); border-radius:6px;
  padding:2px 5px; margin:-3px -6px; width:calc(100% + 12px);
}
.tile-name-input:focus{ outline:none }
.tile-dims{ font-size:11px; color:#8b8b8b; }
.tile-more{
  appearance:none; background:none; border:0; flex:0 0 auto;
  color:#8b8b8b; font-size:17px; line-height:1; padding:0 4px; cursor:pointer;
}
.gal-empty{
  max-width:340px; margin:12vh auto 0; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:10px;
}
.gal-empty h2{ margin:0; font-size:17px; font-weight:600; }
.gal-empty p{ margin:0; font-size:13px; line-height:1.5; color:#8b8b8b; }
.gal-empty .btn{ margin-top:6px; padding:12px 20px; }
.gal-empty-art{
  width:104px; height:104px; border-radius:14px; border:1px solid #262626;
  background-color:#909090;
  background-image:
    linear-gradient(45deg,#a5a5a5 25%,transparent 25%,transparent 75%,#a5a5a5 75%),
    linear-gradient(45deg,#a5a5a5 25%,transparent 25%,transparent 75%,#a5a5a5 75%);
  background-size:26px 26px;
  background-position:0 0,13px 13px;
  opacity:.35;
}
.gal-sheet{
  position:absolute; inset:0; z-index:30;
  display:flex; align-items:flex-end; justify-content:center;
  background:rgba(0,0,0,.55);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  padding:12px calc(12px + env(safe-area-inset-right,0px))
          calc(12px + env(safe-area-inset-bottom,0px))
          calc(12px + env(safe-area-inset-left,0px));
}
.sheet-card{
  width:100%; max-width:420px;
  display:flex; flex-direction:column; gap:8px;
  background:#151515; border:1px solid #282828; border-radius:16px; padding:12px;
}
.sheet-title{ font-size:15px; font-weight:600; text-align:center; padding:4px 6px 0;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sheet-msg{ font-size:13px; line-height:1.45; color:#9a9a9a; text-align:center; padding:0 6px 4px; }
.sheet-btn{
  appearance:none; width:100%; font:inherit; font-size:15px; cursor:pointer;
  padding:13px 12px; border-radius:11px;
  border:1px solid var(--btn-border); background:#1f1f1f; color:var(--ui-fg);
}
.sheet-btn:active{ transform:translateY(1px) }
.sheet-btn.danger{ color:#ff8d86; border-color:#5a2528; background:#2a1618; }
.sheet-btn.cancel{ margin-top:4px; background:#141414; color:#bdbdbd; }
.canvas-shell{
  position:fixed; inset:0;
  z-index:0;
  -webkit-user-select:none; user-select:none; -webkit-touch-callout:none;
  overscroll-behavior:contain;
}
.stage{
  position:absolute; inset:0;
  overflow:visible;
  touch-action:none;
  border:none;border-radius:0;background:transparent;box-shadow:none;
}
canvas.layer{
  position:absolute;left:50%;top:50%;
  width:141.5%;height:141.5%;      
  transform:translate(-50%,-50%);
  display:block;image-rendering:pixelated;image-rendering:crisp-edges;touch-action:none;
  z-index:0;
}
#bg,#grid{pointer-events:none}
#paint{pointer-events:auto}
.stage, #stage, canvas.layer, #bg, #grid, #paint{
  -webkit-user-select:none; user-select:none;
  -webkit-touch-callout:none;
  -webkit-tap-highlight-color:transparent;
}
@media (max-width: 540px){
  .wrap{                       
    padding:calc(10px + env(safe-area-inset-top, 0px))
            calc(10px + env(safe-area-inset-right, 0px))
            0
            calc(10px + env(safe-area-inset-left, 0px));
  }
  .toolbar{gap:6px;padding:8px}
  .row{gap:6px}
  .btn{padding:7px 9px;font-size:13px}
  select{padding:7px 8px;font-size:13px}
  .sizes{grid-template-columns:repeat(3,1fr)}
  .gal-grid{ grid-template-columns:repeat(auto-fill,minmax(104px,1fr)); gap:14px 10px; }
  .gal-scroll{
    padding:12px calc(10px + env(safe-area-inset-right,0px))
            calc(18px + env(safe-area-inset-bottom,0px))
            calc(10px + env(safe-area-inset-left,0px));
  }
  .gal-bar{
    padding:calc(9px + env(safe-area-inset-top,0px))
            calc(10px + env(safe-area-inset-right,0px))
            9px
            calc(10px + env(safe-area-inset-left,0px));
  }
  .gal-note,.gal-error{
    margin:8px calc(10px + env(safe-area-inset-right,0px)) 0 calc(10px + env(safe-area-inset-left,0px));
  }
  .gal-sel-bar{
    gap:6px;
    padding:9px calc(10px + env(safe-area-inset-right,0px))
            calc(9px + env(safe-area-inset-bottom,0px))
            calc(10px + env(safe-area-inset-left,0px));
  }
  .sel-act{ padding-block:11px; }
  .gal-title{ font-size:17px; }
  .gal-pick{ padding-inline:9px; }
  .gal-new{ padding-inline:12px; }
}
.auth{
  position:fixed; inset:0; z-index:100;
  display:flex; align-items:center; justify-content:center;
  background:#151515;
  padding:calc(24px + env(safe-area-inset-top,0px)) 16px calc(24px + env(safe-area-inset-bottom,0px));
  overflow:auto;
}
.auth-card{
  width:100%; max-width:360px;
  display:flex; flex-direction:column; gap:12px;
  font-family:var(--font-ui);
}
.auth-mark{
  font-family:var(--font-cond); font-weight:800; font-style:italic;
  font-size:44px; line-height:1; letter-spacing:.01em; text-transform:uppercase;
  color:#f2f2f2;
}
.auth-lede{ margin:0 0 6px; font-size:14px; line-height:1.45; color:#9a9a9a; }
.auth-field{ display:flex; flex-direction:column; gap:6px; }
.auth-field span{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:#8b8b8b;
}
.auth-field input, .acct-input{
  appearance:none; width:100%;
  font:inherit; font-size:16px;          
  color:var(--ui-fg); background:#1b1b1b;
  border:1px solid #2e2e2e; border-radius:10px; padding:12px 12px;
}
.auth-field input:focus, .acct-input:focus{ outline:2px solid var(--accent); outline-offset:-1px; border-color:transparent; }
.auth-field input[name=code]{ font-family:var(--font-mono); letter-spacing:.12em; text-transform:uppercase; }
.auth-error, .auth-ok{ font-size:13px; line-height:1.45; border-radius:10px; padding:10px 12px; }
.auth-error{ background:#3a1618; border:1px solid #7d2b2f; color:#ffd9d6; }
.auth-ok{ background:#132a1c; border:1px solid #2b5a3b; color:#cdeed8; }
.auth-submit{ padding:14px 12px; font-size:15px; margin-top:4px; }
.auth-submit[disabled]{ opacity:.6; }
.auth-swap{
  appearance:none; background:none; border:0; padding:8px 0; cursor:pointer;
  font:inherit; font-size:13px; color:var(--accent); text-align:center;
}
.gal-account{ display:inline-flex; align-items:center; gap:7px; }
.gal-account .sync-dot{ width:8px; height:8px; border-radius:50%; background:#6b6b6b; flex:0 0 auto; }
.gal-account[data-sync="busy"] .sync-dot{ background:var(--accent); animation:sync-pulse 1s ease-in-out infinite alternate; }
.gal-account[data-sync="synced"] .sync-dot{ background:#4ade80; }
.gal-account[data-sync="pending"] .sync-dot,
.gal-account[data-sync="offline"] .sync-dot{ background:#f5b73b; }
.gal-account[data-sync="error"] .sync-dot,
.gal-account[data-sync="full"] .sync-dot,
.gal-account[data-sync="signed-out"] .sync-dot{ background:#f87171; }
@keyframes sync-pulse{ from{ opacity:.35 } to{ opacity:1 } }
.gal-account-label{ font-variant-numeric:tabular-nums; white-space:nowrap; }
@media (max-width:520px){ .gal-account-label{ display:none; } .gal-account{ padding-inline:12px; } }
.acct-panel{ z-index:40; }
.acct-panel .sheet-card{ max-height:80%; overflow:auto; }
.acct-form{ display:flex; flex-direction:column; gap:10px; }
.acct-row{ display:flex; gap:8px; }
.acct-row .acct-input{ flex:1 1 auto; min-width:0; font-size:15px; padding:10px 12px; }
.acct-list{ display:flex; flex-direction:column; gap:6px; }
.acct-item{ display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:10px; background:#1b1b1b; border:1px solid #262626; }
.acct-item.fresh{ border-color:var(--accent); }
.acct-code{
  appearance:none; background:none; border:0; padding:0; cursor:pointer;
  font-family:var(--font-mono); font-size:14px; letter-spacing:.08em; color:var(--ui-fg);
}
.acct-code[data-copied]::after{ content:' copied'; color:var(--accent); letter-spacing:0; font-size:11px; }
.acct-muted{ font-size:12px; color:#8b8b8b; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1 1 auto; }
.acct-revoke{ appearance:none; background:none; border:0; color:#ff8d86; font:inherit; font-size:12px; cursor:pointer; }
.acct-row .btn{ flex:0 0 auto; padding-block:10px; }