:root{
  --bg:#0b1220;
  --card:#0f1724;
  --muted:#98a0b0;
  --accent:#f97316;
  --accent-strong:#fb923c;
  --ok:#34d199;
  --danger:#f87171;
  --glass: rgba(255,255,255,0.03);
  --radius:12px;
  --gap:14px;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial;
  color-scheme: dark;
}

*{box-sizing:border-box}
html,body{height:100%;margin:0;background:
 linear-gradient(180deg,#050612 0,#071026 60%);color:#e6eef8}
.topbar{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;gap:12px}
.brand{display:flex;align-items:center;gap:12px}
.logo{width:44px;height:44px;border-radius:10px;background:linear-gradient(135deg,#fed7aa,#f97316);display:flex;align-items:center;justify-content:center;font-weight:800;color:#111}
.title h1{margin:0;font-size:1.05rem}
.title .subtitle{font-size:0.78rem;color:var(--muted);margin-top:2px}
.controls{display:flex;align-items:center;gap:10px}
.icon-btn{background:var(--glass);border:1px solid rgba(255,255,255,0.03);padding:8px;border-radius:10px;color:inherit;cursor:pointer}
.last-up{font-size:0.8rem;color:var(--muted)}

.layout{display:grid;grid-template-columns:320px 1fr;gap:18px;padding:0 18px 28px}
.panel{background:linear-gradient(180deg,rgba(255,255,255,0.02),rgba(255,255,255,0.01));border-radius:var(--radius);padding:14px;border:1px solid rgba(255,255,255,0.03)}
.left{display:flex;flex-direction:column;gap:12px}
.panel-section h2{margin:0 0 8px;font-size:0.95rem}
input[type=search],select{width:100%;padding:8px;border-radius:10px;border:1px solid rgba(255,255,255,0.03);background:rgba(255,255,255,0.02);color:inherit}
.jobs-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.jobs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px;max-height:68vh;overflow:auto;padding-right:6px}
.job{background:linear-gradient(180deg,rgba(255,255,255,0.02),transparent);padding:12px;border-radius:10px;border:1px solid rgba(255,255,255,0.03);display:flex;flex-direction:column;gap:8px}
.job .top{display:flex;justify-content:space-between;gap:8px;align-items:flex-start}
.title{font-weight:600;font-size:0.95rem}
.meta{font-size:0.78rem;color:var(--muted);display:flex;gap:8px;flex-wrap:wrap}
.actions{display:flex;gap:8px;justify-content:flex-end}
.btn{background:transparent;border:1px solid rgba(255,255,255,0.04);padding:6px 8px;border-radius:8px;cursor:pointer;color:inherit}
.btn.heart{color:var(--accent)}
.btn.skip{color:var(--muted)}
.btn.done{color:var(--ok);border-color:rgba(52,209,153,0.12);background:rgba(52,209,153,0.06)}
.list{display:flex;flex-direction:column;gap:8px;max-height:18vh;overflow:auto;padding:6px;border-radius:8px;background:rgba(255,255,255,0.01);border:1px solid rgba(255,255,255,0.02)}
.list .mini{padding:8px;border-radius:8px;background:rgba(255,255,255,0.01);display:flex;justify-content:space-between;align-items:center;font-size:0.9rem}
.empty{opacity:0.7;color:var(--muted);padding:8px;border-radius:8px}
.empty-state{padding:18px;color:var(--muted);text-align:center;border-radius:8px}
.footer{padding:12px 18px;color:var(--muted);text-align:right;font-size:0.85rem}

/* light mode */
:root.light{
  --bg:#f6f8fb;
  --card:#ffffff;
  --muted:#54607a;
  --accent:#f97316;
  color-scheme:light;
}
:root.light body{background:linear-gradient(180deg,#f8fafc 0,#eef2ff 100%)}

/* responsive */
@media (max-width:880px){
  .layout{grid-template-columns:1fr;padding:0 12px}
  .left{order:2}
  .main{order:1}
  .jobs-grid{grid-template-columns:1fr}
}