:root{--bg:#0b1020;--panel:#131a2d;--muted:#92a0bd;--text:#eef2ff;--line:#26324f;--accent:#5aa9ff;--good:#24c78d;--warn:#f3b33d;--bad:#ef5b6b}
*{box-sizing:border-box}body{margin:0;font-family:Inter,Segoe UI,Arial,sans-serif;background:linear-gradient(180deg,#0b1020,#0f1426);color:var(--text)}
#app{max-width:1400px;margin:0 auto;padding:16px}
.header{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.h1{font-size:24px;font-weight:700}.sub{color:var(--muted);font-size:13px}
.row{display:flex;gap:12px;flex-wrap:wrap}.panel{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px;box-shadow:0 6px 20px rgba(0,0,0,.15)}
.controls{display:grid;grid-template-columns:repeat(5,minmax(140px,1fr));gap:10px;align-items:end;width:100%}
label{font-size:12px;color:var(--muted);display:block;margin-bottom:4px}input,select,button,textarea{background:#0d1324;color:var(--text);border:1px solid var(--line);border-radius:10px;padding:8px 10px;font:inherit}
button{cursor:pointer}.btn{background:#13233f;border-color:#264a80}.btn.primary{background:#1c4e8f;border-color:#2c67b4}.btn.ghost{background:transparent}
.tabs{display:flex;gap:8px;margin:12px 0;flex-wrap:wrap}.tab{padding:8px 12px;border-radius:999px;border:1px solid var(--line);background:#0d1324;cursor:pointer}.tab.active{background:#173059;border-color:#3b6ab0}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}.kpi{padding:12px;border-radius:12px;border:1px solid var(--line);background:#0f1629}.kpi .v{font-size:20px;font-weight:700}.kpi .l{font-size:12px;color:var(--muted)}
.grid-2{display:grid;grid-template-columns:1.1fr .9fr;gap:12px}.grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
@media (max-width:1000px){.grid-2,.grid-3{grid-template-columns:1fr}.controls{grid-template-columns:repeat(2,minmax(140px,1fr));}}
.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:12px}.table{width:100%;border-collapse:collapse;font-size:13px}.table th,.table td{padding:8px 10px;border-bottom:1px solid #1d2740;white-space:nowrap}.table th{position:sticky;top:0;background:#111a30;text-align:left;color:#c8d3eb}
.badge{display:inline-block;padding:2px 8px;border-radius:999px;font-size:12px;border:1px solid var(--line)}.good{color:#b8ffea;border-color:#1d6d54;background:#0e2b23}.warn{color:#ffe7b3;border-color:#7f5d1d;background:#2d2411}.bad{color:#ffd0d5;border-color:#7d2731;background:#2d1116}
.small{font-size:12px;color:var(--muted)} .mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
input[type="number"]{width:110px} input[type="date"]{min-width:145px}
.project-list{max-height:320px;overflow:auto}
.project-item{padding:10px;border:1px solid var(--line);border-radius:10px;margin-bottom:8px;cursor:pointer;background:#10182c}.project-item.active{outline:2px solid #315fa4}
.flex{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.right{margin-left:auto}.nowrap{white-space:nowrap}
textarea{width:100%;min-height:120px}.footer-note{margin-top:10px;color:var(--muted);font-size:12px}


/* Mobile-ready enhancements */
html,body{min-height:100%}
button,input,select,textarea{min-height:38px}
.table-wrap{max-width:100%;-webkit-overflow-scrolling:touch}
.table td input,.table td select{max-width:100%}
.table td{vertical-align:top}

@media (max-width: 700px){
  #app{padding:10px}
  .h1{font-size:20px}
  .panel{padding:10px;border-radius:12px}
  .header{align-items:stretch}
  .header>.flex{width:100%}
  .header>.flex .btn, .header>.flex label.btn{flex:1;text-align:center;justify-content:center}
  .controls{grid-template-columns:1fr}
  .tabs{flex-wrap:nowrap;overflow:auto;padding-bottom:4px}
  .tab{white-space:nowrap}
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kpi{padding:10px}
  .kpi .v{font-size:17px}
  .project-list{max-height:none}
  input[type="number"]{width:100%;min-width:84px}
  input[type="date"]{min-width:130px;width:100%}

  .table-wrap.mobile-cards{border:none;overflow:visible}
  .table-wrap.mobile-cards .table{border-collapse:separate;border-spacing:0 8px}
  .table-wrap.mobile-cards .table thead{display:none}
  .table-wrap.mobile-cards .table tbody,
  .table-wrap.mobile-cards .table tr,
  .table-wrap.mobile-cards .table td{display:block;width:100%}
  .table-wrap.mobile-cards .table tr{
    border:1px solid var(--line);
    border-radius:12px;
    background:#0f1629;
    overflow:hidden;
  }
  .table-wrap.mobile-cards .table td{
    border-bottom:1px solid #1d2740;
    white-space:normal;
    padding:8px 10px;
  }
  .table-wrap.mobile-cards .table td:last-child{border-bottom:none}
  .table-wrap.mobile-cards .table td::before{
    content:attr(data-label);
    display:block;
    font-size:11px;
    color:var(--muted);
    margin-bottom:4px;
  }
}