/* POND OS — cyberpunk theme */
/* Local woff2 fonts (Chakra Petch, IBM Plex Sans Thai, JetBrains Mono) */
@import url("/public/css/fonts.css");

:root{
  --ink:#0a0b14; --panel:#12141f; --panel-2:#1a1d2b;
  --cyan:#2af0ea; --magenta:#ff3da6;
  --text:#e6e9f2; --muted:#8b90a6; --border:#242838;
  --ok:#3ddc84; --warn:#ffb020; --danger:#ff4d5e;
  --font-head:"Chakra Petch",sans-serif;
  --font-th:"IBM Plex Sans Thai",sans-serif;
  --font-mono:"JetBrains Mono",monospace;
  --glow-cyan:0 0 24px rgba(42,240,234,.08);
  --glow-magenta:0 0 24px rgba(255,61,166,.08);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ font-size:15px; }
body{
  background:var(--ink); color:var(--text);
  font-family:var(--font-th),var(--font-head),sans-serif;
  min-height:100vh;
  background-image:
    radial-gradient(ellipse 60% 40% at 80% -10%, rgba(42,240,234,.05), transparent),
    radial-gradient(ellipse 50% 30% at 10% 110%, rgba(255,61,166,.04), transparent);
}
a{ color:var(--cyan); text-decoration:none; }
a:hover{ text-decoration:underline; }

/* ---- shell ---- */
.shell{ display:flex; min-height:100vh; }
.sidebar{
  width:220px; flex-shrink:0; background:var(--panel);
  border-right:1px solid var(--border);
  padding:1.2rem .9rem; display:flex; flex-direction:column; gap:.2rem;
  position:sticky; top:0; height:100vh;
}
.brand{
  font-family:var(--font-head); font-weight:700; letter-spacing:.08em;
  color:var(--cyan); font-size:1.02rem; line-height:1.25;
  text-shadow:0 0 12px rgba(42,240,234,.45);
  margin-bottom:.2rem;
}
.brand small{ display:block; color:var(--muted); font-size:.68rem; letter-spacing:.15em; font-weight:400; text-shadow:none; }
.sidebar nav{ display:flex; flex-direction:column; gap:2px; margin-top:1rem; flex:1; }
.sidebar nav a{
  padding:.55rem .8rem; border-radius:6px; color:var(--muted);
  font-family:var(--font-head); letter-spacing:.04em; font-size:.9rem;
  border-left:2px solid transparent;
}
.sidebar nav a:hover{ color:var(--text); background:var(--panel-2); text-decoration:none; }
.sidebar nav a.active{
  color:var(--cyan); background:var(--panel-2);
  border-left-color:var(--cyan); box-shadow:var(--glow-cyan);
}
.sidebar .foot{ font-size:.72rem; color:var(--muted); }
.sidebar .foot form{ margin-top:.4rem; }

.main{ flex:1; padding:1.4rem 1.8rem 3rem; min-width:0; }
.topbar{
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:1.4rem; gap:1rem; flex-wrap:wrap;
}
.topbar h1{
  font-family:var(--font-head); color:var(--cyan); font-size:1.35rem;
  letter-spacing:.06em; text-transform:uppercase;
  text-shadow:0 0 16px rgba(42,240,234,.35);
}
.lang-switch{ display:flex; gap:2px; border:1px solid var(--border); border-radius:6px; overflow:hidden; }
.lang-switch a{
  padding:.3rem .7rem; font-family:var(--font-mono); font-size:.75rem;
  color:var(--muted); background:var(--panel);
}
.lang-switch a.on{ color:var(--ink); background:var(--cyan); font-weight:700; }
.lang-switch a:hover{ text-decoration:none; }

/* ---- cards / panels ---- */
.grid{ display:grid; gap:1rem; }
.grid.cols-2{ grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); }
.grid.cols-4{ grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); }
.card{
  background:var(--panel); border:1px solid var(--border); border-radius:10px;
  padding:1rem 1.1rem; box-shadow:var(--glow-cyan);
}
.card.magenta{ box-shadow:var(--glow-magenta); }
.card h2{
  font-family:var(--font-head); font-size:.8rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted); margin-bottom:.6rem;
}
.stat{ font-family:var(--font-mono); font-size:1.7rem; color:var(--cyan); }
.stat.magenta{ color:var(--magenta); }
.stat small{ font-size:.8rem; color:var(--muted); margin-left:.3rem; }
.substat{ font-size:.78rem; color:var(--muted); margin-top:.25rem; font-family:var(--font-mono); }

