:root{
    /* Token màu đã audit WCAG (docs/02 mục 1) — text/nền đang dùng đều ≥ 4.5:1 */
    --bg:#f4f6fa; --card:#ffffff; --ink:#1a2233; --muted:#65718a; --line:#e3e8f0;
    --brand:#2b52ec; --brand-soft:#e8edff; --green:#0a7440; --amber:#9a5c00; --red:#c4362a;
    --violet:#7048e8; --radius:14px; --shadow:0 1px 3px rgba(20,30,60,.08);
  }
  *{box-sizing:border-box; margin:0; padding:0}
  body{font-family:'Segoe UI',system-ui,-apple-system,Roboto,sans-serif; background:var(--bg); color:var(--ink); font-size:15px}
  button{font-family:inherit; cursor:pointer}
  button,a,input,select,textarea,.idea-card{touch-action:manipulation}
  input,textarea,select{font-family:inherit; font-size:15px; padding:10px 12px; border:1px solid var(--line); border-radius:10px; width:100%; background:#fff; color:var(--ink)}
  input:focus,textarea:focus,select:focus{outline:2px solid var(--brand); outline-offset:1px; border-color:var(--brand)}
  button:focus-visible,a:focus-visible,.idea-card:focus-visible,.title-link:focus-visible{outline:2px solid var(--brand); outline-offset:2px}
  .btn{border:none; border-radius:10px; padding:10px 18px; font-size:15px; font-weight:600}
  .btn-primary{background:var(--brand); color:#fff}
  .btn-primary:hover{background:#2148d8}
  .btn-ghost{background:transparent; color:var(--brand); border:1px solid var(--line)}
  .btn-ghost:hover{background:var(--brand-soft)}
  .btn-sm{padding:6px 12px; font-size:13px; border-radius:8px}
  .hidden{display:none !important}
  .muted{color:var(--muted)}
  .small{font-size:13px}
  .req{color:var(--red)}

  /* ---------- login ---------- */
  #login-screen{min-height:100vh; min-height:100dvh; display:flex; align-items:center; justify-content:center; padding:20px;
    background:linear-gradient(135deg,#2b52ec 0%, #7048e8 100%)}
  .login-card{background:#fff; border-radius:20px; padding:36px 32px; width:100%; max-width:420px; box-shadow:0 20px 60px rgba(10,20,60,.35)}
  .login-card h1{font-size:26px; margin-bottom:4px}
  .login-card .sub{color:var(--muted); margin-bottom:22px}
  .tabs{display:flex; gap:6px; background:var(--bg); border-radius:10px; padding:4px; margin-bottom:18px}
  .tabs button{flex:1; border:none; background:transparent; padding:9px; border-radius:8px; font-weight:600; color:var(--muted)}
  .tabs button.active{background:#fff; color:var(--brand); box-shadow:var(--shadow)}
  .field{margin-bottom:14px}
  .field label{display:block; font-size:13px; font-weight:600; margin-bottom:5px; color:var(--muted)}
  .login-msg{margin-top:12px; font-size:14px; padding:10px 12px; border-radius:8px}
  .login-msg.err{background:#fdecea; color:var(--red)}
  .login-msg.ok{background:#e6f4ea; color:var(--green)}
  .dev-otp{background:#fff8e1; border:1px dashed var(--amber); color:var(--amber); padding:10px 12px; border-radius:8px; margin-top:10px; font-size:14px}
  .dev-otp b{font-size:20px; letter-spacing:3px}

  /* ---------- shell ---------- */
  header.appbar{position:sticky; top:0; z-index:50; background:#fff; border-bottom:1px solid var(--line);
    display:flex; align-items:center; gap:14px; padding:10px 22px}
  .logo{font-weight:800; font-size:19px; color:var(--brand); display:flex; align-items:center; gap:8px; white-space:nowrap}
  nav.mainnav{display:flex; gap:4px; flex:1; overflow-x:auto}
  nav.mainnav button{border:none; background:transparent; padding:8px 14px; border-radius:9px; font-weight:600; color:var(--muted); white-space:nowrap}
  nav.mainnav button.active{background:var(--brand-soft); color:var(--brand)}
  .userchip{display:flex; align-items:center; gap:10px}
  .avatar{width:34px; height:34px; border-radius:50%; background:var(--violet); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:14px}
  .lang-toggle{border:1px solid var(--line); background:#fff; border-radius:8px; padding:6px 10px; font-weight:700; font-size:13px; color:var(--muted)}
  main{width:100%; margin:0 auto; padding:24px 32px 80px}

  /* ---------- feed ---------- */
  .feed-head{display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:18px}
  .feed-head h2{font-size:22px; margin-right:auto}
  .feed-filters{display:flex; gap:8px; flex-wrap:wrap}
  .feed-filters select, .feed-filters input{width:auto; padding:8px 10px; font-size:14px}
  .idea-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(310px,100%),1fr)); gap:14px}
  .idea-card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow);
    display:flex; flex-direction:column; gap:10px; cursor:pointer; transition:transform .12s, box-shadow .12s}
  .idea-card:hover{transform:translateY(-2px); box-shadow:0 8px 22px rgba(20,30,60,.12)}
  .idea-card h3{font-size:16.5px; line-height:1.35}
  /* Title là button thật → mở được bằng bàn phím; clamp 2 dòng để card đều nhau */
  .title-link{background:none; border:none; padding:0; font:inherit; color:inherit; text-align:left; cursor:pointer;
    display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; overflow-wrap:break-word}
  .idea-card .desc{color:var(--muted); font-size:14px; display:-webkit-box; -webkit-line-clamp:4; line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; overflow-wrap:break-word}
  .badges{display:flex; gap:6px; flex-wrap:wrap}
  .badge{font-size:12px; font-weight:700; padding:3px 9px; border-radius:20px; background:var(--bg); color:var(--muted)}
  .badge.st-new{background:#e8edff; color:var(--brand)}
  .badge.st-under_review{background:#fff4e0; color:var(--amber)}
  .badge.st-needs_work{background:#fdecea; color:var(--red)}
  .badge.st-approved{background:#e6f4ea; color:var(--green)}
  .badge.st-escalated{background:#f1ebff; color:var(--violet)}
  .badge.st-rejected{background:#eceff3; color:#616a7e}
  .badge.cat{background:#f0f3f8}
  .card-foot{display:flex; align-items:center; gap:14px; margin-top:auto; padding-top:8px; border-top:1px solid var(--line); font-size:13.5px; color:var(--muted)}
  .vote-btn{border:1px solid var(--line); background:#fff; border-radius:20px; padding:5px 13px; font-weight:700; font-size:13.5px; color:var(--muted); display:flex; gap:6px; align-items:center}
  .vote-btn.voted{background:var(--brand-soft); color:var(--brand); border-color:var(--brand)}
  .ai-chip{display:flex; align-items:center; gap:5px; font-weight:700; font-size:13px}
  .ai-chip .dot{width:8px; height:8px; border-radius:50%}

  /* ---------- modal ---------- */
  .modal-back{position:fixed; inset:0; background:rgba(15,22,40,.55); z-index:100; display:flex; align-items:flex-start; justify-content:center; padding:36px 16px; overflow-y:auto; overscroll-behavior:contain}
  .modal{background:#fff; border-radius:18px; width:100%; max-width:960px; padding:28px; position:relative; outline:none}
  .modal p{overflow-wrap:break-word}
  .modal .close{position:absolute; top:14px; right:16px; border:none; background:var(--bg); border-radius:8px; width:32px; height:32px; font-size:16px}
  .modal h2{font-size:21px; margin-bottom:6px; padding-right:40px; overflow-wrap:break-word}
  .meta-line{color:var(--muted); font-size:13.5px; margin-bottom:14px}
  .section-title{font-size:14px; font-weight:800; text-transform:uppercase; letter-spacing:.4px; color:var(--muted); margin:20px 0 10px}
  .ai-panel{background:linear-gradient(135deg,#f6f3ff,#eef4ff); border:1px solid #ded9f7; border-radius:14px; padding:18px}
  .ai-scores{display:grid; grid-template-columns:repeat(auto-fit,minmax(105px,1fr)); gap:10px; margin:12px 0}
  .score-box{background:#fff; border-radius:10px; padding:10px; text-align:center}
  .score-box .val{font-size:21px; font-weight:800; color:var(--violet)}
  .score-box .lbl{font-size:12px; color:var(--muted)}
  .ai-verdict{font-weight:700; color:var(--violet)}
  .ai-sug{margin-top:10px; padding-left:18px; color:var(--ink)}
  .ai-sug li{margin-bottom:6px; font-size:14px}
  .comment{display:flex; gap:10px; margin-bottom:12px}
  .comment .avatar{width:30px; height:30px; font-size:12px; flex-shrink:0}
  .comment .bubble{background:var(--bg); border-radius:10px; padding:9px 12px; flex:1}
  .comment .who{font-weight:700; font-size:13.5px}
  .comment .body{font-size:14px; margin-top:2px}
  .comment-form{display:flex; gap:8px; margin-top:10px}
  .status-actions{display:flex; gap:8px; flex-wrap:wrap; margin-top:10px}

  /* ---------- submit form ---------- */
  .panel{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:26px; box-shadow:var(--shadow); width:100%; margin:0 auto;}
  .panel h2{margin-bottom:18px}
  .check-row{display:flex; align-items:center; gap:8px; margin:6px 0 16px}
  .check-row input{width:auto}

  /* ---------- dashboard ---------- */
  .stat-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:12px; margin-bottom:22px}
  .stat{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow)}
  .stat .num{font-size:28px; font-weight:800; color:var(--brand)}
  .stat .lbl{color:var(--muted); font-size:13.5px; margin-top:2px}
  .two-col{display:grid; grid-template-columns:1fr 1fr; gap:14px}
  @media(max-width:760px){.two-col{grid-template-columns:1fr}}
  .bar-row{display:flex; align-items:center; gap:10px; margin-bottom:8px; font-size:13.5px}
  .bar-row .lbl{width:130px; color:var(--muted)}
  .bar-row .bar{flex:1; height:10px; background:var(--bg); border-radius:6px; overflow:hidden}
  .bar-row .fill{height:100%; background:var(--brand); border-radius:6px}
  .bar-row .n{width:30px; text-align:right; font-weight:700}

  /* ---------- admin ---------- */
  table{width:100%; border-collapse:collapse; font-size:14px}
  th,td{text-align:left; padding:9px 10px; border-bottom:1px solid var(--line)}
  th{font-size:12.5px; text-transform:uppercase; color:var(--muted); letter-spacing:.3px}
  .role-pill{font-size:12px; font-weight:700; padding:2px 9px; border-radius:12px; background:var(--bg)}
  .role-pill.admin{background:#fdecea; color:var(--red)}
  .role-pill.board{background:#f1ebff; color:var(--violet)}
  .role-pill.reviewer{background:#fff4e0; color:var(--amber)}
  .import-box{border:2px dashed var(--line); border-radius:var(--radius); padding:22px; text-align:center; margin-bottom:20px; background:#fbfcfe}
  /* Toast xếp chồng dọc trong container aria-live — không đè nhau, SR đọc được */
  #toast-root{position:fixed; bottom:24px; left:50%; transform:translateX(-50%); z-index:400;
    display:flex; flex-direction:column-reverse; gap:8px; align-items:center; pointer-events:none; max-width:min(92vw,480px)}
  .toast{background:var(--ink); color:#fff; padding:12px 22px; border-radius:12px; box-shadow:0 8px 30px rgba(0,0,0,.3); font-weight:600}
  .code-box{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; background:var(--bg); border:1px solid var(--line);
    border-radius:8px; padding:8px 10px; font-size:13px; word-break:break-all; user-select:all}
  .int-panel h3{margin:4px 0 6px}
  .int-panel hr{border:none; border-top:1px solid var(--line); margin:18px 0}
  /* Tab trang Admin — cuộn ngang trên mobile thay vì xuống dòng vỡ hàng */
  .admin-tabs{display:flex; gap:4px; border-bottom:2px solid var(--line); margin-bottom:20px; overflow-x:auto}
  .admin-tabs button{border:none; background:transparent; padding:11px 16px; font-weight:600; font-size:14.5px;
    color:var(--muted); border-bottom:2px solid transparent; margin-bottom:-2px; white-space:nowrap}
  .admin-tabs button:hover{color:var(--ink)}
  .admin-tabs button[aria-selected="true"]{color:var(--brand); border-bottom-color:var(--brand)}
  .log-table td{vertical-align:top}
  .log-table .log-time{white-space:nowrap; color:var(--muted); font-size:13px}
  .log-action{font-weight:600}
  .log-detail{color:var(--muted); font-size:13px; overflow-wrap:anywhere}
  /* Kiểm duyệt: bài đã gỡ (chỉ tác giả + admin thấy) */
  .hidden-banner{background:#fdecea; border-left:4px solid var(--red); color:#7a1c12;
    padding:10px 12px; border-radius:8px; margin-bottom:14px; font-size:14px}
  .btn-danger{background:var(--red); color:#fff}
  .btn-link-danger{border:none; background:transparent; color:var(--red); font-weight:700;
    padding:0 6px; font-size:13px; line-height:1; margin-left:4px}
  .btn-link-danger:hover{text-decoration:underline}
  .empty{padding:50px 20px; text-align:center; color:var(--muted)}
  .empty .big{font-size:42px; margin-bottom:10px}
  .table-wrap{overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius)}
  .report-table th{white-space:nowrap}
  .report-table td.rp-title{font-weight:600; min-width:200px}

  /* ---------- loading states ---------- */
  /* thanh progress mảnh trên cùng — chạy mỗi khi có API call */
  #progress-bar{position:fixed; top:0; left:0; height:3px; width:0; z-index:300;
    background:linear-gradient(90deg,var(--brand),var(--violet)); opacity:0;
    transition:width .3s ease, opacity .3s ease; box-shadow:0 0 8px rgba(112,72,232,.5)}
  #progress-bar.active{opacity:1}

  /* spinner trong nút */
  .spinner{display:inline-block; width:16px; height:16px; border:2px solid rgba(255,255,255,.45);
    border-top-color:#fff; border-radius:50%; animation:spin .6s linear infinite; vertical-align:-3px}
  .btn-ghost .spinner{border-color:rgba(47,92,255,.28); border-top-color:var(--brand)}
  @keyframes spin{to{transform:rotate(360deg)}}
  .btn.loading{cursor:progress; opacity:.9}
  .btn:not(:disabled):active{transform:translateY(1px)}
  .btn:disabled{cursor:not-allowed; opacity:.6}
  .btn.loading:disabled{opacity:.9}
  .vote-btn:disabled{opacity:.7; cursor:progress}
  td, .bar-row .n, .stat .num, .score-box .val{font-variant-numeric:tabular-nums}

  /* skeleton shimmer */
  .skeleton{position:relative; overflow:hidden; background:#e7ecf4; border-radius:8px}
  .skeleton::after{content:''; position:absolute; inset:0; transform:translateX(-100%);
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.7),transparent); animation:shimmer 1.25s infinite}
  @keyframes shimmer{100%{transform:translateX(100%)}}
  .sk-line{height:13px; border-radius:6px}
  .sk-card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:18px;
    box-shadow:var(--shadow); display:flex; flex-direction:column; gap:11px; min-height:150px}

  /* fade-in khi data về */
  .fade-in{animation:fadeIn .28s ease}
  @keyframes fadeIn{from{opacity:0; transform:translateY(5px)} to{opacity:1; transform:none}}

  /* ---------- responsive (docs/02 mục 1: header 2 hàng dưới 900px, touch 44px) ---------- */
  @media(max-width:900px){
    header.appbar{flex-wrap:wrap; padding:8px 14px; gap:8px; row-gap:4px}
    /* nav xuống hàng riêng, cuộn ngang + fade mép phải làm affordance */
    nav.mainnav{order:3; flex-basis:100%; -webkit-mask-image:linear-gradient(90deg,#000 94%,transparent);
      mask-image:linear-gradient(90deg,#000 94%,transparent)}
    .lang-toggle{margin-left:auto}
    .userchip .u-meta{display:none}
    nav.mainnav button, .btn-sm, .lang-toggle, .tabs button, .vote-btn{min-height:44px}
    .modal .close{min-height:44px; width:44px}
    .feed-filters{width:100%}
    .feed-filters input,.feed-filters select{flex:1; min-width:140px}
    main{padding:18px 14px 70px}
    .modal{padding:22px 18px}
    .modal-back{padding:20px 10px}
  }
  @media(max-width:768px){
    input,textarea,select{font-size:16px} /* ≥16px để iOS không auto-zoom khi focus */
  }
  @media(max-width:420px){
    .logo .logo-text{display:none}
  }
  /* ---------- pagination + a11y (audit Web Interface Guidelines) ---------- */
  .load-more-wrap{display:flex; justify-content:center; margin-top:18px}
  .load-more-wrap:empty{margin:0}
  .admin-toolbar{margin-bottom:12px; max-width:380px}
  .admin-toolbar input{width:100%}
  /* skip link: ẩn ngoài màn hình, hiện khi focus bằng bàn phím → bỏ qua nav tới nội dung */
  .skip-link{position:absolute; left:-9999px; top:0; z-index:600; background:var(--brand); color:#fff;
    padding:10px 16px; border-radius:0 0 10px 0; font-weight:700; text-decoration:none}
  .skip-link:focus{left:0}
  main:focus{outline:none}
  h1,h2,h3{text-wrap:balance}
  body{-webkit-tap-highlight-color:rgba(43,82,236,.12)}
  @media(prefers-reduced-motion:reduce){
    *,*::before,*::after{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important}
  }

  /* ---------- FAB Menas One ---------- */
  .fab-dock { position:fixed; z-index:50; width:56px; height:56px; touch-action:none; top:0; left:0;
    transition:transform 0.3s ease-out; }
  .fab-dock.dragging { transition:none; cursor:grabbing; }
  
  .fab-menu-wrapper { position:absolute; top:50%; left:50%; z-index:50; pointer-events:none;
    transition:transform 0.3s ease-out; display:flex; justify-content:center; }
  
  .fab-menu {
    display:flex; flex-direction:column; align-items:center; overflow:hidden; border-radius:16px;
    background:rgba(255,255,255,0.75); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
    border:1px solid rgba(255,255,255,0.6); box-shadow:0 12px 35px rgba(0,0,0,0.12);
    transition:all 0.3s ease-out; pointer-events:none; opacity:0; transform:scale(0.9);
  }
  .fab-dock.open .fab-menu { opacity:1; transform:scale(1); pointer-events:auto; }
  
  .fab-menu-inner { display:flex; flex-direction:column; align-items:stretch; gap:2px; padding:6px; }

  .fab-item { display:flex; flex-direction:column; align-items:center; gap:4px; width:56px; border-radius:12px;
    padding:8px; text-decoration:none; color:#64748b; transition:all 0.2s; outline:none; cursor:pointer; }
  .fab-item:hover, .fab-item:focus-visible { color:#15803d; font-weight:bold; }
  .fab-icon-wrapper { position:relative; }
  .fab-icon-wrapper svg { transition:all 0.2s; }
  .fab-item:not(.active):hover .fab-icon-wrapper svg { transform:scale(1.1) translateY(-2px); }
  .fab-item .lbl { font-size:10px; font-weight:600; white-space:nowrap; }
  .fab-divider { height:1px; background:#cbd5e1; width:calc(100% - 16px); margin:4px 8px; }
  .fab-item.danger { color:#f87171; }
  .fab-item.danger:hover { color:#ef4444; background:rgba(254,226,226,0.5); }
  
  .fab-btn { display:flex; align-items:center; justify-content:center; width:56px; height:56px; border-radius:50%;
    background:#16a34a; color:#fff; border:none; box-shadow:0 12px 30px rgba(22,163,74,0.45);
    transition:all 0.3s; cursor:pointer; outline:none; }
  .fab-btn:hover { transform:scale(1.05); background:#15803d; }
  .fab-btn:active { transform:scale(0.95); }
  .fab-btn svg { transition:transform 0.5s ease-in-out; }
  .fab-dock.open .fab-btn svg { transform:rotate(90deg); }