:root{
  --bg:#0d0f14; --panel:#151922; --panel2:#1b2029; --line:#262d3a;
  --ink:#e6e9f0; --dim:#8b95a8; --dimmer:#5d677a;
  --hot:#ff5d3b; --warm:#ffa53b; --cool:#4db8ff; --good:#3ddc97;
  --star:#ffd23b; --danger:#ff6b6b;
  --mono:ui-monospace,"Cascadia Mono",Consolas,monospace;
  --sans:"Segoe UI",system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box}
/* A class rule with display:flex beats the browser's own [hidden]{display:none},
   so el.hidden = true marked the filter controls hidden without hiding them.
   This has to outrank every layout rule in the file. */
[hidden]{display:none!important}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:14px/1.5 var(--sans);
     overflow:hidden}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:var(--panel2);border:1px solid var(--line);
       border-radius:7px;padding:7px 12px;transition:.12s}
button:hover:not(:disabled){background:#232a36;border-color:#38445a}
button:disabled{opacity:.45;cursor:not-allowed}
button.primary{background:var(--hot);border-color:var(--hot);color:#fff;font-weight:600}
button.primary:hover:not(:disabled){background:#ff714f;border-color:#ff714f}
input[type=text],input[type=url],select,textarea{background:#0b0e13;
  border:1px solid var(--line);border-radius:7px;padding:7px 10px;width:100%}
input:focus,select:focus,textarea:focus{outline:none;border-color:#3c6ea5}
a{color:var(--cool)}

/* ---------------------------------------------------------------- layout -- */
#app{display:flex;flex-direction:column;height:100vh}
header{display:flex;align-items:center;gap:14px;padding:12px 18px;
       background:var(--panel);border-bottom:1px solid var(--line);flex:none}
.brand{font-weight:800;letter-spacing:.12em;font-size:15px}
.brand em{color:var(--hot);font-style:normal}
.stat{font:11px var(--mono);color:var(--dim)}
.stat b{color:var(--ink)}
.grow{flex:1}

#bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:9px 18px;
     background:var(--panel);border-bottom:1px solid var(--line);flex:none}
.ctl{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--dim)}
.ctl input[type=range]{width:104px;accent-color:var(--hot)}
.ctl input[type=text]{width:180px;padding:5px 9px}
label.chk{display:flex;align-items:center;gap:5px;cursor:pointer;user-select:none}
label.chk input{accent-color:var(--hot)}

main{flex:1;display:flex;min-height:0}
#feed{flex:1;overflow-y:auto;padding:14px 18px 60px}
/* Do NOT transition width here. Animating the width of a flex item feeds the
   animated value back into flex layout every frame and the panel sticks at
   ~1px instead of landing on its target -- reproduced in this browser, fixed
   by animating the contents' opacity instead, which touches no layout. */
#side{width:0;flex:none;overflow:hidden;background:var(--panel);
      border-left:1px solid var(--line)}
#side.open{width:min(620px,52vw);overflow-y:auto}

/* ----------------------------------------------------------------- cards -- */
.card{background:var(--panel);border:1px solid var(--line);border-radius:10px;
      padding:9px 12px;margin-bottom:7px;display:flex;gap:12px;align-items:center}
.card:hover{border-color:#38445a}
.card.sel{border-color:var(--hot);box-shadow:0 0 0 1px var(--hot) inset}
.score{font:700 17px var(--mono);min-width:40px;text-align:center;
       padding:6px 0;border-radius:7px;background:#0b0e13;flex:none;align-self:flex-start}
.s-hi{color:var(--hot)} .s-mid{color:var(--warm)} .s-lo{color:var(--dimmer)}
.body{flex:1;min-width:0}
.title{font-size:14.5px;font-weight:600;line-height:1.35;margin-bottom:5px;
       cursor:pointer}
.title:hover{color:var(--warm)}
.meta{display:flex;gap:8px;flex-wrap:wrap;align-items:center;
      font:11px var(--mono);color:var(--dimmer)}
.chip{background:#0b0e13;border:1px solid var(--line);border-radius:20px;
      padding:1px 8px;color:var(--dim)}
.chip.flag{border-color:#5a3a3a;color:#d98a8a}
.why{margin-top:7px;font-size:12px;color:var(--dim);display:none}
.why.show{display:block}
.why ul{margin:4px 0 0;padding-left:16px}
.why li{margin:2px 0}
/* A column of four buttons was forcing 144px cards around 42px of content.
   A row keeps the card as tall as its text. */
.acts{display:flex;flex-direction:row;gap:5px;flex:none;align-items:center}
.acts button{padding:4px 9px;font-size:11px;white-space:nowrap}
.acts .star{font-size:14px;line-height:1;padding:3px 7px}
.star{color:var(--dimmer)}
.star.on{color:var(--star)}
.empty{text-align:center;color:var(--dimmer);padding:56px 20px;font-size:13px}
.empty b{color:var(--dim)}

/* ------------------------------------------------------------------ side -- */
#side .pad{padding:16px 18px 60px;opacity:0;transition:opacity .18s ease}
#side.open .pad{opacity:1}
#side h2{font-size:16px;margin:0 0 4px;line-height:1.35}
.read{background:#0b0e13;border-left:3px solid var(--hot);padding:9px 12px;
      border-radius:0 7px 7px 0;font-size:13px;color:#cdd4e2;margin:12px 0}
.sec{margin-top:20px}
.sec h3{font:600 11px var(--sans);letter-spacing:.14em;text-transform:uppercase;
        color:var(--dimmer);margin:0 0 9px}
.slots{display:flex;flex-wrap:wrap;gap:6px}
.slot{font:11px var(--mono);background:#0b0e13;border:1px solid var(--line);
      border-radius:6px;padding:3px 8px}
.slot b{color:var(--warm);font-weight:400}

.angle{background:var(--panel2);border:1px solid var(--line);border-radius:9px;
       padding:11px 12px;margin-bottom:9px}
.angle-h{display:flex;align-items:center;gap:9px;margin-bottom:8px}
.angle-h .nm{font-weight:600;font-size:13.5px}
.fit{flex:none;width:52px;height:5px;background:#0b0e13;border-radius:3px;overflow:hidden}
.fit i{display:block;height:100%;background:var(--hot)}
.panel-row{display:grid;grid-template-columns:130px 1fr;gap:8px;margin-bottom:5px;
           align-items:start}
.panel-row .lbl{font:11px var(--mono);color:var(--dimmer);padding-top:7px}
.panel-row textarea{resize:vertical;min-height:34px;font-size:12.5px;padding:6px 8px}
.note{font-size:11.5px;color:var(--dimmer);margin-top:7px;font-style:italic}
.angle-acts{display:flex;gap:6px;margin-top:8px}
.angle-acts button{font-size:11px;padding:4px 9px}

#composer canvas{width:100%;background:#000;border-radius:8px;display:block;
                 border:1px solid var(--line)}
.crow{display:flex;gap:8px;align-items:center;margin-top:8px}
.crow label{font:11px var(--mono);color:var(--dimmer);flex:none;width:52px}

/* ------------------------------------------------------------- scan panel -- */
#scan{position:fixed;right:16px;bottom:16px;width:330px;max-height:52vh;
      background:var(--panel);border:1px solid var(--line);border-radius:11px;
      padding:12px 14px;display:none;overflow-y:auto;z-index:40;
      box-shadow:0 12px 40px rgba(0,0,0,.55)}
#scan.show{display:block}
#scan h4{margin:0 0 8px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;
         color:var(--dim)}
.prog{height:5px;background:#0b0e13;border-radius:3px;overflow:hidden;margin-bottom:9px}
.prog i{display:block;height:100%;background:var(--hot);transition:width .25s}
.ev{display:flex;gap:7px;font:11px var(--mono);padding:2px 0;align-items:baseline}
.ev .ok{color:var(--good)} .ev .bad{color:var(--danger)}
.ev .lbl{flex:1;color:var(--dim);white-space:nowrap;overflow:hidden;
         text-overflow:ellipsis}
.toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);
       background:var(--panel2);border:1px solid var(--line);border-radius:8px;
       padding:9px 16px;font-size:13px;z-index:60;opacity:0;transition:.2s;
       pointer-events:none}
.toast.show{opacity:1}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:#2a3140;border-radius:5px}
::-webkit-scrollbar-track{background:transparent}

/* -------------------------------------------------------------- templates -- */
#viewtabs{display:flex;gap:2px;background:#0b0e13;border:1px solid var(--line);
          border-radius:8px;padding:2px}
#viewtabs button{border:none;background:transparent;padding:5px 14px;font-size:12.5px;
                 color:var(--dim);border-radius:6px}