/* ---- tables ---- */
.tablewrap{ overflow-x:auto; }
table{ width:100%; border-collapse:collapse; font-size:.88rem; }
th{
  text-align:left; font-family:var(--font-head); font-size:.7rem;
  letter-spacing:.12em; text-transform:uppercase; color:var(--muted);
  padding:.5rem .6rem; border-bottom:1px solid var(--border);
}
td{ padding:.55rem .6rem; border-bottom:1px solid var(--border); vertical-align:middle; }
tr:hover td{ background:rgba(42,240,234,.025); }
td.num, th.num{ text-align:right; font-family:var(--font-mono); }

/* ---- forms ---- */
label{ display:block; font-size:.75rem; color:var(--muted); margin:.6rem 0 .25rem; letter-spacing:.05em; }
input[type=text],input[type=password],input[type=number],input[type=url],
input[type=date],input[type=datetime-local],select,textarea{
  width:100%; background:var(--ink); color:var(--text);
  border:1px solid var(--border); border-radius:6px;
  padding:.5rem .65rem; font-family:inherit; font-size:.9rem;
}
textarea{ font-family:var(--font-mono); font-size:.84rem; min-height:90px; resize:vertical; }
input:focus,select:focus,textarea:focus{
  outline:none; border-color:var(--cyan);
  box-shadow:0 0 0 2px rgba(42,240,234,.15);
}
.row{ display:flex; gap:.8rem; flex-wrap:wrap; }
.row > *{ flex:1; min-width:140px; }

/* ---- buttons ---- */
.btn{
  display:inline-block; padding:.5rem 1rem; border-radius:6px; cursor:pointer;
  font-family:var(--font-head); font-size:.82rem; letter-spacing:.06em;
  border:1px solid var(--border); background:var(--panel-2); color:var(--text);
  transition:box-shadow .15s, transform .05s;
}
.btn:hover{ text-decoration:none; box-shadow:0 0 12px rgba(42,240,234,.25); }
.btn:active{ transform:translateY(1px); }
.btn.primary{
  background:var(--magenta); border-color:var(--magenta); color:#fff; font-weight:700;
  box-shadow:0 0 16px rgba(255,61,166,.3);
}
.btn.primary:hover{ box-shadow:0 0 22px rgba(255,61,166,.5); }
.btn.cyan{ background:transparent; border-color:var(--cyan); color:var(--cyan); }
.btn.ghost{ background:transparent; }
.btn.small{ padding:.28rem .6rem; font-size:.72rem; }
.btn.danger{ border-color:var(--danger); color:var(--danger); background:transparent; }
.btn.danger:hover{ box-shadow:0 0 12px rgba(255,77,94,.3); }
.btn.warned{ border-color:var(--warn); color:var(--warn); background:transparent; }
.btn[disabled]{ opacity:.45; cursor:not-allowed; }

/* ---- badges / status ---- */
.badge{
  display:inline-block; padding:.15rem .55rem; border-radius:999px;
  font-family:var(--font-mono); font-size:.68rem; letter-spacing:.04em;
  border:1px solid var(--border); color:var(--muted);
}
.badge.scheduled{ color:var(--cyan); border-color:var(--cyan); }
.badge.posted{ color:var(--ok); border-color:var(--ok); }
.badge.failed{ color:var(--danger); border-color:var(--danger); }
.badge.copied{ color:var(--muted); }
.badge.draft{ color:var(--warn); border-color:var(--warn); }
.badge.hot{ color:var(--magenta); border-color:var(--magenta); text-shadow:0 0 8px rgba(255,61,166,.5); }

/* ---- alerts ---- */
.alert{
  padding:.7rem 1rem; border-radius:8px; margin-bottom:1rem; font-size:.88rem;
  border:1px solid var(--border); background:var(--panel-2);
}
.alert.ok{ border-color:var(--ok); color:var(--ok); }
.alert.warn{ border-color:var(--warn); color:var(--warn); background:rgba(255,176,32,.06); }
.alert.danger{ border-color:var(--danger); color:var(--danger); background:rgba(255,77,94,.06); }
.alert.info{ border-color:var(--cyan); color:var(--cyan); background:rgba(42,240,234,.04); }

