/* =============================================================================
   app-refresh.css — refined-dark redesign of the core app shell + Humanizer.
   Loaded LAST so it evolves style.css / redesign.css without replacing them.
   Scope: tokens, sidebar (grouped), Humanizer workspace (buttons, usage, flow).
   Revert = remove the <link> to this file. Preserves all app.js hooks.
   ============================================================================= */

/* ---- 1. Refined token system (evolves the current dark palette) ------------ */
:root{
  --bg:#090c14;  --bg2:#0c1019;  --panel:#141926;  --panel2:#1b2233;
  --line:#1f2735; --line2:#313d54;
  --ink:#e9edf6;  --mut:#8b96ab;  --faint:#59647a;
  --acc:#7c83ff;  --acc2:#a371f7;
  --ok:#3fb950;   --warn:#d8a234; --bad:#f0564b;
  --r-sm:10px;    --r:14px;       --r-lg:18px;

  --acc-soft:rgba(124,131,255,.12);
  --acc-line:rgba(124,131,255,.42);
  --acc-grad:linear-gradient(135deg,#7c83ff 0%,#9a7bff 100%);
  --acc-glow:0 8px 26px -10px rgba(124,131,255,.75);
  --focus-ring:0 0 0 3px rgba(124,131,255,.28);
  --elev-1:0 1px 2px rgba(0,0,0,.35);
  --elev-2:0 10px 30px -14px rgba(0,0,0,.7);
}
body.light{
  --bg:#f5f7fc; --bg2:#eef1f8; --panel:#ffffff; --panel2:#f2f5fb;
  --line:#e5e9f2; --line2:#d3dae8;
  --ink:#151b28; --mut:#5a6577; --faint:#96a0b3;
  --acc-soft:rgba(124,131,255,.10);
  --acc-glow:0 8px 24px -12px rgba(124,131,255,.55);
  --elev-2:0 12px 30px -16px rgba(30,40,70,.28);
}

/* Ambient depth: a faint accent aura behind the whole app */
body{
  background:
    radial-gradient(1100px 620px at 78% -8%, rgba(124,131,255,.10), transparent 60%),
    radial-gradient(900px 520px at -6% 108%, rgba(163,113,247,.08), transparent 55%),
    var(--bg) !important;
}
body.light{
  background:
    radial-gradient(1000px 560px at 80% -10%, rgba(124,131,255,.10), transparent 60%),
    var(--bg) !important;
}

/* ---- 2. Sidebar — grouped & decluttered ----------------------------------- */
.sidebar{
  background:linear-gradient(180deg, rgba(20,25,38,.72), rgba(12,16,25,.72)) !important;
  backdrop-filter:blur(14px);
  border-right:1px solid var(--line) !important;
}
body.light .sidebar{
  background:linear-gradient(180deg, rgba(255,255,255,.86), rgba(246,248,252,.8)) !important;
}
.side-brand{padding:6px 8px 16px !important;border-bottom:1px solid var(--line) !important}

/* group labels (inert divs — app.js ignores them) */
.nav-group-label{
  font-size:10.5px; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  color:var(--faint); padding:14px 12px 6px; user-select:none;
}
.nav-group-label:first-of-type{padding-top:6px}

.nav{gap:2px}
.nav-item{
  position:relative; border-radius:var(--r-sm) !important;
  padding:9px 12px !important; color:var(--mut) !important;
  font-weight:500; transition:background .15s, color .15s;
}
.nav-item:hover{background:var(--panel2) !important; color:var(--ink) !important}
.nav-item.active{
  background:var(--acc-soft) !important; color:var(--ink) !important; font-weight:600;
}
.nav-item.active::before{
  content:""; position:absolute; left:-2px; top:50%; transform:translateY(-50%);
  height:56%; width:3px; border-radius:3px; background:var(--acc-grad);
  box-shadow:var(--acc-glow);
}
.nav-item .nav-ic{opacity:.9}
.nav-item.active .nav-ic{color:var(--acc)}
.nav-sep{margin:10px 8px !important; border-top:1px solid var(--line) !important}

.side-foot{border-top:1px solid var(--line); margin-top:8px; padding-top:10px}
.side-legal a{color:var(--faint)} .side-legal a:hover{color:var(--mut)}

/* ---- 3. Content / view rhythm --------------------------------------------- */
.content{padding-top:6px}
.view-title{letter-spacing:-.01em}
.workspace{gap:20px}

/* ---- 4. Panes — clearer input -> output ----------------------------------- */
.pane{
  background:linear-gradient(180deg, var(--panel), var(--bg2)) !important;
  border:1px solid var(--line) !important; border-radius:var(--r-lg) !important;
  box-shadow:var(--elev-2);
}
/* .pane:focus-within accent removed — no highlight on focus */
.pane-head{
  padding:0 16px !important; border-bottom:1px solid var(--line) !important;
  gap:10px; height:64px; min-height:64px; box-sizing:border-box; align-items:center;
}
/* keep the tall output cluster (ring + turnitin chip) from stretching the head */
.pane-head .head-ring, .pane-head .score-chip{align-self:center}
.pane-title{
  font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--mut);
}

