/* ═══════════════════════════════════════════════════════════
   科大有 · 管理后台 — 蓝天白云 · 青山绿水（与官网同源）
   Liquid-glass console: frosted panels on a sky→mint wash
   ═══════════════════════════════════════════════════════════ */

:root{
  --ink:     #0a2a3a;
  --aqua:    #14b5cb;   /* clear-water cyan */
  --mint:    #2fb877;   /* fresh leaf green */
  --sky:     #2f93e8;   /* sky blue */
  --foam:    #0a2433;   /* darkest heading ink */
  --text:    #244c5b;   /* body text */
  --muted:   #5a7f8c;   /* captions / meta */
  --line:    rgba(24,96,128,.16);
  --glass:   rgba(255,255,255,.55);
  --glass-2: rgba(255,255,255,.72);
  --field:   rgba(255,255,255,.66);
  --grad:    linear-gradient(105deg, var(--mint), var(--aqua) 48%, var(--sky));
  --shadow:  0 30px 70px -34px rgba(20,70,110,.42);
  --shadow-sm: 0 14px 34px -20px rgba(20,70,110,.45);
  --font-disp: "Clash Display","PingFang SC","Noto Sans SC","Microsoft YaHei",sans-serif;
  --font-body: "Satoshi","PingFang SC","Noto Sans SC","Microsoft YaHei",sans-serif;
  --font-mono: "JetBrains Mono","SFMono-Regular",monospace;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; }
