/* redaksia.mcntv.al — newsroom AI-text detector
   Light-first, with automatic dark mode. No external assets (CSP: 'self'). */

:root{
  --bg:#f6f7f9;
  --surface:#ffffff;
  --surface2:#f2f4f7;
  --line:#e3e7ed;
  --line2:#cfd6e0;
  --tx:#141922;
  --tx2:#5a6675;
  --tx3:#8a95a5;
  --acc:#1f5fd0;
  --acc-soft:#eaf1fd;
  --green:#1a8f4a; --green-bg:#e7f6ec;
  --lime:#5f9412;  --lime-bg:#eef7e0;
  --amber:#b07000; --amber-bg:#fdf2dc;
  --orange:#c25a10;--orange-bg:#fdeddf;
  --red:#c8262c;   --red-bg:#fdeaea;
  --shadow:0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.04);
  --shadow-lg:0 4px 16px rgba(16,24,40,.08);
  --r:12px; --r-sm:8px;
  --track:#e6eaf0;
}

@media (prefers-color-scheme: dark){
  :root{
    --bg:#0f1319;
    --surface:#161b23;
    --surface2:#1c222c;
    --line:#262e3a;
    --line2:#333d4c;
    --tx:#e7edf5;
    --tx2:#9dabbd;
    --tx3:#6d7b8d;
    --acc:#5c9bff;
    --acc-soft:#16233a;
    --green:#4ade80; --green-bg:#12291c;
    --lime:#a3e635;  --lime-bg:#1e2812;
    --amber:#fbbf24; --amber-bg:#2c2210;
    --orange:#fb923c;--orange-bg:#2e1d10;
    --red:#f87171;   --red-bg:#2e1416;
    --shadow:0 1px 2px rgba(0,0,0,.4);
    --shadow-lg:0 6px 24px rgba(0,0,0,.45);
    --track:#232b37;
  }
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--tx);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:15.5px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--acc);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px;border-radius:4px}

.wrap{max-width:1060px;margin:0 auto;padding:0 22px 72px}

/* ---------- header ---------- */
header.top{
  background:var(--surface);border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:20;
}
header.top .inner{
  max-width:1060px;margin:0 auto;padding:0 22px;
  display:flex;align-items:center;gap:22px;min-height:58px;
}
.brand{display:flex;align-items:center;gap:10px;font-weight:650;letter-spacing:-.01em}
.brand .mark{
  width:28px;height:28px;border-radius:7px;flex:0 0 28px;
  background:linear-gradient(135deg,var(--acc),#7b3fe4);
  color:#fff;display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:700;letter-spacing:-.02em;
}
.brand b{font-weight:650}
.brand span{color:var(--tx3);font-weight:450;font-size:13px}
nav{margin-left:auto;display:flex;gap:4px;align-items:center}
nav a{
  color:var(--tx2);font-size:14px;font-weight:500;
  padding:7px 12px;border-radius:var(--r-sm);
}
nav a:hover{background:var(--surface2);color:var(--tx);text-decoration:none}
nav a.on{background:var(--acc-soft);color:var(--acc);font-weight:600}
.navsep{width:1px;height:22px;background:var(--line);margin:0 6px}
button.link{
  background:none;border:0;color:var(--tx2);cursor:pointer;font:inherit;
  font-size:14px;padding:7px 10px;border-radius:var(--r-sm);
}
button.link:hover{background:var(--surface2);color:var(--tx)}
.status{font-size:12.5px;color:var(--tx3);display:flex;align-items:center;gap:6px}
.dot{width:7px;height:7px;border-radius:50%;background:var(--green);flex:0 0 7px}
.dot.off{background:var(--tx3)}

/* ---------- headings ---------- */
h1{font-size:25px;line-height:1.25;letter-spacing:-.02em;margin:30px 0 6px;font-weight:680}
h2{font-size:16px;letter-spacing:-.01em;margin:0 0 12px;font-weight:650}
.sub{color:var(--tx2);font-size:14.5px;margin:0 0 22px;max-width:70ch}

/* ---------- cards ---------- */
.card{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);padding:20px;box-shadow:var(--shadow);
}
.card+.card{margin-top:16px}
.card.flush{padding:0;overflow:hidden}
.card h2:first-child{margin-top:0}