/* Output "verdict" cluster: ring + Turnitin chip read as one unit */
.head-ring{filter:drop-shadow(0 2px 6px rgba(0,0,0,.35))}
.score-chip{
  background:var(--panel2) !important; border:1px solid var(--line2) !important;
  border-radius:999px !important; padding:5px 11px !important;
}

/* ---- 5. Editors — comfortable + tactile focus ----------------------------- */
.editor{
  font-size:15px !important; line-height:1.7 !important; padding:16px 18px !important;
}
/* no focus highlight on the editors — keep it clean while typing */
.editor:focus, textarea.editor:focus, #gptzeroInput:focus,
.ta-wrap textarea.editor:focus, .editor.result:focus{
  outline:none !important; box-shadow:none !important; border-color:transparent !important;
}
.editor .placeholder{color:var(--faint); font-style:normal}

/* ---- 6. Usage meter — legible at a glance --------------------------------- */
.usage-bar{
  margin:14px 16px 0 !important; padding:0 12px !important;
  background:var(--panel2) !important; border:1px solid var(--line) !important;
  border-radius:var(--r-sm) !important; gap:12px !important;
  font-size:12.5px; color:var(--mut);
  min-height:42px; box-sizing:border-box; align-items:center !important;
}
.usage-bar b{color:var(--ink); font-weight:700}
#usageHumanize:not(:empty){
  margin-left:auto; padding:2px 9px; border-radius:999px;
  background:var(--acc-soft); color:var(--acc); font-weight:600; font-size:11.5px;
}
#usageReset{color:var(--faint)}

/* ---- 7. Buttons — one obvious primary, quieter rest ----------------------- */
.pane-foot{padding:12px 16px !important; gap:10px !important; border-top:1px solid var(--line) !important}

.btn{border-radius:var(--r-sm) !important; font-weight:600; transition:.15s}
.btn-primary{
  background:var(--acc-grad) !important; border:0 !important; color:#fff !important;
  box-shadow:var(--acc-glow); padding:11px 20px !important; font-size:14.5px;
}
.btn-primary:hover{filter:brightness(1.07); transform:translateY(-1px)}
.btn-primary:active{transform:translateY(0)}

.btn-ghost{
  background:var(--panel2) !important; border:1px solid var(--line2) !important;
  color:var(--mut) !important;
}
.btn-ghost:hover{color:var(--ink) !important; border-color:var(--acc-line) !important}

/* Clear = quiet icon, pulled out of the primary action row visually */
.btn-clear{
  background:transparent !important; border:1px solid var(--line) !important;
  color:var(--faint) !important; margin-right:auto;
}
.btn-clear:hover{color:var(--bad) !important; border-color:var(--bad) !important; background:transparent !important}

.btn-stop{
  background:rgba(240,86,75,.12) !important; border:1px solid rgba(240,86,75,.4) !important;
  color:#ff9aa2 !important;
}
.btn-sm{padding:7px 12px !important; font-size:12.5px}
.btn-green{color:var(--ok) !important}
.btn-green:hover{border-color:var(--ok) !important; color:var(--ok) !important}

/* Output refine row: legend + secondary actions, tidy and lighter */
.foot-legend{gap:12px !important; align-items:center; flex-wrap:wrap}
.foot-legend .lg{color:var(--faint); font-size:12px}
.foot-legend .btn{margin-left:2px}
.foot-legend .btn-copy, #btnCopy{margin-left:auto}