#viewtabs button.on{background:var(--panel2);color:var(--ink);font-weight:600}

.tgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px}
.tcard{background:var(--panel);border:1px solid var(--line);border-radius:9px;
       overflow:hidden;cursor:pointer;transition:.12s}
.tcard:hover{border-color:var(--hot);transform:translateY(-2px)}
.tcard img{width:100%;height:132px;object-fit:cover;display:block;background:#0b0e13}
.tname{font-size:12.5px;font-weight:600;padding:7px 9px 3px;line-height:1.25;
       white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tmeta{display:flex;gap:4px;flex-wrap:wrap;padding:0 9px 9px;font:10px var(--mono)}
.tmeta .chip{padding:1px 6px}

/* the "pull a funny line" picker */
.pick{background:#0b0e13;border:1px solid var(--line);border-radius:7px;
      padding:6px 9px;margin-top:5px;font-size:12.5px;cursor:pointer;
      display:flex;gap:7px;align-items:baseline}
.pick:hover{border-color:var(--hot);background:#12161d}
.pick .chip{flex:none;font:10px var(--mono);color:var(--warm)}
#c-panels .crow input{font-size:13px}
#composer select{flex:1}
.pick .src{margin-left:auto;flex:none;font:10px var(--mono);color:var(--dimmer)}
.chip.exact{border-color:var(--hot);color:var(--hot)}
#cv{touch-action:none}
#c-boxtools button{font-size:11px;padding:4px 9px}

/* ---------------------------------------------------------------- trending -- */
.card.trend .body{min-width:0}
.reply{margin-top:8px;background:#0b0e13;border-left:3px solid var(--good);
       border-radius:0 7px 7px 0;padding:7px 10px}
.reply-h{font-size:12px;color:var(--dim);margin-bottom:4px}
.reply-h b{color:var(--good)}
.reply-l{font-size:12.5px;color:#cdd4e2;display:flex;gap:8px;padding:1px 0}
.reply-l span{flex:none;min-width:112px;font:10.5px var(--mono);color:var(--dimmer)}

/* --------------------------------------------------------------- my photos -- */
#dropzone{border:2px dashed var(--line);border-radius:11px;padding:18px;
          margin-bottom:12px;text-align:center;cursor:pointer;transition:.14s;
          background:#0b0e13}
#dropzone:hover,#dropzone.over{border-color:var(--hot);background:#12161d}
#dropzone b{display:block;font-size:14px;color:var(--ink);margin-bottom:3px}
#dropzone span{font-size:12px;color:var(--dimmer)}
#dropzone em{font-style:normal;color:var(--warm)}
.tcard{position:relative}
.tcard .b-del{position:absolute;top:5px;right:5px;width:22px;height:22px;padding:0;
              line-height:1;font-size:15px;border-radius:6px;opacity:0;
              background:rgba(10,12,16,.85);border-color:#5a3a3a;color:#ff8a8a}
.tcard:hover .b-del{opacity:1}
.tcard .b-del:hover{background:var(--danger);color:#fff;border-color:var(--danger)}
#c-imagetools{margin-top:10px}
#c-imagetools button.wide{flex:1;font-weight:600;border-color:#4a5a72}
#c-imagetools button.wide:hover{border-color:var(--hot);color:var(--hot)}
#c-editwrap{flex:none;font-size:11.5px;color:var(--dim);background:#0b0e13;
            border:1px solid var(--line);border-radius:7px;padding:5px 10px}
#c-editwrap:hover{border-color:var(--hot);color:var(--hot)}

/* ------------------------------------------------------------- narrow feed --
   With the remix panel open on a smaller screen the feed column gets thin, and
   a row of four action buttons left the title about 60px to wrap into -- one
   word per line. Below this width the card stacks instead. */
@media (max-width: 1250px){
  #side.open{width:min(560px,50vw)}
  .card{flex-wrap:wrap}
  .card .body{flex:1 1 100%;order:2}
  .card .score{order:1}
  .card .acts{order:3;flex:1 1 100%;justify-content:flex-end;margin-top:4px}
}
@media (max-width: 900px){
  #side.open{width:100%;position:absolute;right:0;top:0;bottom:0;z-index:30}
}

/* ------------------------------------------------------------ public site -- */
a.quiet{color:var(--dimmer);font-size:11.5px;text-decoration:none}
a.quiet:hover{color:var(--warm);text-decoration:underline}
#bar .ctl input[type=text]{width:260px}

/* ===========================================================================
   PRO + ADS
   Appended, not woven in. Nothing above this line was changed -- in particular
   #side keeps its layout exactly as it was (a width transition there collapses
   the panel to 0.94px; see the desktop app's HANDOFF).
   =========================================================================== */

#btn-pro{background:transparent;border:1px solid var(--warm);color:var(--warm);
         border-radius:6px;padding:5px 12px;font-size:12px;font-weight:600;
         letter-spacing:.04em;cursor:pointer}
#btn-pro:hover{background:var(--warm);color:#1a1206}
body.is-pro #btn-pro{border-color:var(--good);color:var(--good)}
body.is-pro #btn-pro:hover{background:var(--good);color:#04140d}

/* A gated control still looks like a control -- it is dimmed, not hidden, so
   the visitor can see what Pro would give them rather than wondering why the
   toolbar looks sparse. */
.pro-locked{position:relative;opacity:.62}
.pro-locked:hover{opacity:.85}
.pro-tag{display:inline-block;margin-left:6px;padding:1px 5px;border-radius:4px;
         background:var(--warm);color:#1a1206;font-size:9px;font-weight:800;
         letter-spacing:.08em;vertical-align:middle;pointer-events:none}

#pro-modal{position:fixed;inset:0;background:rgba(6,8,12,.72);z-index:60;
           display:flex;align-items:center;justify-content:center;padding:20px}
.pro-card{background:var(--panel);border:1px solid var(--line);border-radius:12px;
          padding:22px;max-width:430px}
.pro-card h3{margin:0 0 8px;font-size:17px;color:var(--ink)}
.pro-card p{font-size:13.5px;line-height:1.6;color:var(--dim);margin:0 0 10px}
.pro-card .pro-what{color:var(--dimmer);font-size:12.5px;font-style:italic}
.pro-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px;align-items:center}
.pro-actions .primary{background:var(--warm);color:#1a1206;border:0;border-radius:6px;
                      padding:8px 14px;font-size:13px;font-weight:600;
                      text-decoration:none;cursor:pointer}
.pro-actions button{background:transparent;border:1px solid var(--line);
                    color:var(--dim);border-radius:6px;padding:8px 12px;
                    font-size:13px;cursor:pointer}
.pro-actions button:hover{color:var(--ink);border-color:var(--dimmer)}

/* The ad slot lives at the end of the template column and never inside #side.
   An ad beside a canvas someone is dragging boxes on breaks AdSense's own
   placement policy and is obnoxious besides. */
#ad-slot{margin:18px 8px 8px;padding-top:12px;border-top:1px solid var(--line);
         min-height:100px}
.ad-label{font-size:10px;letter-spacing:.1em;text-transform:uppercase;
          color:var(--dimmer);margin-bottom:6px}
.ad-label a{color:var(--dimmer);text-decoration:underline}
.ad-label a:hover{color:var(--warm)}
body.is-pro #ad-slot{display:none}

/* Watermark notice — sits over the composer canvas so a free visitor learns
   about the mark BEFORE they download, not after. Removed entirely once
   entitled (a licence, or an ad-earned pass). */
#wm-note{margin:-2px 0 8px;padding:6px 10px;border:1px solid var(--line);
         border-top:0;border-radius:0 0 8px 8px;background:var(--panel);
         color:var(--dim);font-size:11px;letter-spacing:.02em;text-align:center}
