/* Techoria Voice — nền navy tối, nhãn mono viết hoa, thẻ viền màu (violet / cam / xanh dương / xanh lá) như bộ slide Certification. Ít hiệu ứng: chỉ một quầng sáng ấm góc dưới. */
:root {
  color-scheme: dark;
  --bg: #0A0E1C; --s1: #10152A; --s2: #151B33; --line: #232B47; --line-2: #2F3960;
  --tx: #E8ECF6; --mut: #8A93B2; --mut-2: #5F698C;
  --vio: #8B7CF6; --ora: #F59E5B; --blu: #5B9BF5; --grn: #4ADE80; --red: #F87171;
  --vio-bg: rgba(139,124,246,.10); --ora-bg: rgba(245,158,91,.10); --blu-bg: rgba(91,155,245,.10); --grn-bg: rgba(74,222,128,.09); --red-bg: rgba(248,113,113,.10);
  --display: "Space Grotesk", system-ui, sans-serif; --sans: Inter, system-ui, -apple-system, "Segoe UI", sans-serif; --mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
}
* { box-sizing: border-box; margin: 0; }
html, body { background: var(--bg); }
body { color: var(--tx); font: 15px/1.5 var(--sans); min-height: 100vh; background: radial-gradient(900px 500px at 100% 100%, rgba(245,158,91,.10), transparent 60%), radial-gradient(700px 400px at 0 0, rgba(139,124,246,.08), transparent 55%), var(--bg); background-attachment: fixed; }
button, input, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--vio); outline-offset: 2px; }
.wrap { max-width: 1080px; margin: 0 auto; padding: 28px 20px 64px; }

.eyebrow { font: 600 .68rem var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--mut); }
.eyebrow b { color: var(--vio); font-weight: 600; }
h1 { font: 700 clamp(1.8rem, 4.5vw, 2.6rem)/1.1 var(--display); letter-spacing: -.02em; margin: 8px 0 6px; }
h2 { font: 600 1.15rem var(--display); letter-spacing: -.01em; }
.sub { color: var(--mut); max-width: 62ch; }
.rule { width: 52px; height: 2px; background: var(--ora); margin: 14px 0 0; border-radius: 2px; }

/* thanh trên + bước */
.top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: space-between; margin-bottom: 26px; }
.me { display: flex; align-items: center; gap: 10px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 7px; border: 1px solid var(--line-2); background: var(--s1); font: 600 .64rem var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--mut); }
.chip.vio { color: var(--vio); border-color: rgba(139,124,246,.5); background: var(--vio-bg); }
.chip.ora { color: var(--ora); border-color: rgba(245,158,91,.5); background: var(--ora-bg); }
.chip.grn { color: var(--grn); border-color: rgba(74,222,128,.45); background: var(--grn-bg); }
.chip.blu { color: var(--blu); border-color: rgba(91,155,245,.5); background: var(--blu-bg); }
.chip.red { color: var(--red); border-color: rgba(248,113,113,.5); background: var(--red-bg); }
.track { display: flex; gap: 6px; margin: 22px 0 24px; flex-wrap: wrap; }
.track a { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--s1); color: var(--mut); text-decoration: none; font: 600 .72rem var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.track a::before { content: ""; width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid var(--mut-2); }
.track a[aria-current=page] { color: var(--ora); border-color: rgba(245,158,91,.6); background: var(--ora-bg); }
.track a[aria-current=page]::before { background: var(--ora); border-color: var(--ora); }

/* thẻ */
.card { border: 1px solid var(--line); border-radius: 16px; background: var(--s1); padding: 18px; }
.card.vio { border-color: rgba(139,124,246,.55); background: linear-gradient(var(--vio-bg), var(--vio-bg)), var(--s1); }
.card.ora { border-color: rgba(245,158,91,.55); background: linear-gradient(var(--ora-bg), var(--ora-bg)), var(--s1); }
.card.blu { border-color: rgba(91,155,245,.55); background: linear-gradient(var(--blu-bg), var(--blu-bg)), var(--s1); }
.card.grn { border-color: rgba(74,222,128,.5); background: linear-gradient(var(--grn-bg), var(--grn-bg)), var(--s1); }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 18px; }
.stat .eyebrow { display: block; margin-bottom: 10px; }
.stat strong { font: 700 1.9rem/1 var(--display); letter-spacing: -.02em; }
.stat small { display: block; margin-top: 6px; color: var(--mut); font-size: .8rem; }
.takeaway { display: inline-block; padding: 9px 16px; border: 1px solid rgba(74,222,128,.5); background: var(--grn-bg); color: var(--tx); border-radius: 12px; font-weight: 500; margin: 6px 0 22px; }