/* ---- 8. Model toggle — crisp segmented control ---------------------------- */
.model-toggle{
  background:var(--panel2) !important; border:1px solid var(--line2) !important;
  border-radius:var(--r-sm) !important; padding:2px !important; gap:2px;
}
.model-btn{border:0 !important; border-radius:8px !important; padding:6px 12px !important; color:var(--mut) !important}
.model-btn.active{background:var(--acc-grad) !important; color:#fff !important; box-shadow:var(--elev-1)}

/* ---- 9. Small niceties ----------------------------------------------------- */
.theme-toggle{border-radius:var(--r-sm) !important}
.score-chip .tn-word{font-weight:600}
::selection{background:rgba(124,131,255,.32)}

/* ---- 10. Roll-out: refine components across the other views --------------- */

/* Unified card surface (panel gradient) + depth on the card-like components */
.plan, .dc-perk, .faq-item, .tno-upcard, .tn-scan-card, .modal-card, .chat-card{
  background:linear-gradient(180deg, var(--panel), var(--bg2)) !important;
  border:1px solid var(--line) !important;
}

/* Pricing */
.plan{border-radius:var(--r-lg) !important; box-shadow:var(--elev-2); transition:transform .18s, border-color .18s}
.plan:hover{transform:translateY(-3px); border-color:var(--line2) !important}
.plan.featured{
  border-color:var(--acc-line) !important;
  box-shadow:0 0 0 1px var(--acc-line), 0 22px 50px -22px rgba(124,131,255,.55) !important;
}
.plan-badge{background:var(--acc-grad) !important; border:0 !important; color:#fff !important; box-shadow:var(--acc-glow)}
.plan-price{letter-spacing:-1.5px}
.plan-btn{width:100%; justify-content:center}
.tn-scan-card{border-radius:var(--r-lg) !important; box-shadow:var(--elev-2)}

/* Upload zones (Turnitin / PowerPoint) */
.upload-zone{border:1.5px dashed var(--line2) !important; border-radius:var(--r) !important; transition:border-color .16s, background .16s}
.upload-zone:hover, .upload-zone.drag{border-color:var(--acc) !important; background:var(--acc-soft) !important}
.upz-title span{color:var(--acc)}

/* Numbered steps */
.tno-step-n{background:var(--acc-grad) !important; color:#fff !important; box-shadow:var(--acc-glow)}

/* FAQ */
.faq-item{border-radius:var(--r) !important; transition:border-color .15s}
.faq-item:hover{border-color:var(--line2) !important}
.faq-item[open]{border-color:var(--acc-line) !important; box-shadow:var(--elev-1)}
.faq-item[open] summary, .faq-item summary:hover{color:var(--acc) !important}
.faq-tab.active{color:var(--ink) !important; border-bottom-color:var(--acc) !important}

/* Discord */
.dc-perk{border-radius:var(--r-lg) !important; transition:transform .18s, border-color .18s}
.dc-perk:hover{border-color:var(--acc-line) !important; transform:translateY(-3px)}

/* Modals — deeper backdrop + card */
.modal-overlay{background:rgba(6,8,14,.62) !important; backdrop-filter:blur(6px)}
.modal-card{border-radius:var(--r-lg) !important; box-shadow:0 30px 80px -30px rgba(0,0,0,.85) !important}

/* Form inputs (auth/reset) keep a subtle focus — this is NOT the big editors */
.auth-input, .code-input{border-radius:var(--r-sm) !important; transition:border-color .15s, box-shadow .15s}
.auth-input:focus, .code-input:focus{border-color:var(--acc-line) !important; box-shadow:var(--focus-ring); outline:none}
.auth-tab.active, .faq-tab.active{font-weight:600}
.gbtn{border-radius:var(--r-sm) !important}

/* Chat send buttons */
.chat-send{background:var(--acc-grad) !important; border:0 !important; color:#fff !important}

/* Changelog */
.changelog{gap:8px}

@media (max-width:820px){
  .workspace{gap:14px}
  .btn-primary{padding:11px 16px !important}
}