*{margin:0;padding:0;box-sizing:border-box}
    :root{
      --bg:#f4f7fb;
      --card:#ffffff;
      --text:#1f2937;
      --muted:#6b7280;
      --line:#e5e7eb;
      --primary:#2563eb;
      --primary-hover:#1d4ed8;
      --success:#16a34a;
      --danger:#dc2626;
      --gray:#6b7280;
      --warning:#f59e0b;
      --radius:10px;
      --shadow:0 4px 16px rgba(15,23,42,.05);
    }

    body{
      font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
      background:var(--bg);
      font-size:12px;
      color:var(--text);
    }

    .header{
      min-height:54px;
      background:rgba(255,255,255,.96);
      backdrop-filter:blur(8px);
      display:flex;
      align-items:center;
      justify-content:space-between;
      padding:8px 14px;
      border-bottom:1px solid var(--line);
      position:sticky;
      top:0;
      z-index:20;
      gap:10px;
      flex-wrap:wrap;
    }

    .title-wrap{
      display:flex;
      align-items:center;
      gap:8px;
    }

    .logo{
      width:28px;
      height:28px;
      border-radius:8px;
      background:linear-gradient(135deg,#2563eb,#60a5fa);
      color:#fff;
      display:flex;
      align-items:center;
      justify-content:center;
      font-weight:700;
      font-size:13px;
    }

    .title{font-size:14px;font-weight:700}
    .sub{font-size:10px;color:var(--muted);margin-top:2px}

    .top-tools{
      display:flex;
      gap:6px;
      flex-wrap:wrap;
      align-items:center;
    }

    .btn{
      border:none;
      border-radius:8px;
      padding:6px 10px;
      cursor:pointer;
      font-size:12px;
      font-weight:600;
      transition:.15s;
      white-space:nowrap;
    }

    .btn:hover{transform:translateY(-1px)}
    .btn.primary{background:var(--primary);color:#fff}
    .btn.primary:hover{background:var(--primary-hover)}
    .btn.green{background:var(--success);color:#fff}
    .btn.gray{background:var(--gray);color:#fff}
    .btn.red{background:var(--danger);color:#fff}
    .btn.orange{background:var(--warning);color:#fff}

    .input, select.input{
      height:30px;
      border:1px solid var(--line);
      border-radius:8px;
      background:#fff;
      padding:0 8px;
      outline:none;
      font-size:12px;
      transition:.15s;
    }

    .input:focus, select.input:focus{
      border-color:#93c5fd;
      box-shadow:0 0 0 3px rgba(37,99,235,.08);
    }

    .header .mini-input{width:120px}
    .header .mini-select{width:110px}
    .header .mini-date{width:125px}
    .header .file-wrap{
      display:flex;
      align-items:center;
      gap:5px;
    }

    .container{padding:10px}

    .panel{
      background:var(--card);
      border:1px solid var(--line);
      border-radius:var(--radius);
      box-shadow:var(--shadow);
      padding:10px;
      margin-bottom:10px;
    }

    .panel-title{
      font-size:12px;
      font-weight:700;
      margin-bottom:8px;
    }

    .msg{
      margin-top:6px;
      font-size:11px;
      color:var(--muted);
      min-height:14px;
    }

    .edit-bar{
      margin-top:6px;
      font-size:11px;
      color:#b45309;
      background:#fff7ed;
      border:1px solid #fed7aa;
      padding:6px 8px;
      border-radius:8px;
    }

    .quick-group{
      display:flex;
      flex-wrap:wrap;
      gap:6px;
      margin-top:6px;
    }

    .quick-group .btn{
      padding:5px 8px;
      font-size:11px;
    }

    .form-row{
      display:flex;
      gap:10px;
      flex-wrap:wrap;
      align-items:flex-end;
    }

    .form-item{
      display:flex;
      flex-direction:column;
      gap:4px;
      width:160px;
    }

    .form-item label{
      font-size:10px;
      color:var(--muted);
      font-weight:600;
    }

    .form-item.channel{width:220px}
    .form-item.long{width:220px}
    .form-item.mid{width:180px}
    .form-item.short{width:130px}
    .form-item.date{width:140px}
    .form-item.money{width:140px}
    .form-item.actions{
      width:auto;
      display:flex;
      flex-direction:row;
      gap:6px;
      align-items:flex-end;
      padding-top:14px;
    }

.stats{
  display:grid;
  grid-template-columns:repeat(8,1fr);
  gap:8px;
  margin-bottom:10px;
}
    .stat{
      background:var(--card);
      border:1px solid var(--line);
      border-radius:10px;
      padding:10px;
      box-shadow:var(--shadow);
    }

    .stat .label{
      color:var(--muted);
      font-size:10px;
    }

    .stat .num{
      font-size:18px;
      font-weight:800;
      margin-top:5px;
    }

.profit-positive {
  color: #16a34a;
}

.profit-negative {
  color: #dc2626;
}

    .table-panel{
      background:var(--card);
      border:1px solid var(--line);
      border-radius:var(--radius);
      box-shadow:var(--shadow);
      overflow:hidden;
    }

    .table-head{
      padding:8px 10px;
      border-bottom:1px solid var(--line);
      display:flex;
      justify-content:space-between;
      align-items:center;
      flex-wrap:wrap;
      gap:8px;
    }

    .table-wrap{overflow:auto}

    table{
      width:100%;
      min-width:1950px;
      border-collapse:collapse;
      font-size:12px;
    }

    th,td{
      border-bottom:1px solid #edf0f4;
      padding:8px 6px;
      text-align:center;
      white-space:nowrap;
    }

    th{
      background:#f8fafc;
      color:#475569;
      font-weight:700;
      cursor:pointer;
      user-select:none;
    }

    tr:hover td{background:#fafcff}

    .empty{
      padding:16px;
      text-align:center;
      color:#94a3b8;
    }

    .pagination{
      display:flex;
      justify-content:space-between;
      align-items:center;
      padding:8px 10px;
      border-top:1px solid var(--line);
      background:#fff;
      flex-wrap:wrap;
      gap:8px;
    }

    .page-info{
      color:var(--muted);
      font-size:11px;
    }

    @media (max-width: 1280px){
      .stats{grid-template-columns:repeat(3,1fr)}
    }

    @media (max-width: 768px){
      .stats{grid-template-columns:repeat(2,1fr)}
    }