:root{
  --bg:#0f1216; --panel:#141a21; --card:#171e26; --ink:#e8eef6; --muted:#8a97a6; --border:#233042;
  --accent:#5b9bff; --accent2:#7A5BFF; --ok:#2ecc71; --warn:#f1c40f; --danger:#e74c3c;
}
@media (prefers-color-scheme: light){
  :root{ --bg:#f6f8fb; --panel:#ffffff; --card:#ffffff; --ink:#0b1220; --muted:#5b6776; --border:#dbe3ee; --accent:#2b6df8; --accent2:#6a4bff; --ok:#1b9e58; --warn:#b78a00; --danger:#cc2b2b; }
}
html[data-theme="light"]{ --bg:#f6f8fb; --panel:#ffffff; --card:#ffffff; --ink:#0b1220; --muted:#5b6776; --border:#dbe3ee; --accent:#2b6df8; --accent2:#6a4bff; }
html[data-theme="dark"]{ --bg:#0f1216; --panel:#141a21; --card:#171e26; --ink:#e8eef6; --muted:#8a97a6; --border:#233042; --accent:#5b9bff; --accent2:#7A5BFF; }

*{box-sizing:border-box} html,body{height:100%} body{margin:0; font:15px/1.45 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif; background:var(--bg); color:var(--ink)}
.hidden{display:none!important}
.app{display:flex; flex-direction:column; min-height:100svh}
.top{position:sticky; top:0; z-index:5; background:var(--panel); border-bottom:1px solid var(--border); padding:10px 12px; display:flex; align-items:center; gap:10px}
.logo{display:flex; align-items:center; gap:8px; font-weight:700}
.mark{width:22px;height:22px;border-radius:6px;background:linear-gradient(135deg,var(--accent),var(--accent2));display:grid;place-items:center;color:#fff;font-size:12px}
.search{flex:1; display:flex; align-items:center; gap:8px; background:var(--card); border:1px solid var(--border); border-radius:12px; padding:8px 10px}
.search input{flex:1; border:0; background:transparent; color:var(--ink); outline:none; font-size:16px}
.menu{position:relative} .menu-list{position:absolute; right:0; top:calc(100% + 6px); min-width:180px; display:none; background:var(--panel); border:1px solid var(--border); border-radius:10px; padding:6px; box-shadow:0 10px 30px rgba(0,0,0,.25)}

.content{flex:1; overflow:auto; padding:10px 12px 88px}
.h1{font-size:20px; font-weight:700; margin:6px 0 10px}
.seg{display:flex; gap:8px; overflow:auto; padding-bottom:6px} .seg::-webkit-scrollbar{display:none}
.chip{flex:0 0 auto; padding:8px 12px; border:1px solid var(--border); border-radius:999px; background:var(--card)} .chip.active{background:linear-gradient(135deg,var(--accent),var(--accent2)); color:#fff; border-color:transparent}

.list{display:flex; flex-direction:column; gap:10px}
.card{background:var(--panel); border:1px solid var(--border); border-radius:14px; padding:12px; display:flex; gap:10px; align-items:flex-start; position:relative}
.meta{font-size:12px; color:var(--muted)} .tag{font-size:12px; padding:4px 8px; border:1px solid var(--border); border-radius:999px; background:rgba(255,255,255,.04); color:var(--muted)}

.panel{background:var(--panel); border:1px solid var(--border); border-radius:12px; padding:12px; margin-top:12px}
.field{display:flex; flex-direction:column; gap:6px} .field label{font-size:12px; color:var(--muted)}
input,select,textarea{padding:12px 12px; border:1px solid var(--border); border-radius:12px; background:var(--card); color:var(--ink); font-size:16px}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:10px} @media (max-width: 420px){ .grid2{grid-template-columns:1fr} }
.rows{display:flex; flex-direction:column; gap:8px; margin-top:8px}
.row{display:grid; grid-template-columns:2fr 1fr 1fr 1fr 1fr; gap:8px; align-items:center}
.add{margin-top:8px}
.totals{display:flex; flex-direction:column; gap:6px; align-items:flex-end; margin-top:10px}
.line{display:flex; gap:10px; align-items:center}

.kanban{display:flex; gap:10px; overflow:auto; scroll-snap-type:x mandatory; padding-bottom:6px}
.kcol{flex:0 0 84%; max-width:84%; background:var(--panel); border:1px solid var(--border); border-radius:14px; padding:10px; scroll-snap-align:start}
.kcol h3{margin:4px 0 10px; font-size:16px}

.bottom{position:fixed; bottom:0; left:0; right:0; background:var(--panel); border-top:1px solid var(--border); display:flex; justify-content:space-around; padding:8px 6px; gap:6px; padding-bottom:max(8px, env(safe-area-inset-bottom))}
.tab{flex:1; display:flex; flex-direction:column; align-items:center; gap:4px; padding:8px 6px; color:var(--muted); border-radius:10px}
.tab.active{color:var(--ink); background:rgba(255,255,255,.04)}
.fab{position:fixed; right:16px; bottom:76px; width:56px; height:56px; border-radius:50%; background:linear-gradient(135deg,var(--accent),var(--accent2)); color:#fff; display:grid; place-items:center; font-size:26px; font-weight:700; box-shadow:0 10px 30px rgba(0,0,0,.35)}

.btn{padding:10px 12px; border-radius:12px; border:1px solid var(--border); background:var(--card); font-weight:600}
.btn.primary{background:linear-gradient(135deg,var(--accent),var(--accent2)); color:#fff; border-color:transparent}
.actions{display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end}
.muted{color:var(--muted)}