#wm-note b{color:var(--warm)}
#wm-note a{color:var(--cool);text-decoration:underline}
body.is-pro #wm-note,body.is-rewarded #wm-note{display:none}

/* ---------------------------------------------------------------------------
   NARROW SCREENS
   The header packs a brand, two view tabs, a stat line and the Pro button onto
   one row. Below ~560px that stops fitting: the stat wraps to three lines and
   shoves "Get Pro" past the right edge, where it cannot be tapped. The stat is
   the only genuinely optional item, so it goes first.
   --------------------------------------------------------------------------- */
@media (max-width: 560px) {
  header .stat{display:none}
  header{gap:8px;padding:8px 10px}
  .brand{font-size:13px;white-space:nowrap}
  #btn-pro{padding:5px 10px;font-size:11px;white-space:nowrap;flex:0 0 auto}
  #viewtabs button{padding:5px 9px;font-size:12px}
  /* The link row is the site's navigation on mobile - let it wrap rather than
     clip, and give the targets room to be tapped. */
  #bar{flex-wrap:wrap;row-gap:6px}
  #bar .quiet{padding:3px 0}
}

/* Visitor counter. Deliberately quiet - it is a sign of life, not a headline,
   and a big number shouting at a first-time visitor is worse than no number. */
.visits{font-size:11px;color:var(--dimmer);letter-spacing:.04em;
        margin-left:10px;white-space:nowrap}
@media (max-width: 560px){ .visits{margin-left:0} }