:root {
    --bg:#f4f6f9; --white:#fff; --border:#e2e6ec; --border-light:#edf0f4;
    --accent:#2563eb; --accent-hover:#1d4ed8; --accent-light:#eff6ff;
    --green:#16a34a; --green-light:#f0fdf4;
    --red:#dc2626; --red-light:#fef2f2;
    --text:#111827; --text2:#374151; --muted:#6b7280; --muted2:#9ca3af;
    --radius:10px;
  }
  *{margin:0;padding:0;box-sizing:border-box;}
  html,body{height:100%;font-family:'Inter',sans-serif;background:var(--bg);color:var(--text);}
  ::-webkit-scrollbar{width:5px;height:5px;}
  ::-webkit-scrollbar-track{background:#f1f1f1;}
  ::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:99px;}

  /* ===== LOGIN ===== */
  #login-page{
    position:fixed;inset:0;z-index:100;
    display:flex;align-items:center;justify-content:center;
    background:linear-gradient(135deg,#e8eeff 0%,#f5f7ff 100%);
    transition:opacity 0.5s ease;
  }
  #login-page.hidden{opacity:0;pointer-events:none;}

  .login-wrapper{
    display:flex;align-items:stretch;
    border-radius:20px;overflow:hidden;
    box-shadow:0 12px 48px rgba(0,0,0,0.14);
    animation:cardIn 0.5s cubic-bezier(0.16,1,0.3,1) both;
    max-width:880px;width:90%;
  }
  @keyframes cardIn{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}

  /* Left illustration panel */
  .login-illustration{
    flex:1;min-width:0;
    background:linear-gradient(145deg,#2563eb 0%,#4338ca 100%);
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    padding:52px 36px;
  }
  .login-illus-title{color:#fff;font-size:22px;font-weight:700;margin-bottom:10px;text-align:center;}
  .login-illus-sub{color:rgba(255,255,255,0.78);font-size:14px;text-align:center;line-height:1.7;max-width:240px;}
  .illus-icon-wrap{
    width:160px;height:160px;border-radius:50%;
    background:rgba(255,255,255,0.12);
    display:flex;align-items:center;justify-content:center;
    font-size:72px;margin-bottom:32px;
    border:2px solid rgba(255,255,255,0.2);
  }
  .illus-dots{display:flex;gap:8px;margin-top:28px;}
  .illus-dots span{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,0.4);}
  .illus-dots span:first-child{background:#fff;width:24px;border-radius:4px;}

  /* Right login card */
  .login-card{
    background:var(--white);padding:52px 44px;width:400px;flex-shrink:0;
  }
  .login-logo{display:flex;align-items:center;gap:10px;margin-bottom:36px;}
  .login-logo-icon{width:40px;height:40px;border-radius:10px;background:var(--accent);display:flex;align-items:center;justify-content:center;color:#fff;font-size:18px;}
  .login-logo-text{font-size:20px;font-weight:700;}
  .login-title{font-size:24px;font-weight:700;margin-bottom:4px;}
  .login-sub{color:var(--muted);font-size:14px;margin-bottom:28px;}
  .form-group{margin-bottom:16px;}
  .form-label{display:block;font-size:13px;font-weight:600;color:var(--text2);margin-bottom:6px;}
  .form-input{width:100%;padding:11px 14px;border-radius:8px;border:1.5px solid var(--border);background:#fafafa;color:var(--text);font-size:14px;font-family:'Inter',sans-serif;outline:none;transition:border-color 0.2s,box-shadow 0.2s;}
  .form-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(37,99,235,0.1);background:#fff;}
  .login-error{color:var(--red);font-size:13px;margin-bottom:12px;padding:10px 13px;background:var(--red-light);border-radius:7px;border:1px solid #fecaca;display:none;}
  .btn-primary{width:100%;padding:12px;border-radius:8px;border:none;cursor:pointer;background:var(--accent);color:#fff;font-size:14px;font-weight:600;font-family:'Inter',sans-serif;transition:background 0.15s;}
  .btn-primary:hover{background:var(--accent-hover);}
  .btn-primary.loading{opacity:0.7;pointer-events:none;}
  .login-hint{margin-top:18px;text-align:center;font-size:12px;color:var(--muted);}
  .login-hint code{background:#f3f4f6;padding:2px 6px;border-radius:4px;color:var(--accent);font-weight:600;}

  @media(max-width:680px){
    .login-illustration{display:none;}
    .login-card{width:100%;border-radius:20px;padding:40px 28px;}
    .login-wrapper{max-width:420px;border-radius:20px;}
  }

  /* ===== APP ===== */
  #app{display:none;flex-direction:column;min-height:100vh;}
  #app.visible{display:flex;animation:fadeIn 0.35s ease;}
  @keyframes fadeIn{from{opacity:0}to{opacity:1}}

  /* NAVBAR */
  .navbar{background:var(--white);border-bottom:1px solid var(--border);padding:0 28px;height:60px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:50;box-shadow:0 1px 4px rgba(0,0,0,0.04);}
  .nav-logo{display:flex;align-items:center;gap:9px;}
  .nav-logo-icon{width:32px;height:32px;border-radius:8px;background:var(--accent);display:flex;align-items:center;justify-content:center;color:#fff;font-size:15px;}
  .nav-logo-text{font-size:17px;font-weight:700;}
  .nav-right{display:flex;align-items:center;gap:12px;}
  .nav-user{font-size:13px;font-weight:600;color:var(--text2);background:#f3f4f6;border:1px solid var(--border);padding:5px 12px;border-radius:99px;}
  .btn-logout{display:flex;align-items:center;gap:6px;padding:7px 14px;border-radius:7px;border:1px solid #fecaca;background:var(--red-light);color:var(--red);font-size:13px;font-weight:600;cursor:pointer;transition:background 0.15s;}
  .btn-logout:hover{background:#fee2e2;}

  /* MAIN */
  .main{flex:1;padding:28px;max-width:1300px;width:100%;margin:0 auto;}
  .sec-head{display:flex;align-items:center;gap:8px;margin-bottom:12px;}
  .sec-head-icon{width:26px;height:26px;border-radius:6px;background:var(--accent-light);display:flex;align-items:center;justify-content:center;font-size:13px;}
  .sec-head-text{font-size:14px;font-weight:700;color:var(--text);}
  .card{background:var(--white);border:1px solid var(--border);border-radius:var(--radius);}

  /* UPLOAD */
  .upload-zone{border:2px dashed #d1d5db;border-radius:var(--radius);background:var(--white);text-align:center;padding:44px 32px;cursor:pointer;transition:all 0.2s;position:relative;}
  .upload-zone:hover,.upload-zone.drag-over{border-color:var(--accent);background:var(--accent-light);}
  .upload-zone.has-file{border-color:var(--green);border-style:solid;background:var(--green-light);}
  .upload-zone input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;}
  .upload-icon{font-size:34px;margin-bottom:10px;}
  .upload-title{font-size:15px;font-weight:600;color:var(--text);margin-bottom:4px;}
  .upload-sub{font-size:13px;color:var(--muted);}
  .upload-ok{font-size:13px;color:var(--green);font-weight:600;margin-top:6px;display:none;}

  /* SHEET TABS */
  .sheet-tabs{display:flex;gap:6px;margin-top:12px;flex-wrap:wrap;}
  .sheet-tab{padding:6px 14px;border-radius:6px;font-size:13px;font-weight:500;border:1px solid var(--border);background:var(--white);color:var(--muted);cursor:pointer;transition:all 0.15s;}
  .sheet-tab.active{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600;}

  /* STATS */
  .stats-row{display:flex;gap:12px;margin-bottom:22px;flex-wrap:wrap;}
  .stat-box{background:var(--white);border:1px solid var(--border);border-radius:var(--radius);padding:16px 20px;flex:1;min-width:130px;}
  .stat-box-label{font-size:11px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:0.5px;margin-bottom:6px;}
  .stat-box-val{font-size:26px;font-weight:700;}
  .stat-box-val.blue{color:var(--accent);}
  .stat-box-val.green{color:var(--green);}
  .stat-box-val.gray{color:var(--muted);}

  /* FILTER — multi-select checkboxes */
  .filter-card{padding:22px;margin-bottom:22px;}
  .filter-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px;margin-bottom:18px;}
  .filter-item{}
  .filter-item label.col-label{display:block;font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:0.5px;margin-bottom:6px;}

  /* Custom multi-select dropdown */
  .ms-wrap{position:relative;}
  .ms-trigger{
    width:100%;padding:9px 12px;border-radius:7px;border:1.5px solid var(--border);
    background:#fafafa;color:var(--text);font-size:13px;font-family:'Inter',sans-serif;
    cursor:pointer;transition:border-color 0.15s;display:flex;align-items:center;justify-content:space-between;
    user-select:none;
  }
  .ms-trigger:hover,.ms-trigger.open{border-color:var(--accent);background:#fff;}
  .ms-trigger-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;color:var(--muted);}
  .ms-trigger-text.has-val{color:var(--text);font-weight:500;}
  .ms-arrow{font-size:10px;color:var(--muted);margin-left:6px;transition:transform 0.2s;}
  .ms-trigger.open .ms-arrow{transform:rotate(180deg);}

  .ms-dropdown{
    display:none;position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:100;
    background:var(--white);border:1.5px solid var(--accent);border-radius:8px;
    box-shadow:0 6px 20px rgba(0,0,0,0.1);max-height:200px;overflow-y:auto;
  }
  .ms-dropdown.open{display:block;}
  .ms-search{padding:8px 10px;border-bottom:1px solid var(--border);}
  .ms-search input{width:100%;border:none;outline:none;font-size:12px;background:transparent;color:var(--text);}
  .ms-option{display:flex;align-items:center;gap:8px;padding:8px 12px;cursor:pointer;font-size:13px;transition:background 0.1s;}
  .ms-option:hover{background:var(--accent-light);}
  .ms-option input[type=checkbox]{accent-color:var(--accent);width:14px;height:14px;cursor:pointer;}
  .ms-option.checked{color:var(--accent);font-weight:500;}
  .ms-clear{padding:7px 12px;border-top:1px solid var(--border);font-size:12px;color:var(--red);cursor:pointer;text-align:center;}
  .ms-clear:hover{background:var(--red-light);}

  .filter-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
  .btn-blue{padding:9px 20px;border-radius:7px;border:none;cursor:pointer;background:var(--accent);color:#fff;font-size:13px;font-weight:600;font-family:'Inter',sans-serif;transition:background 0.15s;}
  .btn-blue:hover{background:var(--accent-hover);}
  .btn-ghost{padding:9px 16px;border-radius:7px;border:1.5px solid var(--border);background:var(--white);color:var(--muted);font-size:13px;font-weight:600;font-family:'Inter',sans-serif;cursor:pointer;transition:border-color 0.15s,color 0.15s;}
  .btn-ghost:hover{border-color:#9ca3af;color:var(--text2);}
  .filter-count{margin-left:auto;font-size:13px;color:var(--muted);}
  .filter-count strong{color:var(--text);}

  /* TABLE */
  .table-card{overflow:hidden;margin-bottom:22px;}
  .table-wrap{overflow:auto;max-height:400px;}
  table{width:100%;border-collapse:collapse;font-size:13px;}
  thead th{position:sticky;top:0;z-index:5;background:#f8fafc;padding:11px 16px;text-align:left;font-size:11px;font-weight:700;color:var(--muted);letter-spacing:0.4px;text-transform:uppercase;border-bottom:1px solid var(--border);white-space:nowrap;}
  tbody tr{border-bottom:1px solid var(--border-light);}
  tbody tr:last-child{border-bottom:none;}
  tbody tr:hover{background:#f8fafc;}
  tbody td{padding:11px 16px;color:var(--text2);white-space:nowrap;max-width:200px;overflow:hidden;text-overflow:ellipsis;}
  .empty-state{text-align:center;padding:52px 20px;color:var(--muted);}
  .empty-state .ei{font-size:30px;margin-bottom:10px;}
  .empty-state p{font-size:14px;}

  /* WEBHOOK */
  .webhook-card{padding:22px;text-align:center;}
  .webhook-title{font-size:15px;font-weight:700;margin-bottom:4px;}
  .webhook-meta{font-size:13px;color:var(--muted);margin-bottom:18px;}
  .btn-send{display:inline-flex;align-items:center;gap:8px;padding:12px 40px;border-radius:8px;border:none;cursor:pointer;background:var(--green);color:#fff;font-size:15px;font-weight:700;font-family:'Inter',sans-serif;transition:background 0.15s;box-shadow:0 2px 8px rgba(22,163,74,0.2);}
  .btn-send:hover{background:#15803d;}
  .btn-send:disabled{opacity:0.5;pointer-events:none;}

  /* TOAST */
  .toast-wrap{position:fixed;bottom:24px;right:24px;z-index:200;display:flex;flex-direction:column;gap:8px;}
  .toast{padding:13px 18px;border-radius:9px;font-size:13px;font-weight:600;box-shadow:0 4px 16px rgba(0,0,0,0.12);display:flex;align-items:center;gap:9px;animation:toastIn 0.3s ease both;border:1px solid;}
  .toast.success{background:var(--green-light);border-color:#86efac;color:var(--green);}
  .toast.error{background:var(--red-light);border-color:#fca5a5;color:var(--red);}
  .toast.info{background:var(--accent-light);border-color:#bfdbfe;color:var(--accent);}
  @keyframes toastIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
  @keyframes toastOut{to{opacity:0;transform:translateY(6px)}}
  .spinner{display:inline-block;width:14px;height:14px;border:2px solid rgba(255,255,255,0.4);border-top-color:#fff;border-radius:50%;animation:spin 0.6s linear infinite;}
  @keyframes spin{to{transform:rotate(360deg)}}
  .mt20{margin-top:20px;}

  @media(max-width:600px){
    .main{padding:14px;}
    .filter-actions{flex-direction:column;align-items:flex-start;}
    .filter-count{margin-left:0;}
  }