:root{
  --bg: #F7F4EC;
  --panel: #FFFFFF;
  --ink: #1E2420;
  --ink-soft: #5B5F55;
  --line: #E4DFCF;
  --accent: #2F6F62;
  --accent-soft: #E7F0EC;
  --gold: #B8862E;
  --radius: 14px;
  --danger: #A6462E;
  --sidebar-bg: #14201B;
  --sidebar-ink: #E8E4D6;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:'Be Vietnam Pro',sans-serif;
  min-height:100vh;
}
h1,h2,h3{ font-family:'Playfair Display',serif; margin:0; }
::selection{ background:var(--gold); color:#fff; }
a{ color:inherit; }

/* ===== App layout ===== */
.app-layout{ display:flex; min-height:100vh; }
.sidebar{
  width:220px; flex-shrink:0; background:var(--sidebar-bg); color:var(--sidebar-ink);
  display:flex; flex-direction:column; padding:22px 14px; position:sticky; top:0; height:100vh;
  overflow-x:hidden;
}
.sidebar-brand{ display:flex; align-items:center; gap:10px; padding:4px 8px 4px; }
.sidebar-brand .brand-logo{ width:34px; height:34px; border-radius:50%; flex-shrink:0; object-fit:cover; }
.sidebar-brand .brand-text{ font-family:'Playfair Display',serif; font-size:18px; font-weight:700; line-height:1.2; min-width:0; }
.sidebar-brand small{ display:block; font-family:'IBM Plex Mono',monospace; font-size:9px; font-weight:400; letter-spacing:.03em; color:#9CA396; margin-top:4px; text-transform:uppercase; line-height:1.5; white-space:nowrap; }
.sidebar-nav{ margin-top:26px; display:flex; flex-direction:column; gap:2px; flex:1; min-height:0; overflow-y:auto; }
.sidebar-item{
  display:flex; align-items:center; gap:10px; padding:10px 10px; border-radius:8px; cursor:pointer;
  font-size:13.5px; color:#C7CBBC; transition:background .15s ease, color .15s ease; user-select:none;
}
.sidebar-item:hover{ background:rgba(255,255,255,.06); color:#fff; }
.sidebar-item.active{ background:rgba(255,255,255,.1); color:#fff; }
.sidebar-item .num{
  width:20px; height:20px; border-radius:50%; background:rgba(255,255,255,.08); color:#9CA396;
  font-family:'IBM Plex Mono',monospace; font-size:11px; display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.sidebar-item.active .num{ background:var(--gold); color:#1E2420; }
.sidebar-foot{ margin-top:auto; font-family:'Be Vietnam Pro',sans-serif; font-size:12px; color:#9CA396; line-height:1.6; padding:10px; border-top:1px solid rgba(255,255,255,.08); }
.sidebar-foot .signout{ cursor:pointer; color:#C7CBBC; }
.sidebar-foot .signout:hover{ color:#fff; }

.main{ flex:1; min-width:0; }
.main-inner{ max-width:760px; margin:0 auto; padding:32px 24px 90px; }

/* ===== Auth screen ===== */
.auth-shell{ max-width:400px; margin:0 auto; padding:80px 20px; }
.auth-shell .auth-logo{ display:block; width:64px; height:64px; border-radius:50%; object-fit:cover; margin:0 auto 14px; }
.auth-shell h1{ font-size:26px; text-align:center; margin-bottom:6px; }
.auth-shell .sub{ text-align:center; color:var(--ink-soft); font-size:14px; margin-bottom:28px; line-height:1.7; }
.auth-shell .sub .sub-brand{ display:inline-block; margin-top:2px; font-size:12px; letter-spacing:.02em; }
.auth-shell label{ display:block; font-size:13px; font-weight:600; color:var(--ink-soft); margin:14px 0 6px; }
.auth-shell input{
  width:100%; padding:12px 14px; border:1px solid var(--line); border-radius:10px;
  font-size:14.5px; font-family:'Be Vietnam Pro',sans-serif; background:#FDFCF8; color:var(--ink);
}
.auth-shell input:focus{ outline:none; border-color:var(--accent); }
.auth-tabs{ display:flex; gap:8px; margin-bottom:10px; justify-content:center; }
.auth-tab{ padding:8px 16px; border-radius:999px; font-size:13px; cursor:pointer; color:var(--ink-soft); }
.auth-tab.active{ background:var(--accent-soft); color:var(--accent); font-weight:600; }

/* ===== Shared components ===== */
.btn{
  appearance:none; border:none; cursor:pointer; font-family:'Be Vietnam Pro',sans-serif; font-weight:600; font-size:15px;
  padding:14px 26px; border-radius:999px; background:var(--accent); color:#fff; transition:transform .12s ease, opacity .12s ease;
}
.btn:hover{ opacity:.92; }
.btn:active{ transform:scale(.98); }
.btn:disabled{ background:var(--line); color:var(--ink-soft); cursor:not-allowed; }
.btn-sm{ padding:9px 18px; font-size:13.5px; }
.btn-ghost{ background:transparent; color:var(--ink-soft); border:1px solid var(--line); padding:11px 20px; font-size:14px; }
.btn-row{ display:flex; gap:12px; justify-content:center; margin-top:28px; flex-wrap:wrap; }
.btn-full{ width:100%; text-align:center; margin-top:22px; }

.error-box{ background:#FBEAE5; border:1px solid var(--danger); color:var(--danger); padding:14px 16px; border-radius:10px; font-size:13.5px; line-height:1.6; margin-top:16px; }
.hint-box{ background:var(--accent-soft); border:1px solid var(--line); color:var(--accent); padding:14px 16px; border-radius:10px; font-size:13.5px; line-height:1.6; margin-top:16px; }

.tour-trigger{
  position:fixed; top:16px; right:16px; z-index:200; cursor:pointer;
  background:var(--gold); color:#241C05; font-weight:700; font-size:13px;
  padding:10px 18px; border-radius:999px; box-shadow:0 4px 14px rgba(0,0,0,.22);
}
@media (max-width:820px){
  .tour-trigger{ top:70px; right:12px; padding:8px 14px; font-size:12.5px; }
}

.page-head{ margin-bottom:24px; }
.page-head .tag{ display:inline-block; font-family:'IBM Plex Mono',monospace; font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); background:var(--accent-soft); padding:5px 12px; border-radius:999px; margin-bottom:12px; }
.page-head h1{ font-size:26px; }
.page-head p{ color:var(--ink-soft); font-size:14.5px; margin-top:8px; line-height:1.6; }

.card{ background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:26px 24px; box-shadow:0 1px 2px rgba(30,36,32,.03); }
.autofill-pulse{ animation:autofill-glow 1s ease-in-out 3; }
@keyframes autofill-glow{ 0%,100%{ box-shadow:0 1px 2px rgba(30,36,32,.03); } 50%{ box-shadow:0 0 0 4px var(--accent); } }
.section{ background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:24px; margin-bottom:16px; }
.section h3{ font-size:12.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--gold); font-family:'IBM Plex Mono',monospace; font-weight:600; margin-bottom:12px; }
.section .body{ font-size:15px; line-height:1.7; color:var(--ink); white-space:pre-line; }
.section .body.protected{ user-select:none; -webkit-user-select:none; -moz-user-select:none; }
.section.highlight, .section.highlight-dark{ background:#EDEBE3; color:var(--ink); border-color:#DCD8C9; }
.section.highlight h3, .section.highlight-dark h3{ color:var(--ink-soft); }
.section.highlight .body, .section.highlight-dark .body{ color:var(--ink); }
.section.highlight .body b, .section.highlight-dark .body b{ color:#8A5A00; }

textarea, select{
  width:100%; margin-top:12px; font-family:'Be Vietnam Pro',sans-serif; font-size:15px; line-height:1.55;
  padding:14px; border:1px solid var(--line); border-radius:10px; background:#FDFCF8; color:var(--ink);
}
textarea{ min-height:100px; resize:vertical; }
textarea:focus, select:focus{ outline:none; border-color:var(--accent); }

.chips{ margin-top:14px; display:flex; flex-wrap:wrap; gap:9px; }
.chip{ padding:10px 16px; border-radius:999px; border:1px solid var(--line); font-size:13.5px; cursor:pointer; background:#FDFCF8; color:var(--ink); transition:border-color .12s ease, background .12s ease, color .12s ease; }
.chip.selected{ background:var(--accent); border-color:var(--accent); color:#fff; }

.source-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:10px; margin-top:16px; }
.source-card{ border:1px solid var(--line); border-radius:12px; padding:16px 12px; text-align:center; cursor:pointer; background:#FDFCF8; transition:border-color .12s ease, background .12s ease; }
.source-card:hover{ border-color:var(--accent); }
.source-card.selected{ border-color:var(--accent); background:var(--accent-soft); }
.source-card .ic{ font-size:22px; margin-bottom:8px; }
.source-card .label{ font-size:12.5px; font-weight:600; color:var(--ink); line-height:1.3; }

.idea-item, .list-item{ border:1px solid var(--line); border-radius:12px; padding:16px 18px; margin-bottom:10px; background:#FDFCF8; display:flex; justify-content:space-between; align-items:flex-start; gap:14px; }
.idea-item .txt, .list-item .txt{ font-size:14.5px; line-height:1.55; flex:1; }
.idea-item .meta, .list-item .meta{ font-size:11.5px; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.04em; margin-bottom:6px; font-family:'IBM Plex Mono',monospace; }

.tab-row{ display:flex; gap:8px; margin-bottom:20px; flex-wrap:wrap; }
.tab-btn{ padding:9px 18px; border-radius:999px; font-size:13.5px; cursor:pointer; color:var(--ink-soft); border:1px solid var(--line); background:#FDFCF8; }
.tab-btn.active{ background:var(--accent); color:#fff; border-color:var(--accent); }

.loading{ text-align:center; padding:70px 0; }
.spinner{ width:36px;height:36px;border-radius:50%; border:3px solid var(--line); border-top-color:var(--accent); margin:0 auto 20px; animation:spin .9s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }
.loading p{ color:var(--ink-soft); font-size:14px; }

table.plan{ width:100%; border-collapse:collapse; font-size:13.5px; margin-top:6px; }
table.plan th, table.plan td{ border:1px solid var(--line); padding:8px 10px; text-align:left; vertical-align:top; }
table.plan th{ background:#FBF9F2; font-weight:600; font-size:12px; }

.week-grid{ display:grid; grid-template-columns:repeat(7,minmax(120px,1fr)); gap:10px; overflow-x:auto; margin-top:10px; }
.week-col{ background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:10px; min-width:120px; }
.week-col .day{ font-family:'IBM Plex Mono',monospace; font-size:11.5px; color:var(--ink-soft); margin-bottom:8px; }
.week-slot{ border:1px dashed var(--line); border-radius:8px; padding:8px; font-size:12px; margin-bottom:8px; min-height:44px; }
.week-slot .slot-label{ font-size:10px; text-transform:uppercase; color:var(--ink-soft); margin-bottom:4px; letter-spacing:.05em; }
.week-slot.filled{ border-style:solid; border-color:var(--accent); background:var(--accent-soft); }

.topbar-mobile{ display:none; }
.sidebar-overlay{ display:none; }

/* Tạo Ảnh — 2 cột cố định (không dùng flex-wrap, tránh lỗi chồng đè khi item "sticky" rơi vào
   dòng flex riêng). Cột phải (preview) luôn giữ đúng 280px và dính khi cuộn trên desktop. */
.ta-layout{ display:grid; grid-template-columns:1fr 280px; gap:24px; align-items:start; }
.ta-preview{ position:sticky; top:16px; }
@media (max-width:820px){
  .ta-layout{ grid-template-columns:1fr; }
  /* Trên điện thoại không đủ chỗ hiện 2 cột — quay lại đúng trải nghiệm cũ: ảnh xem trước hiện
     NGAY ĐẦU (order:-1, đứng trước cột cài đặt dù đứng sau trong HTML), cập nhật live khi chỉnh
     bên dưới, khỏi phải kéo xuống cuối mới thấy kết quả. */
  .ta-preview{ position:static; justify-self:start; order:-1; }
}

@media (max-width:820px){
  .app-layout{ flex-direction:column; }

  /* Sidebar trở thành ngăn kéo (drawer) trượt ra từ trái, ẩn mặc định — mở bằng nút ☰ ở topbar
     cố định phía trên. Giữ nguyên bố cục dọc như bản desktop (không còn ép thành hàng ngang tràn
     lề như trước), vì giờ có đủ chỗ hiển thị full-height khi mở ra. */
  .sidebar{
    width:260px; max-width:82vw; height:100vh; position:fixed; top:0; left:0; z-index:101;
    flex-direction:column; align-items:stretch; overflow-x:visible; padding:22px 14px;
    transform:translateX(-100%); transition:transform .22s ease;
  }
  .sidebar.open{ transform:translateX(0); }
  .sidebar-brand{ display:flex; }
  .sidebar-nav{ margin-top:26px; flex-direction:column; }
  .sidebar-foot{ display:block; }

  .sidebar-overlay{
    display:block; position:fixed; inset:0; background:rgba(20,24,20,.5); z-index:100;
    opacity:0; pointer-events:none; transition:opacity .22s ease;
  }
  .sidebar-overlay.open{ opacity:1; pointer-events:auto; }

  /* Thanh này là nút mở toolbar (sidebar), phải luôn nổi cố định trên cùng khi cuộn — chỉ bản
     thân toolbar mới ẩn mặc định, không được để mất luôn cả nút mở ra nó. Dùng fixed (không phải
     sticky) để chắc chắn không bị cuộn mất trong mọi trường hợp (kể cả PWA standalone trên iOS). */
  .topbar-mobile{
    display:flex; align-items:center; gap:12px; position:fixed; top:0; left:0; right:0; z-index:60;
    background:var(--sidebar-bg); color:var(--sidebar-ink); padding:14px 16px;
  }
  .topbar-mobile .menu-toggle{
    width:34px; height:34px; border-radius:8px; display:flex; align-items:center; justify-content:center;
    font-size:18px; cursor:pointer; background:rgba(255,255,255,.08); flex-shrink:0;
  }
  .topbar-mobile .topbar-title{ font-family:'Playfair Display',serif; font-size:16px; font-weight:700; }
  .app-layout{ margin-top:62px; }

  .main-inner{ padding:20px 16px 70px; }
  /* Trên di động, 7 cột ngang buộc phải kéo sang mới xem hết tuần — xếp mỗi ngày 1 hàng dọc, ngày
     làm nhãn cột trái + 3 buổi (sáng/trưa/tối) nằm ngang cùng hàng đó, không cần cuộn ngang nữa. */
  .week-grid{ grid-template-columns:1fr; overflow-x:visible; gap:8px; }
  .week-col{ display:grid; grid-template-columns:64px repeat(3,1fr); gap:8px; align-items:stretch; min-width:0; }
  .week-col .day{ display:flex; align-items:center; margin-bottom:0; font-size:10.5px; line-height:1.3; }
  .week-slot{ min-height:auto; }

  /* iOS Safari tự động phóng to (zoom) trang khi người dùng bấm vào 1 ô nhập có cỡ chữ < 16px —
     đúng lúc đăng nhập (ô email/mật khẩu) là dễ gặp nhất. Sau khi phóng, mức zoom đó dính luôn
     sang cả màn app chính (vẫn cùng 1 trang, không tải lại), che mất nút ☰ mở sidebar ở trên
     cùng — phải kéo/pinch tay mới thấy lại. Ép mọi ô nhập tối thiểu 16px để tắt hẳn auto-zoom. */
  .auth-shell input, input, textarea, select{ font-size:16px; }
}

@media print{
  .no-print{ display:none !important; }
  body{ background:#fff; }
  .section{ break-inside:avoid; border-color:#ccc; }
}