body{
  font-family:var(--font-body);
  color:var(--text);
  line-height:1.6;
  letter-spacing:.01em;
  -webkit-font-smoothing:antialiased;
  background:linear-gradient(180deg,#bfe4ff 0%,#dff1ff 44%,#eaf7ef 100%);
  background-attachment:fixed;
  min-height:100vh;
}
button{ cursor:pointer; font:inherit; color:inherit; }
input,textarea,select{ font:inherit; }
a{ color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; }
::selection{ background:var(--aqua); color:#fff; }
[hidden]{ display:none !important; }

/* ── ambient backdrop ─────────────────────────────── */
.bg{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.bg__glow{ position:absolute; border-radius:50%; filter:blur(80px); opacity:.55; }
.bg__glow--1{ width:46vw; height:46vw; top:-12vw; right:-8vw;
  background:radial-gradient(circle at 50% 50%, rgba(47,184,119,.55), transparent 68%); }
.bg__glow--2{ width:42vw; height:42vw; bottom:-14vw; left:-10vw;
  background:radial-gradient(circle at 50% 50%, rgba(47,147,232,.5), transparent 68%); }
.bg__grain{ position:absolute; inset:0; opacity:.04; mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* ═══ LOGIN ═══════════════════════════════════════════ */
.login{ position:relative; z-index:1; min-height:100vh;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px; padding:40px 20px; }
.login__box{
  width:min(380px,100%); padding:40px 38px 34px;
  display:flex; flex-direction:column; gap:18px;
  background:var(--glass-2); border:1px solid var(--line); border-radius:26px;
  backdrop-filter:blur(22px); -webkit-backdrop-filter:blur(22px);
  box-shadow:var(--shadow);
  animation:rise .7s cubic-bezier(.2,.7,.2,1) both;
}
.login__brand{ display:flex; align-items:center; gap:12px; }
.login__brand img{ filter:drop-shadow(0 6px 16px rgba(20,181,203,.35)); }
.login__brand-txt{ font-family:var(--font-disp); font-weight:700; font-size:20px; color:var(--foam); line-height:1; }
.login__brand-txt i{ display:block; margin-top:5px; font-style:normal;
  font-family:var(--font-mono); font-size:9.5px; letter-spacing:.28em; color:var(--aqua); }
.login__box h1{ font-family:var(--font-disp); font-weight:600; font-size:1.5rem; color:var(--foam); line-height:1.15; }
.login__box h1 span{ display:block; font-size:.92rem; font-weight:500; color:var(--muted); margin-top:4px; letter-spacing:.04em; }
.login__btn{ justify-content:center; width:100%; margin-top:4px; }
.login__err{ min-height:1.1em; margin:0; text-align:center; font-size:.85rem; color:#e0594b; font-weight:500; }
.login__foot{ position:relative; z-index:1; font-family:var(--font-mono); font-size:11px; color:var(--muted); opacity:.8; }

/* shared field */
.field{ display:flex; flex-direction:column; gap:7px; }
.field__lab{ font-family:var(--font-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
input[type=text],input[type=password],.field input,textarea{
  width:100%; padding:12px 14px; border-radius:13px;
  border:1px solid var(--line); background:var(--field); color:var(--foam);
  font:inherit; transition:border-color .25s, box-shadow .25s, background .25s;
}
input::placeholder,textarea::placeholder{ color:var(--muted); opacity:.85; }
input:focus,textarea:focus{ outline:none; border-color:var(--aqua);
  background:#fff; box-shadow:0 0 0 4px rgba(20,181,203,.14); }

/* ═══ APP SHELL ═══════════════════════════════════════ */
.app{ position:relative; z-index:1; min-height:100vh; }
.topbar{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; gap:22px;
  padding:14px clamp(16px,4vw,40px);
  background:rgba(255,255,255,.62); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid var(--line);
  box-shadow:0 10px 30px -22px rgba(20,80,120,.5);
}
.topbar__brand{ display:flex; align-items:center; gap:11px; }
.topbar__brand img{ filter:drop-shadow(0 4px 10px rgba(20,181,203,.3)); }
.topbar__brand-txt{ font-family:var(--font-disp); font-weight:700; font-size:18px; color:var(--foam); line-height:1; }
.topbar__brand-txt i{ display:block; margin-top:3px; font-style:normal;
  font-family:var(--font-mono); font-size:8.5px; letter-spacing:.3em; color:var(--aqua); }
.tabs{ display:flex; gap:8px; flex:1; }
.tab{ position:relative; background:transparent; border:1px solid transparent; color:var(--muted);
  padding:9px 18px; border-radius:100px; font-weight:600; font-size:14px;
  transition:color .25s, background .25s, border-color .25s; }
.tab:hover{ color:var(--foam); background:rgba(255,255,255,.55); }
.tab--active{ color:#fff; background:var(--grad); border-color:transparent;
  box-shadow:0 12px 26px -12px rgba(47,147,232,.6); }
.tab--active:hover{ color:#fff; }
.logout{ background:var(--glass); border:1px solid var(--line); color:var(--text);
  padding:9px 16px; border-radius:100px; font-weight:500; font-size:13.5px;
  transition:border-color .25s, color .25s; }
.logout:hover{ border-color:var(--aqua); color:var(--aqua); }

.panel{ position:relative; z-index:1; padding:34px clamp(16px,4vw,40px) 60px; max-width:1000px; margin:0 auto; }
.panel__view{ animation:rise .5s cubic-bezier(.2,.7,.2,1) both; }

/* ═══ BUTTONS ═════════════════════════════════════════ */
.btn{ display:inline-flex; align-items:center; gap:8px; justify-content:center;
  border:1px solid transparent; border-radius:100px; padding:9px 18px;
  font-weight:600; font-size:13.5px; color:#fff;
  transition:transform .25s, box-shadow .25s, filter .25s, background .25s; }
.btn i{ font-style:normal; transition:transform .25s; }
.btn:hover i{ transform:translateX(4px); }
.btn--primary{ background:var(--grad); box-shadow:0 14px 30px -14px rgba(47,147,232,.65); }
.btn--primary:hover{ transform:translateY(-2px); box-shadow:0 20px 40px -16px rgba(47,147,232,.7); }
.btn--ok{ background:linear-gradient(120deg,#2fb877,#21a89a); box-shadow:0 12px 26px -16px rgba(33,168,154,.7); }
.btn--ok:hover{ transform:translateY(-2px); }
.btn--danger{ background:linear-gradient(120deg,#f0795f,#e0594b); box-shadow:0 12px 26px -16px rgba(224,89,75,.6); }
.btn--danger:hover{ transform:translateY(-2px); }
.btn--muted{ background:var(--glass-2); color:var(--text); border-color:var(--line); box-shadow:none; }
.btn--muted:hover{ border-color:var(--aqua); color:var(--aqua); transform:translateY(-1px); }
.btns{ display:flex; gap:9px; flex-wrap:wrap; }

/* ═══ ROWS / LISTS ════════════════════════════════════ */
.row{ position:relative; background:var(--glass-2); border:1px solid var(--line);
  border-radius:18px; padding:18px 20px; margin-bottom:14px;
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  box-shadow:var(--shadow-sm); transition:transform .3s, box-shadow .3s, border-color .3s; }
.row:hover{ transform:translateY(-3px); border-color:rgba(20,181,203,.32); box-shadow:var(--shadow); }
.row__top{ display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap; }
.row__top b{ font-family:var(--font-disp); font-weight:600; font-size:1.05rem; color:var(--foam); }
.row__meta{ font-family:var(--font-mono); font-size:11.5px; color:var(--muted); margin-top:4px; letter-spacing:.02em; }
.row p{ margin:.7em 0 0; line-height:1.65; color:var(--text); white-space:pre-wrap; word-break:break-word; }

/* ═══ TAGS ════════════════════════════════════════════ */
.tag{ display:inline-block; font-family:var(--font-mono); font-size:10.5px; font-weight:500;
  letter-spacing:.04em; padding:3px 10px; border-radius:100px;
  border:1px solid var(--line); color:var(--muted); vertical-align:middle; margin-left:4px; }
.tag--pending{ color:#b9791b; border-color:rgba(185,121,27,.4); background:rgba(231,178,69,.14); }
.tag--approved{ color:#1d9466; border-color:rgba(29,148,102,.4); background:rgba(47,184,119,.14); }
.tag--rejected{ color:#d6533f; border-color:rgba(214,83,63,.4); background:rgba(224,89,75,.12); }

/* ═══ NEWS EDITOR FORM ════════════════════════════════ */
.news-form{ background:var(--glass-2); border:1px solid var(--line); border-radius:22px;
  padding:26px; margin-bottom:28px; backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  box-shadow:var(--shadow-sm); }
.news-form h3{ font-family:var(--font-disp); font-weight:600; font-size:1.3rem; color:var(--foam); margin-bottom:16px; }
.news-form input[type=text]{ margin-bottom:12px; }
.news-form label{ display:block; font-family:var(--font-mono); font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted); margin:10px 0 7px; }
.news-form input[type=file]{ font-size:13px; color:var(--muted); }
.news-form input[type=file]::file-selector-button{
  font:inherit; font-weight:600; color:var(--aqua); margin-right:12px;
  padding:7px 14px; border-radius:100px; border:1px solid var(--line);
  background:var(--glass); cursor:pointer; transition:border-color .25s; }
.news-form input[type=file]::file-selector-button:hover{ border-color:var(--aqua); }
.cover-prev{ max-width:220px; border-radius:14px; margin:10px 0; display:none;
  box-shadow:var(--shadow-sm); border:1px solid var(--line); }
.empty{ color:var(--muted); font-style:italic; padding:8px 2px; }
.form-msg{ min-height:1.2em; margin:.4em 0 0; font-size:.9rem; font-weight:500; }

/* ═══ QUILL (snow) overrides → match theme ════════════ */
.ql-toolbar.ql-snow{ border:1px solid var(--line); border-bottom:none;
  border-radius:14px 14px 0 0; background:var(--glass);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
.ql-container.ql-snow{ border:1px solid var(--line); border-radius:0 0 14px 14px;
  background:#fff; font-family:var(--font-body); }
#editor{ min-height:230px; border-radius:0 0 14px 14px; }
.ql-editor{ min-height:230px; color:var(--foam); font-size:15px; line-height:1.75; }
.ql-editor.ql-blank::before{ color:var(--muted); font-style:normal; opacity:.8; }
.ql-snow .ql-stroke{ stroke:var(--text); }
.ql-snow .ql-fill{ fill:var(--text); }
.ql-snow .ql-picker{ color:var(--text); }
.ql-snow.ql-toolbar button:hover .ql-stroke,
.ql-snow .ql-toolbar button:hover .ql-stroke,
.ql-snow.ql-toolbar button.ql-active .ql-stroke,
.ql-snow .ql-toolbar button.ql-active .ql-stroke{ stroke:var(--aqua); }
.ql-snow.ql-toolbar button:hover .ql-fill,
.ql-snow.ql-toolbar button.ql-active .ql-fill{ fill:var(--aqua); }
.ql-snow.ql-toolbar button:hover,
.ql-snow.ql-toolbar button.ql-active,
.ql-snow .ql-toolbar button:hover,
.ql-snow .ql-toolbar button.ql-active{ color:var(--aqua); }
.ql-editor a{ color:var(--aqua); }
.ql-editor img{ border-radius:10px; }

/* ═══ MOTION ══════════════════════════════════════════ */
@keyframes rise{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){ *{ animation:none !important; } }

/* ═══ RESPONSIVE ══════════════════════════════════════ */
@media (max-width:640px){
  .topbar{ flex-wrap:wrap; gap:12px; }
  .tabs{ order:3; flex-basis:100%; }
  .row__top{ align-items:flex-start; }
}