/* ---- auth pages ---- */
.auth-wrap{
  min-height:100vh; display:flex; align-items:center; justify-content:center; padding:1rem;
  position:relative; overflow:hidden;
}
.auth-wrap::before{
  content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(42,240,234,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(42,240,234,.055) 1px, transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(ellipse 75% 65% at 50% 50%, #000 25%, transparent 75%);
  mask-image:radial-gradient(ellipse 75% 65% at 50% 50%, #000 25%, transparent 75%);
  animation:auth-grid 18s linear infinite;
}
@keyframes auth-grid{ to{ background-position:0 44px, 44px 0; } }
.auth-wrap::after{
  content:""; position:absolute; inset:-45%; pointer-events:none;
  background:conic-gradient(from 0deg, transparent 0 82%, rgba(42,240,234,.06) 91%, transparent 100%);
  animation:auth-sweep 16s linear infinite;
}
@keyframes auth-sweep{ to{ transform:rotate(1turn); } }
.auth-card{
  position:relative; z-index:1; width:100%; max-width:400px;
  background:linear-gradient(165deg, rgba(26,29,43,.94), rgba(18,20,31,.97));
  border:1px solid var(--border); border-radius:14px; padding:2.4rem 2.2rem 1.8rem;
  box-shadow:0 0 55px rgba(42,240,234,.12), 0 0 90px rgba(255,61,166,.07), 0 24px 60px rgba(0,0,0,.55);
  backdrop-filter:blur(6px);
}
.auth-card::before{
  content:""; position:absolute; top:-1px; left:12%; right:12%; height:2px;
  background:linear-gradient(90deg, transparent, var(--cyan) 35%, var(--magenta) 65%, transparent);
}
.auth-card::after{ /* corner brackets */
  content:""; position:absolute; inset:9px; border-radius:8px; pointer-events:none; opacity:.6;
  background:
    linear-gradient(var(--cyan),var(--cyan)) left 0 top 0 / 16px 1px,
    linear-gradient(var(--cyan),var(--cyan)) left 0 top 0 / 1px 16px,
    linear-gradient(var(--magenta),var(--magenta)) right 0 top 0 / 16px 1px,
    linear-gradient(var(--magenta),var(--magenta)) right 0 top 0 / 1px 16px,
    linear-gradient(var(--magenta),var(--magenta)) left 0 bottom 0 / 16px 1px,
    linear-gradient(var(--magenta),var(--magenta)) left 0 bottom 0 / 1px 16px,
    linear-gradient(var(--cyan),var(--cyan)) right 0 bottom 0 / 16px 1px,
    linear-gradient(var(--cyan),var(--cyan)) right 0 bottom 0 / 1px 16px;
  background-repeat:no-repeat;
}
.auth-logo{
  width:54px; height:54px; margin:0 auto 1.2rem; border-radius:9px;
  border:1px solid var(--cyan); background:rgba(42,240,234,.05);
  transform:rotate(45deg); display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 18px rgba(42,240,234,.35), inset 0 0 16px rgba(42,240,234,.1);
  animation:auth-pulse 3.2s ease-in-out infinite;
}
.auth-logo span{
  transform:rotate(-45deg); font-family:var(--font-head); font-weight:700;
  font-size:1.5rem; color:var(--cyan); text-shadow:0 0 12px rgba(42,240,234,.8);
}
@keyframes auth-pulse{
  0%,100%{ box-shadow:0 0 18px rgba(42,240,234,.35), inset 0 0 16px rgba(42,240,234,.1); }
  50%{ box-shadow:0 0 30px rgba(42,240,234,.6), inset 0 0 22px rgba(42,240,234,.18); }
}
.auth-card .brand{ font-size:1.12rem; text-align:center; margin-bottom:.3rem; letter-spacing:.14em; }
.auth-tagline{
  text-align:center; color:var(--muted); font-size:.76rem; letter-spacing:.05em; margin-bottom:.9rem;
}
.auth-status{
  font-family:var(--font-mono); font-size:.66rem; color:var(--cyan); text-align:center;
  letter-spacing:.14em; margin-bottom:1.5rem; opacity:.85;
}
.auth-status::after{ content:"_"; animation:auth-blink 1.1s steps(1) infinite; }
@keyframes auth-blink{ 50%{ opacity:0; } }
.auth-card label{
  font-family:var(--font-mono); font-size:.64rem; text-transform:uppercase; letter-spacing:.16em;
}
.auth-card input{ background:rgba(10,11,20,.85); padding:.65rem .75rem; }
.auth-submit{
  width:100%; margin-top:1.2rem; padding:.7rem 1rem;
  font-size:.88rem; letter-spacing:.16em; text-transform:uppercase;
}
.auth-secure{
  margin-top:1.3rem; text-align:center; font-family:var(--font-mono);
  font-size:.62rem; color:var(--muted); letter-spacing:.08em;
}
.auth-secure::before{ content:"● "; color:var(--ok); text-shadow:0 0 8px rgba(61,220,132,.7); }
.auth-lang{ display:flex; justify-content:center; margin-top:1rem; }
@media (prefers-reduced-motion:reduce){
  .auth-wrap::before, .auth-wrap::after, .auth-logo, .auth-status::after{ animation:none; }
}

/* ---- calendar ---- */
.cal-grid{
  display:grid; grid-template-columns:repeat(7,1fr); gap:4px; margin-top:1rem;
}
.cal-head{
  font-family:var(--font-head); font-size:.66rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted); text-align:center; padding:.3rem 0;
}
.cal-day{
  min-height:92px; background:var(--panel); border:1px solid var(--border);
  border-radius:6px; padding:.3rem; font-size:.72rem;
}
.cal-day.other{ opacity:.35; }
.cal-day.today{ border-color:var(--cyan); box-shadow:var(--glow-cyan); }
.cal-day .d{ font-family:var(--font-mono); color:var(--muted); }
.cal-day.dragover{ border-color:var(--magenta); background:rgba(255,61,166,.06); }
.cal-post{
  margin-top:3px; padding:.2rem .35rem; border-radius:4px; cursor:grab;
  background:var(--panel-2); border-left:2px solid var(--muted);
  overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
}
.cal-post.scheduled{ border-left-color:var(--cyan); }
.cal-post.posted{ border-left-color:var(--ok); }
.cal-post.failed{ border-left-color:var(--danger); }
.cal-post.copied{ border-left-color:var(--muted); opacity:.7; }
.cal-post.draft{ border-left-color:var(--warn); }

/* ---- misc ---- */
.muted{ color:var(--muted); }
.mono{ font-family:var(--font-mono); }
.mt{ margin-top:1rem; } .mb{ margin-bottom:1rem; }
.hint{ font-size:.75rem; color:var(--muted); margin-top:.3rem; }
.thumb{ width:42px; height:42px; object-fit:cover; border-radius:6px; border:1px solid var(--border); }
.preview-box{
  background:var(--ink); border:1px solid var(--border); border-radius:8px;
  padding:.8rem; font-family:var(--font-th); font-size:.86rem;
  white-space:pre-wrap; margin-top:.5rem;
}
.preview-box .who{
  font-family:var(--font-head); font-size:.7rem; color:var(--magenta);
  letter-spacing:.1em; text-transform:uppercase; margin-bottom:.35rem;
}
.checklist{ display:flex; flex-direction:column; gap:.25rem; max-height:180px; overflow-y:auto;
  border:1px solid var(--border); border-radius:6px; padding:.5rem; background:var(--ink); }
.checklist label{ display:flex; align-items:center; gap:.5rem; margin:0; font-size:.85rem; color:var(--text); cursor:pointer; }
svg.chart text{ font-family:var(--font-mono); font-size:9px; fill:var(--muted); }

@media (max-width: 860px){
  .shell{ flex-direction:column; }
  .sidebar{ width:100%; height:auto; position:static; flex-direction:row; align-items:center; flex-wrap:wrap; }
  .sidebar nav{ flex-direction:row; flex-wrap:wrap; margin-top:0; }
  .main{ padding:1rem; }
}