/* ---------- forms ---------- */
label{display:block;font-size:13px;font-weight:550;color:var(--tx2);margin:0 0 6px}
input[type=text],input[type=password],textarea{
  width:100%;background:var(--bg);border:1px solid var(--line2);color:var(--tx);
  border-radius:var(--r-sm);padding:10px 13px;font:inherit;font-size:15px;
  transition:border-color .12s, box-shadow .12s;
}
input::placeholder,textarea::placeholder{color:var(--tx3)}
input:focus,textarea:focus{
  outline:none;border-color:var(--acc);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--acc) 18%, transparent);
}
textarea{min-height:300px;resize:vertical;line-height:1.65;font-size:15px}
.row{display:flex;gap:16px;flex-wrap:wrap}
.row>div{flex:1 1 250px;min-width:0}
.field{margin-bottom:16px}

.btn{
  background:var(--acc);border:1px solid transparent;color:#fff;
  padding:11px 22px;border-radius:var(--r-sm);
  font:inherit;font-size:15px;font-weight:600;cursor:pointer;
  transition:filter .12s, transform .05s;
}
.btn:hover{filter:brightness(1.08)}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.6;cursor:not-allowed;filter:none}
.btn.ghost{background:transparent;border-color:var(--line2);color:var(--tx2)}
.btn.ghost:hover{background:var(--surface2);color:var(--tx);filter:none}

.bar{display:flex;gap:16px;align-items:center;margin-top:18px;flex-wrap:wrap}
.chk{display:flex;align-items:center;gap:8px;color:var(--tx2);font-size:14px;cursor:pointer}
.chk input{width:auto;accent-color:var(--acc)}
.counter{color:var(--tx3);font-size:13px;margin-left:auto;font-variant-numeric:tabular-nums}

/* ---------- verdict block ---------- */
.verdict{display:flex;gap:26px;align-items:center;flex-wrap:wrap}
.gauge{width:124px;height:124px;flex:0 0 124px;position:relative}
.gauge svg{transform:rotate(-90deg);display:block}
.gauge .num{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  font-size:34px;font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums;
}
.gauge .num small{
  font-size:10px;font-weight:600;color:var(--tx3);
  letter-spacing:.09em;margin-top:1px;
}
.vtext{flex:1 1 320px;min-width:250px}
.vlabel{font-size:22px;font-weight:680;letter-spacing:-.02em;margin:0 0 5px;line-height:1.2}
.vmeta{color:var(--tx2);font-size:13.5px}
.vmeta b{color:var(--tx);font-weight:600}

/* band scale */
.scale{margin-top:18px}
.scale-track{display:flex;height:8px;border-radius:5px;overflow:hidden;background:var(--track)}
.scale-track i{display:block;height:100%}
.scale-marks{
  position:relative;height:20px;margin-top:5px;
  font-size:10.5px;color:var(--tx3);
}
.scale-marks span{position:absolute;transform:translateX(-50%);white-space:nowrap}
.scale-ptr{
  position:relative;height:12px;margin-bottom:3px;
}
.scale-ptr i{
  position:absolute;transform:translateX(-50%);
  font-size:11px;font-weight:700;color:var(--tx);
  background:var(--surface);border:1px solid var(--line2);
  border-radius:4px;padding:0 5px;line-height:16px;
  box-shadow:var(--shadow);
}

.g-green{color:var(--green)} .g-lime{color:var(--lime)} .g-amber{color:var(--amber)}
.g-orange{color:var(--orange)} .g-red{color:var(--red)}

/* ---------- layer cards ---------- */
.layers{display:grid;grid-template-columns:repeat(auto-fit,minmax(196px,1fr));gap:12px;margin-top:20px}
.layer{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-sm);padding:15px;box-shadow:var(--shadow);
}
.layer .lname{
  font-size:11px;color:var(--tx3);text-transform:uppercase;
  letter-spacing:.07em;font-weight:650;
}
.layer .lscore{font-size:29px;font-weight:700;letter-spacing:-.03em;margin:4px 0 2px;font-variant-numeric:tabular-nums}
.layer .ldesc{font-size:12.5px;color:var(--tx2);line-height:1.5}
.layer.off{opacity:.6}
.layer.off .lscore{color:var(--tx3)}

