:root{
      --primary:#2563eb;
      --primary-dark:#1d4ed8;
      --bg:#f4f7fb;
      --card:#ffffff;
      --text:#17263c;
      --muted:#6b7a90;
      --line:#d8e4ef;
      --success:#0f9d58;
      --danger:#d92d20;
      --warning:#b26a00;
      --shadow:0 14px 34px rgba(15,23,42,.10);
      --radius:24px;
      --bottom-nav-height:86px;
    }

    *{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
    html,body{margin:0;min-height:100%;font-family:'Kanit',sans-serif;background:#dbeafe;color:var(--text)}
    body{overscroll-behavior-y:none}
    button,input,select{font:inherit}
    button{cursor:pointer;border:0}
    .hidden{display:none!important}

    .app-shell{
      width:100%;
      max-width:430px;
      min-height:100dvh;
      margin:0 auto;
      background:var(--bg);
      position:relative;
      overflow-x:hidden;
      box-shadow:0 0 50px rgba(15,23,42,.18);
    }

    .bg-hero{
      position:absolute;
      inset:0 0 auto 0;
      height:230px;
      background:linear-gradient(135deg,#1d4ed8 0%,#2563eb 58%,#22b8cf 100%);
      border-bottom-left-radius:34px;
      border-bottom-right-radius:34px;
      z-index:0;
    }

    .view{
      position:relative;
      z-index:1;
      min-height:100dvh;
      padding-bottom:calc(var(--bottom-nav-height) + env(safe-area-inset-bottom));
    }

    .login-view{
      min-height:100dvh;
      padding:42px 20px 28px;
      background:linear-gradient(135deg,#1d4ed8 0%,#2563eb 58%,#22b8cf 100%);
      color:#fff;
    }

    .school-pill{
      display:inline-flex;
      align-items:center;
      gap:8px;
      border:1px solid rgba(255,255,255,.25);
      background:rgba(255,255,255,.15);
      border-radius:999px;
      padding:8px 12px;
      font-size:12px;
      font-weight:700;
      backdrop-filter:blur(12px);
    }

    .login-logo{
      width:68px;height:68px;border-radius:26px;
      background:rgba(255,255,255,.18);
      display:flex;align-items:center;justify-content:center;
      font-size:34px;
      box-shadow:0 16px 34px rgba(15,23,42,.18);
      margin-bottom:18px;
    }

    .login-title{
      font-size:38px;
      line-height:1.08;
      font-weight:800;
      margin:18px 0 10px;
      letter-spacing:-.5px;
    }

    .login-sub{font-size:16px;font-weight:600;opacity:.9;margin:0}

    .login-card{
      margin-top:34px;
      background:rgba(255,255,255,.94);
      color:var(--text);
      border-radius:30px;
      padding:20px;
      box-shadow:0 22px 48px rgba(15,23,42,.20);
      border:1px solid rgba(255,255,255,.7);
    }

    .card-head{
      display:flex;align-items:center;gap:12px;margin-bottom:16px;
    }
    .card-icon{
      width:50px;height:50px;border-radius:18px;
      background:#dbeafe;color:#1d4ed8;
      display:flex;align-items:center;justify-content:center;
      font-size:24px;flex:0 0 auto;
    }
    .kicker{font-size:12px;font-weight:800;color:var(--primary);letter-spacing:.08em}
    .head-title{font-size:20px;font-weight:800;line-height:1.2}

    .field{margin-top:12px}
    .label{display:block;font-size:14px;font-weight:700;color:#4d6078;margin-bottom:7px}
    .input,.select{
      width:100%;
      height:54px;
      border-radius:18px;
      border:1px solid #cbd8e6;
      background:#fff;
      color:var(--text);
      padding:0 14px;
      outline:none;
      font-size:16px;
      font-weight:600;
    }
    .input:focus,.select:focus{
      border-color:var(--primary);
      box-shadow:0 0 0 4px rgba(37,99,235,.12);
    }

    .btn{
      min-height:50px;
      border-radius:18px;
      padding:0 16px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:8px;
      font-weight:800;
      font-size:15px;
      transition:.12s ease;
    }
    .btn:active{transform:scale(.985)}
    .btn-primary{background:var(--primary);color:#fff;box-shadow:0 10px 22px rgba(37,99,235,.22)}
    .btn-secondary{background:#eef3f8;color:#17324d}
    .btn-danger{background:#fff0ef;color:var(--danger);border:1px solid #ffd2cf}
    .btn-success{background:#e9f8ef;color:#0f9d58;border:1px solid #bfe6cb}
    .btn-block{width:100%}
    .btn:disabled{background:#d8e1ea;color:#7b8896;box-shadow:none;cursor:not-allowed}

    .status{
      margin-top:12px;
      min-height:24px;
      font-size:14px;
      line-height:1.55;
      font-weight:600;
    }
    .status.info{color:var(--primary-dark)}
    .status.success{color:var(--success)}
    .status.warn{color:var(--warning)}
    .status.error{color:var(--danger)}

    .topbar{
      padding:18px 18px 0;
      color:#fff;
    }
    .top-row{
      display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
    }
    .page-title{
      margin:14px 0 0;
      font-size:28px;
      line-height:1.16;
      font-weight:800;
      letter-spacing:-.2px;
    }
    .page-sub{
      margin:4px 0 0;
      color:rgba(255,255,255,.88);
      font-size:14px;
      font-weight:600;
      line-height:1.5;
    }
    .icon-btn{
      width:46px;height:46px;border-radius:17px;
      background:rgba(255,255,255,.16);
      color:#fff;
      display:flex;align-items:center;justify-content:center;
      font-size:21px;
      backdrop-filter:blur(12px);
    }

    .content{
      padding:20px 16px 0;
    }

    .card{
      background:var(--card);
      border:1px solid rgba(255,255,255,.7);
      border-radius:var(--radius);
      box-shadow:var(--shadow);
      padding:16px;
    }

    .home-card{
      padding:18px;
      border-radius:28px;
    }

    .action-card{
      width:100%;
      background:#fff;
      border:1px solid #e6edf5;
      border-radius:24px;
      padding:16px;
      text-align:left;
      box-shadow:0 6px 18px rgba(15,23,42,.04);
      margin-top:12px;
    }
    .action-inner{display:flex;gap:14px;align-items:center}
    .action-icon{
      width:58px;height:58px;border-radius:20px;
      display:flex;align-items:center;justify-content:center;
      font-size:28px;
      flex:0 0 auto;
    }
    .action-blue{background:#eff6ff;color:#1d4ed8}
    .action-green{background:#effcf3;color:#0f9d58}
    .action-title{font-size:18px;font-weight:800;color:var(--text)}
    .action-text{font-size:13px;color:var(--muted);line-height:1.55;margin-top:3px;font-weight:600}

    .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
    .search-box{
      height:54px;border-radius:18px;border:1px solid #cbd8e6;background:#fff;
      display:flex;align-items:center;gap:8px;padding:0 12px;
    }
    .search-box input{height:100%;border:0;background:transparent;outline:none;min-width:0;flex:1;font-weight:650;font-size:16px;color:var(--text)}
    .search-icon{color:#8192a7;font-size:18px}

    .stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:12px}
    .stats-grid.three{grid-template-columns:repeat(3,1fr)}
    .stat-card{
      background:#fff;border:1px solid #edf2f7;border-radius:18px;padding:10px 6px;text-align:center;
      box-shadow:0 5px 14px rgba(15,23,42,.04);
    }
    .stat-value{font-size:20px;font-weight:800;color:#17324d}
    .stat-label{font-size:11px;font-weight:800;color:var(--muted);margin-top:1px;white-space:nowrap}

    .list{display:grid;gap:12px;margin-top:14px}
    .empty{
      padding:28px 16px;text-align:center;color:var(--muted);font-size:14px;font-weight:600;line-height:1.7;
    }

    .student-main{font-size:18px;font-weight:800;line-height:1.35;margin-top:3px}
    .student-sub{font-size:13px;color:var(--muted);font-weight:700;margin-top:2px}
    .mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-weight:800;color:#1d4ed8}
    .row-between{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
    .badge{
      display:inline-flex;align-items:center;justify-content:center;
      min-height:28px;padding:4px 10px;border-radius:999px;
      border:1px solid transparent;font-size:12px;font-weight:800;white-space:nowrap;
    }
    .badge-none{background:#f1f5f9;color:#475569;border-color:#e2e8f0}
    .badge-pending{background:#fff7ea;color:#b26a00;border-color:#ffe0aa}
    .badge-approved{background:#e9f8ef;color:#0f9d58;border-color:#bfe6cb}
    .badge-rejected,.badge-risk{background:#fff0ef;color:#d92d20;border-color:#ffd2cf}
    .badge-normal{background:#e9f8ef;color:#0f9d58;border-color:#bfe6cb}

    .subject-box{
      margin-top:12px;
      background:#f8fbff;
      border:1px solid #edf2f7;
      border-radius:20px;
      padding:13px;
    }
    .subject-name{font-size:16px;font-weight:800;line-height:1.45;margin-top:2px}
    .grade-pill{
      display:inline-flex;align-items:center;justify-content:center;
      min-width:54px;min-height:36px;border-radius:999px;
      padding:4px 12px;font-size:17px;font-weight:800;
      background:#fff1f1;color:#c81e1e;border:1px solid #f4b4b4;
    }

    .retest-actions{
      display:grid;
      grid-template-columns:1fr auto;
      gap:10px;
      margin-top:12px;
    }

    .term-grid{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:8px;
      margin-top:12px;
    }
    .term-btn{
      min-height:48px;
      border-radius:18px;
      padding:6px 10px;
      font-size:13px;
      font-weight:800;
      line-height:1.25;
      border:1px solid #bfe6cb;
      color:#0f9d58;
      background:#e9f8ef;
    }
    .term-btn.risk{
      border-color:#ffd2cf;
      color:#d92d20;
      background:#fff0ef;
    }

    .bottom-nav{
      position:fixed;
      left:50%;
      bottom:0;
      transform:translateX(-50%);
      width:100%;
      max-width:430px;
      z-index:50;
      background:rgba(255,255,255,.92);
      border-top:1px solid rgba(216,228,239,.9);
      backdrop-filter:blur(16px);
      padding:8px 12px calc(10px + env(safe-area-inset-bottom));
    }
    .nav-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
    .nav-btn{
      height:58px;border-radius:20px;background:transparent;color:#64748b;
      display:flex;flex-direction:column;align-items:center;justify-content:center;
      gap:2px;font-size:11px;font-weight:800;
    }
    .nav-btn.active{background:var(--primary);color:#fff;box-shadow:0 10px 22px rgba(37,99,235,.22)}
    .nav-icon{font-size:20px}

    .detail-view{
      position:fixed;
      inset:0;
      z-index:80;
      background:var(--bg);
      display:none;
      overflow:auto;
    }
    .detail-view.show{display:block}
    .detail-shell{
      width:100%;
      max-width:430px;
      min-height:100dvh;
      margin:0 auto;
      position:relative;
      background:var(--bg);
    }
    .detail-hero{
      position:absolute;inset:0 0 auto 0;height:240px;
      background:linear-gradient(135deg,#1d4ed8 0%,#2563eb 58%,#22b8cf 100%);
      border-bottom-left-radius:34px;border-bottom-right-radius:34px;
    }
    .detail-content{position:relative;z-index:1;padding:18px 16px 28px}
    .back-btn{
      height:44px;border-radius:16px;background:rgba(255,255,255,.16);color:#fff;
      padding:0 14px;display:inline-flex;align-items:center;gap:6px;font-weight:800;
      backdrop-filter:blur(12px);
    }
    .summary-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px}
    .summary-mini{border-radius:18px;padding:12px 6px;text-align:center}
    .summary-blue{background:#eff6ff;color:#1d4ed8}
    .summary-gray{background:#f8fafc;color:#334155}
    .summary-green{background:#effcf3;color:#0f9d58}
    .summary-mini-label{font-size:11px;font-weight:800}
    .summary-mini-value{font-size:23px;font-weight:800;margin-top:2px}

    .grade-card{
      background:#fff;border:1px solid #edf2f7;border-radius:22px;padding:14px;
      box-shadow:0 8px 22px rgba(15,23,42,.06);
    }
    .grade-badge{
      min-width:56px;height:56px;border-radius:18px;
      display:flex;align-items:center;justify-content:center;
      font-size:20px;font-weight:800;padding:0 10px;
    }
    .grade-good{background:#e9f8ef;color:#0f9d58}
    .grade-bad{background:#fff0ef;color:#d92d20}

    .toast-wrap{
      position:fixed;left:50%;bottom:calc(96px + env(safe-area-inset-bottom));
      transform:translateX(-50%);
      z-index:100;
      width:min(398px, calc(100% - 28px));
      display:grid;gap:10px;
    }
    .toast{
      background:#fff;border:1px solid var(--line);border-radius:24px;
      box-shadow:0 20px 44px rgba(15,23,42,.18);
      padding:14px;
      animation:toastIn .22s ease;
    }
    .toast-title{font-size:16px;font-weight:800;margin-bottom:2px}
    .toast-text{font-size:13px;color:var(--muted);line-height:1.55;font-weight:600}
    .toast.success{border-left:6px solid var(--success)}
    .toast.error{border-left:6px solid var(--danger)}
    .toast.warn{border-left:6px solid var(--warning)}

    @keyframes toastIn{
      from{opacity:0;transform:translateY(16px) scale(.98)}
      to{opacity:1;transform:none}
    }

    .loading-cover{
      position:fixed;inset:0;z-index:200;background:rgba(15,23,42,.36);
      display:none;align-items:center;justify-content:center;padding:16px;
    }
    .loading-cover.show{display:flex}
    .loading-card{
      width:min(320px,100%);background:#fff;border-radius:26px;padding:22px;text-align:center;
      box-shadow:0 24px 60px rgba(15,23,42,.28);
    }
    .spinner{
      width:42px;height:42px;border-radius:50%;border:4px solid #dbeafe;border-top-color:var(--primary);
      margin:0 auto 12px;animation:spin .8s linear infinite;
    }
    @keyframes spin{to{transform:rotate(360deg)}}

    @media (min-width:431px){
      body{padding:0;background:linear-gradient(90deg,#dbeafe,#f5f3ff)}
    }