/* điều khiển */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 15px; border: 1px solid var(--line-2); border-radius: 11px; background: var(--s2); cursor: pointer; font-weight: 500; font-size: .9rem; white-space: nowrap; }
.btn:hover { border-color: var(--mut-2); }
.btn.pri { background: var(--vio); border-color: var(--vio); color: #0B0820; font-weight: 600; }
.btn.pri:hover { filter: brightness(1.08); }
.btn.sm { padding: 6px 9px; border-radius: 9px; }
.btn.danger:hover { border-color: var(--red); color: var(--red); }
.btn:disabled { opacity: .4; cursor: default; }
.btn svg { width: 16px; height: 16px; flex: none; }
.in { padding: 9px 12px; border: 1px solid var(--line-2); border-radius: 11px; background: var(--bg); min-width: 0; }
.in:focus { border-color: var(--vio); outline: none; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.row .grow { flex: 1 1 200px; }
.seg { display: inline-flex; border: 1px solid var(--line-2); border-radius: 11px; overflow: hidden; }
.seg button { all: unset; box-sizing: border-box; cursor: pointer; padding: 8px 13px; font-size: .86rem; border-left: 1px solid var(--line-2); display: flex; gap: 6px; align-items: baseline; }
.seg button:first-child { border-left: 0; }
.seg button small { color: var(--mut); font: 500 .7rem var(--mono); }
.seg button[aria-pressed=true] { background: var(--vio-bg); color: var(--vio); font-weight: 600; }
.seg button:focus-visible { outline: 2px solid var(--vio); outline-offset: -2px; }

/* bảng */
.tw { border: 1px solid var(--line); border-radius: 16px; background: var(--s1); overflow: auto; }
table { width: 100%; border-collapse: collapse; font-size: .9rem; }
th, td { padding: 10px 14px; text-align: left; border-top: 1px solid var(--line); vertical-align: middle; }
th { border-top: 0; font: 600 .66rem var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--mut); }
.m { font-family: var(--mono); font-size: .84rem; overflow-wrap: anywhere; }
.kc { cursor: text; }
.kin { width: 100%; min-width: 220px; padding: 6px 10px; border: 1px solid var(--vio); border-radius: 9px; background: var(--bg); font: .84rem var(--mono); }
.acts { white-space: nowrap; text-align: right; }
.empty { padding: 34px 16px; text-align: center; color: var(--mut); }
.hint { color: var(--mut); font-size: .85rem; }
.pg { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.pg .sp { flex: 1; }

/* đăng nhập */
.login { max-width: 440px; margin: 9vh auto 0; }
.login form { display: grid; gap: 12px; margin-top: 22px; }
.field { display: grid; gap: 6px; }
.field label { font: 600 .66rem var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--mut); }
.err { color: var(--red); font-size: .88rem; min-height: 1.2em; }

/* toast */
#toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); display: grid; gap: 8px; z-index: 9; width: max-content; max-width: calc(100vw - 32px); }
.toast { padding: 10px 16px; border-radius: 12px; border: 1px solid rgba(74,222,128,.5); background: #0F2A1F; font-size: .9rem; }
.toast.bad { border-color: rgba(248,113,113,.6); background: #2A1212; }

@media (max-width: 760px) {
  .wrap { padding: 20px 16px 56px; }
  .stats { grid-template-columns: 1fr 1fr; }
  .btn, .in { min-height: 44px; font-size: 16px; }
  .seg { width: 100%; } .seg button { flex: 1; justify-content: center; min-height: 44px; align-items: center; }
  .tw { border: 0; background: none; overflow: visible; }
  table, tbody { display: block; } thead { display: none; }
  tr { display: grid; grid-template-columns: 1fr auto; gap: 8px 10px; margin-bottom: 10px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--s1); }
  td { display: block; padding: 0; border: 0; min-width: 0; }
  td.full { grid-column: 1 / -1; } td.acts { grid-column: 1 / -1; text-align: left; display: flex; gap: 6px; flex-wrap: wrap; }
  td.kc { grid-column: 1 / -1; padding: 10px 12px; border: 1px dashed var(--line-2); border-radius: 11px; background: var(--bg); min-height: 44px; }
  .kin { font-size: 16px; min-width: 0; }
}

/* Mail tạm */
.mgrid { display: grid; grid-template-columns: minmax(260px, 360px) 1fr; gap: 16px; align-items: start; }
.mrow { display: flex; align-items: center; gap: 6px; padding: 8px 8px 8px 12px; margin-bottom: 8px; }
.mpick { all: unset; cursor: pointer; flex: 1; min-width: 0; display: grid; gap: 2px; padding: 4px 0; }
.mpick:focus-visible { outline: 2px solid var(--vio); outline-offset: 2px; border-radius: 6px; }
.msg { all: unset; box-sizing: border-box; display: grid; gap: 2px; width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; margin-bottom: 8px; cursor: pointer; background: var(--bg); }
.msg:hover, .msg.on { border-color: var(--ora); }
.msg:focus-visible { outline: 2px solid var(--vio); }
.msg .hint { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mbody { white-space: pre-wrap; overflow-wrap: anywhere; font: .86rem/1.55 var(--mono); margin: 12px 0; padding: 12px; background: var(--bg); border: 1px solid var(--line); border-radius: 12px; max-height: 420px; overflow: auto; }
.mlinks { display: grid; gap: 4px; margin-top: 6px; } .mlinks a { color: var(--blu); }
button.chip { cursor: pointer; }
@media (max-width: 860px) { .mgrid { grid-template-columns: 1fr; } }

/* kết quả kiểm tra key (số nhỏ dưới API key) */
.ck { margin-top: 3px; font: 500 .72rem var(--mono); color: var(--mut); }
.ck b { font-weight: 600; } .ck.ok { color: var(--grn); } .ck.warn { color: var(--ora); } .ck.bad { color: var(--red); }
.btn.spin svg { animation: sp .8s linear infinite; } @keyframes sp { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .btn.spin svg { animation: none; } }
.kc .m { font-size: .78rem; overflow-wrap: normal; word-break: keep-all; white-space: nowrap; } .acts { width: 1%; }
.card.red { border-color: rgba(248,113,113,.55); background: linear-gradient(var(--red-bg), var(--red-bg)), var(--s1); }
.stats.credit { margin: 4px 0 14px; } .stats.credit .stat strong { font-size: 1.5rem; }
.ec { cursor: text; } .ec .kin { min-width: 200px; }
.mbody { font: .92rem/1.6 var(--sans); } ol.mlinks { margin: 6px 0 0; padding-left: 22px; display: grid; gap: 3px; } ol.mlinks li::marker { color: var(--mut); font: .75rem var(--mono); } ol.mlinks a { word-break: break-all; font-size: .8rem; }
.mframe { display: block; width: 100%; height: 560px; border: 1px solid var(--line); border-radius: 12px; background: #fff; margin-bottom: 14px; }
@media (max-width: 860px) { .mframe { height: 480px; } }

/* Gmail: master–detail trên điện thoại (chọn thư → toàn màn hình, nút Back) */
.gback { display: none; margin-bottom: 8px; } .gsub { margin: 4px 0 2px; font-size: 1.1rem; overflow-wrap: anywhere; }
.msg b, .msg .hint { min-width: 0; overflow-wrap: anywhere; }
.msg b { white-space: normal; }
@media (max-width: 860px) {
  .mgrid.has-open #glist { display: none; } .mgrid:not(.has-open) .gph { display: none; }
  .gback { display: inline-flex; }
  .mframe { height: 70vh; min-height: 420px; }
  .row .grow:empty { display: none; }
}

/* sửa tràn ngang trên điện thoại: mọi ô lưới được phép co, chuỗi dài (địa chỉ relay) tự ngắt */
.mgrid > *, .wrap { min-width: 0; } .card { overflow-wrap: anywhere; }
@media (max-width: 860px) {
  .msg .hint { white-space: normal; overflow: visible; text-overflow: clip; }
  .mframe { height: 62vh; min-height: 360px; }
  .gsub { font-size: 1.05rem; }
}

/* icon copy link ở góc phải mỗi thư trong danh sách */
.msgw { position: relative; margin-bottom: 8px; } .msgw .msg { margin-bottom: 0; padding-right: 76px; }
.msgw .cpl { position: absolute; top: 8px; right: 8px; padding: 6px 8px; }
.msgw .cpl:disabled { opacity: .5; }
.msg .ts { color: var(--tx); opacity: .8; font: 500 .74rem var(--mono); }