/* ---------- tables ---------- */
.tscroll{overflow-x:auto;margin:0 -20px;padding:0 20px}
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top}
th{
  color:var(--tx3);font-size:11px;text-transform:uppercase;
  letter-spacing:.06em;font-weight:650;white-space:nowrap;
  background:var(--surface2);
}
thead th:first-child{border-top-left-radius:var(--r-sm)}
thead th:last-child{border-top-right-radius:var(--r-sm)}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--surface2)}
td.n,th.n{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
td.sig{min-width:230px}

.meter{height:6px;background:var(--track);border-radius:4px;overflow:hidden;min-width:84px}
.meter i{display:block;height:100%;border-radius:4px}

.pill{
  display:inline-block;padding:2px 9px;border-radius:999px;
  font-size:11.5px;font-weight:650;white-space:nowrap;
}
.p-green{background:var(--green-bg);color:var(--green)}
.p-lime{background:var(--lime-bg);color:var(--lime)}
.p-amber{background:var(--amber-bg);color:var(--amber)}
.p-orange{background:var(--orange-bg);color:var(--orange)}
.p-red{background:var(--red-bg);color:var(--red)}

/* ---------- notes ---------- */
.note{
  background:var(--acc-soft);border:1px solid color-mix(in srgb, var(--acc) 24%, transparent);
  border-radius:var(--r-sm);padding:13px 15px;font-size:13.5px;line-height:1.55;
  color:var(--tx);margin-top:15px;
}
.note b{font-weight:650}
.note.warn{background:var(--amber-bg);border-color:color-mix(in srgb, var(--amber) 30%, transparent)}
.note.bad{background:var(--red-bg);border-color:color-mix(in srgb, var(--red) 30%, transparent)}
.note ul{margin:7px 0 0;padding-left:20px}
.note li{margin:4px 0}

ul.ev{margin:10px 0 0;padding-left:0;list-style:none}
ul.ev li{
  margin:0 0 12px;padding-left:0;font-size:14px;color:var(--tx2);
}
ul.ev li:last-child{margin-bottom:0}
blockquote{
  margin:7px 0 0;padding:9px 14px;
  border-left:3px solid var(--line2);background:var(--surface2);
  border-radius:0 var(--r-sm) var(--r-sm) 0;
  font-size:13.5px;color:var(--tx);
}
.small{font-size:12.5px;color:var(--tx3);line-height:1.5}
.mono{font-family:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;font-size:12.5px;font-variant-numeric:tabular-nums}

.spin{
  display:inline-block;width:14px;height:14px;
  border:2px solid rgba(255,255,255,.3);border-top-color:#fff;
  border-radius:50%;animation:sp .7s linear infinite;vertical-align:-2px;margin-right:5px;
}
@keyframes sp{to{transform:rotate(360deg)}}
.hide{display:none}

/* stat strip */
.stats{display:flex;gap:22px;flex-wrap:wrap;margin:0 0 20px}
.stat{min-width:78px}
.stat .sv{font-size:22px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.stat .sl{font-size:11.5px;color:var(--tx3);text-transform:uppercase;letter-spacing:.05em;font-weight:600}

/* ---------- login ---------- */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:22px}
.login{width:100%;max-width:392px}
.login .card{padding:30px}
.login .brand{justify-content:flex-start;margin-bottom:20px}
.login h1{margin:0 0 5px;font-size:20px}
.login .sub{margin-bottom:24px;font-size:14px}
.login .btn{width:100%;margin-top:4px}
.login .err{color:var(--red);font-size:13.5px;margin-top:13px;min-height:20px}
footer.ft{color:var(--tx3);font-size:12.5px;text-align:center;padding:24px 0}

/* article body on the report page */
.article{
  white-space:pre-wrap;font-size:14.5px;line-height:1.75;color:var(--tx2);
  max-height:460px;overflow-y:auto;
  border-left:3px solid var(--line);padding-left:16px;
}

@media (max-width:640px){
  body{font-size:15px}
  h1{font-size:22px;margin-top:24px}
  .wrap{padding:0 16px 56px}
  header.top .inner{padding:0 16px;gap:12px}
  .brand span{display:none}
  .card{padding:16px;border-radius:var(--r-sm)}
  .tscroll{margin:0 -16px;padding:0 16px}
  .gauge{width:104px;height:104px;flex:0 0 104px}
  .gauge .num{font-size:29px}
  .status{display:none}
}

@media print{
  header.top,nav,.bar,footer.ft{display:none}
  body{background:#fff;color:#000;font-size:11pt}
  .card{box-shadow:none;border:1px solid #ccc;break-inside:avoid}
  .article{max-height:none;overflow:visible}
  a{color:#000;text-decoration:none}
}