:root{
    --blue-700:#1F3FAE;
    --blue-600:#2F5FDE;
    --blue-500:#4C74E8;
    --blue-100:#EAF0FE;
    --blue-50:#F4F7FE;
    --ink-900:#181B33;
    --ink-600:#4B5170;
    --ink-400:#8A8FA8;
    --line:#E6E9F2;
    --surface:#FFFFFF;
    --red-500:#E5484D;
    --red-100:#FBE4E4;
    --amber-500:#F0A93B;
    --violet-500:#8A63EE;
    --green-500:#2FB673;
    --shadow-card:0 1px 2px rgba(24,27,51,0.04), 0 8px 24px -12px rgba(24,27,51,0.12);
    --radius-md:10px;
    --radius-lg:16px;
  }
  *{box-sizing:border-box;}
  html,body{height:100%;}
  body{
    margin:0;
    font-family:'Noto Sans Thai','Inter',sans-serif;
    background:var(--blue-50);
    color:var(--ink-900);
    -webkit-font-smoothing:antialiased;
  }
  .screen{ display:block; min-height:100vh; }
  .screen.active{ display:block; }
  a{ color:inherit; text-decoration:none; }
  button{ font-family:inherit; cursor:pointer; }

  /* ---------- shared top bits ---------- */
  .brand{
    display:flex; align-items:center; gap:10px;
  }
  .brand-mark{
    width:38px;height:38px;border-radius:10px;
    background:linear-gradient(155deg,var(--blue-600),var(--blue-700));
    display:flex;align-items:center;justify-content:center;
    color:#fff;font-weight:700;font-size:17px;letter-spacing:-0.5px;
    box-shadow:0 6px 14px -6px rgba(47,95,222,0.55);
  }
  .brand-text{ line-height:1.15; }
  .brand-text .top{ font-weight:700; font-size:17px; color:var(--ink-900); }
  .brand-text .sub{ font-size:11.5px; color:var(--ink-400); font-weight:500; }

  /* ================= LOGIN ================= */
  #view-login{ background:var(--surface); }
  .login-shell{
    max-width:95%; margin:0 auto; padding:34px 40px;
    display:flex; flex-direction:column; min-height:100vh;
  }
  .login-topbar{ display:flex; justify-content:space-between; align-items:center; }
  .login-toplinks{ display:flex; gap:28px; font-size:14px; color:var(--blue-600); font-weight:500;}
  .login-body{
    flex:1; display:grid; grid-template-columns:1fr 1fr; gap:60px;
    align-items:center; padding:40px 0;
  }
  .login-copy h1{
    margin:26px 0 6px; font-size:38px; line-height:1.2; font-weight:700;
  }
  .login-copy h1 .accent{ color:var(--blue-600); }
  .login-copy .welcome{ font-size:16px; font-weight:600; color:var(--ink-600); margin:0; }
  .login-copy p.desc{ color:var(--ink-600); font-size:15px; line-height:1.7; max-width:420px; margin:0 0 30px; }
  .field{ margin-bottom:16px; max-width:420px; }
  .field label{ display:block; font-size:13.5px; font-weight:600; color:var(--ink-900); margin-bottom:7px; }
  .field input{
    width:100%; padding:13px 14px; border-radius:9px; border:1.5px solid var(--line);
    background:var(--blue-50); font-size:14.5px; color:var(--ink-900); outline:none;
    transition:border-color .15s;
  }
  .field input:focus{ border-color:var(--blue-500); background:#fff; }
  .btn-primary{
    width:100%; max-width:420px; padding:13px; border:none; border-radius:9px;
    background:var(--blue-600); color:#fff; font-size:15px; font-weight:600;
    box-shadow:0 10px 20px -10px rgba(47,95,222,0.65);
    margin-top:6px;
  }
  .btn-primary:hover{ background:var(--blue-700); }
  .login-links-below{ margin-top:16px; font-size:13.5px; color:var(--ink-600); }
  .login-links-below a{ color:var(--blue-600); font-weight:600; }
  .login-links-below .forgot{ display:block; text-align:center; max-width:420px; margin-bottom:14px; }
  .login-links-below .signup{ display:block; text-align:center; max-width:420px; }

  .login-illustration{
    background:var(--blue-100); border-radius:24px; padding:34px;
    display:flex; align-items:center; justify-content:center; min-height:400px;
  }

  /* ================= DASHBOARD ================= */
  #view-dash{ background:var(--blue-50); }
  .app-topbar{
    background:var(--surface); border-bottom:1px solid var(--line);
    padding:14px 30px; display:flex; align-items:center; justify-content:space-between;
  }
  .app-topbar-right{ display:flex; align-items:center; gap:16px; }
  .icon-btn{
    width:36px;height:36px;border-radius:9px;background:var(--blue-100);
    display:flex;align-items:center;justify-content:center;border:none;color:var(--blue-600);
  }
  .user-chip{ display:flex; align-items:center; gap:9px; font-size:14px; font-weight:600; }
  .avatar{
    width:32px;height:32px;border-radius:50%;
    background:linear-gradient(155deg,var(--violet-500),var(--blue-600));
    display:flex;align-items:center;justify-content:center;color:#fff;font-size:13px;font-weight:700;
  }
  .dash-wrap{ max-width:95%; margin:0 auto; padding:28px 30px 60px; }
  .dash-head{ display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:22px; }
  .dash-head h2{ font-size:22px; margin:0 0 4px; }
  .dash-head .muted{ color:var(--ink-400); font-size:13.5px; }
  .btn-create{
    background:var(--blue-600); color:#fff; border:none; padding:11px 18px;
    border-radius:9px; font-size:14px; font-weight:600;
    box-shadow:0 10px 20px -10px rgba(47,95,222,0.65);
  }
  .btn-create:hover{ background:var(--blue-700); }

  .card-row{
    display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-bottom:30px;
  }
  .proj-card{
    background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg);
    padding:18px; box-shadow:var(--shadow-card); cursor:pointer; transition:transform .12s, box-shadow .12s;
  }
  .proj-card:hover{ transform:translateY(-2px); box-shadow:0 14px 30px -14px rgba(24,27,51,0.22); }
  .proj-card-top{ display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:12px;}
  .proj-logo{
    width:46px;height:46px;border-radius:10px;object-fit:cover;background:var(--blue-100);
    display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--blue-600);font-size:15px;
    overflow:hidden;
  }
  .status-pill{
    font-size:12px; font-weight:700; padding:4px 11px; border-radius:20px;
    background:#E4F8EE; color:var(--green-500);
  }
  .proj-card h3{ font-size:15px; margin:0 0 2px; }
  .proj-card .code{ font-size:12px; color:var(--ink-400); font-weight:600; }
  .proj-meta{ font-size:12.5px; color:var(--ink-600); margin:12px 0 10px; display:flex; flex-direction:column; gap:5px;}
  .proj-meta span{ display:flex; align-items:center; gap:6px; }
  .progress-row{ display:flex; align-items:center; justify-content:space-between; font-size:12px; font-weight:700; margin-bottom:6px;}
  .progress-track{ height:6px; border-radius:6px; background:var(--line); overflow:hidden; }
  .progress-fill{ height:100%; border-radius:6px; background:var(--blue-600); }
  .progress-fill.low{ background:var(--red-500); }
  .progress-fill.high{ background:var(--violet-500); }

  .table-card{
    background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg);
    box-shadow:var(--shadow-card); overflow:hidden;
  }
  .table-toolbar{
    display:flex; gap:12px; padding:16px 18px; border-bottom:1px solid var(--line);
  }
  .search-box{
    flex:1; display:flex; align-items:center; gap:8px; background:var(--blue-50);
    border:1px solid var(--line); border-radius:8px; padding:9px 13px;
  }
  .search-box input{ border:none; background:transparent; outline:none; font-size:13.5px; width:100%; color:var(--ink-900); }
  .filter-select{
    border:1px solid var(--line); background:var(--blue-50); border-radius:8px;
    padding:9px 14px; font-size:13.5px; color:var(--ink-600); min-width:150px;
  }
  table{ width:100%; border-collapse:collapse; }
  thead th{
    text-align:left; font-size:12.5px; color:var(--ink-400); font-weight:700;
    padding:12px 18px; border-bottom:1px solid var(--line);
  }
  tbody td{ padding:13px 18px; border-bottom:1px solid var(--line); font-size:13.5px; vertical-align:middle; }
  tbody tr:last-child td{ border-bottom:none; }
  tbody tr:hover{ background:var(--blue-50); }
  .name-cell{ display:flex; align-items:center; gap:10px; }
  .name-cell .thumb{
    width:34px;height:34px;border-radius:8px;background:var(--blue-100);
    display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:var(--blue-600);
    flex-shrink:0;
  }
  .name-cell .code{ font-size:11.5px; color:var(--ink-400); font-weight:600; }
  .owner-cell{ display:flex; align-items:center; gap:8px; }
  .owner-cell .mini-avatar{
    width:26px;height:26px;border-radius:50%; background:linear-gradient(155deg,var(--blue-500),var(--violet-500));
    color:#fff; font-size:11px; display:flex;align-items:center;justify-content:center;font-weight:700;
  }
  .status-approve{
    display:inline-block; font-size:12px; font-weight:700; color:var(--green-500);
    background:#E4F8EE; padding:4px 12px; border-radius:16px;
  }
  .mini-progress{ width:110px; }
  .mini-progress .num{ font-size:11.5px; font-weight:700; color:var(--ink-600); display:block; margin-bottom:4px; text-align:right;}
  .row-actions{ display:flex; gap:6px; }
  .chip-btn{
    border:1px solid var(--line); background:#fff; border-radius:7px; padding:6px 12px;
    font-size:12px; font-weight:600; color:var(--ink-600);
  }
  .chip-btn.primary{ background:var(--blue-600); color:#fff; border-color:var(--blue-600); }
  .chip-btn.primary:hover{ background:var(--blue-700); }

  /* ================= TASK DETAIL ================= */
  #view-task{ background:var(--blue-50); }
  .task-topbar{
    background:var(--surface); border-bottom:1px solid var(--line);
    padding:14px 26px; display:flex; align-items:center; gap:12px;
  }
  .back-btn{
    display:flex; align-items:center; gap:6px; font-size:13.5px; font-weight:600;
    color:var(--ink-600); background:var(--blue-50); border:1px solid var(--line);
    border-radius:8px; padding:8px 13px;
  }
  .back-btn:hover{ background:var(--blue-100); color:var(--blue-700); }
  .task-shell{ display:grid; grid-template-columns:280px 1fr; gap:22px; max-width:95%; margin:0 auto; padding:24px 26px 60px; }

  .task-side{
    background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg);
    padding:18px; box-shadow:var(--shadow-card); height:fit-content;
  }
  .task-side-head{ display:flex; gap:12px; padding-bottom:16px; border-bottom:1px solid var(--line); margin-bottom:14px;}
  .side-info div{ font-size:12.5px; margin-bottom:4px; }
  .side-info .label{ color:var(--ink-400); }
  .side-info .val{ font-weight:600; color:var(--ink-900); }
  .side-progress{ margin:14px 0 18px; }
  .side-nav a{
    display:flex; align-items:center; gap:10px; padding:11px 10px; border-radius:8px;
    font-size:14px; font-weight:600; color:var(--ink-600); margin-bottom:4px;
  }
  .side-nav a.active{ background:var(--blue-100); color:var(--blue-700); }
  .side-nav a:hover{ background:var(--blue-50); }
  .side-detail-title{ font-size:11.5px; font-weight:700; color:var(--ink-400); margin:18px 0 6px; padding:0 10px; }

  .task-main{
    background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg);
    box-shadow:var(--shadow-card); padding:22px 24px;
  }
  .task-main-head{ display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:18px; padding-bottom:18px; border-bottom:1px solid var(--line);}
  .task-main-head h2{ margin:0 0 4px; font-size:19px; }
  .task-main-head .sub{ color:var(--ink-400); font-size:13px; }
  .head-actions{ display:flex; gap:10px; }
  .btn-outline{
    border:1.5px solid var(--blue-600); color:var(--blue-600); background:#fff;
    padding:9px 15px; border-radius:8px; font-size:13px; font-weight:600;
  }
  .btn-outline:hover{ background:var(--blue-50); }

  .tree{ font-size:14px; }
  .tree-node{}
  .tree-children{ overflow:hidden; }
  .tree-children.collapsed{ display:none; }
  .tree-row{
    display:flex; align-items:center; gap:10px; padding:10px 8px; border-radius:8px;
  }
  .tree-row:hover{ background:var(--blue-50); }
  .tree-toggle{
    width:20px; height:20px; color:var(--ink-500); flex-shrink:0; font-size:11px;
    display:flex; align-items:center; justify-content:center; border:none; background:transparent;
    border-radius:5px; transition:transform .15s ease, background .15s ease;
  }
  .tree-toggle.has-children{ cursor:pointer; }
  .tree-toggle.has-children:hover{ background:var(--blue-100); color:var(--blue-600); }
  .tree-toggle.collapsed{ transform:rotate(-90deg); }
  .tree-name{ flex:1; display:flex; align-items:center; gap:8px; }
  .tree-dates{ font-size:11.5px; color:var(--ink-400); font-weight:500; }
  .tree-badge{
    width:20px;height:20px;border-radius:6px;display:flex;align-items:center;justify-content:center;
    color:#fff; font-size:10px; font-weight:700; flex-shrink:0;
  }
  .tree-progress{ width:130px; display:flex; align-items:center; gap:8px; }
  .tree-progress .num{ font-size:11.5px; font-weight:700; width:34px; text-align:right; }
  .tree-delete{ width:28px; height:28px; border-radius:7px; border:1px solid var(--line); background:#fff; color:var(--red-500); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
  .lvl-0{ font-weight:700; }
  .lvl-1{ padding-left:26px; }
  .lvl-2{ padding-left:52px; }
  .lvl-3{ padding-left:78px; font-weight:400; color:var(--ink-600); }

  @media(max-width:900px){
    .login-body{ grid-template-columns:1fr; }
    .login-illustration{ order:-1; min-height:220px; }
    .card-row{ grid-template-columns:1fr; }
    .task-shell{ grid-template-columns:1fr; }
    .table-card{
      display: none;
    }
  }