:root { --ink:#17201b; --muted:#6f7771; --line:#dde2dc; --paper:#f4f5f1; --card:#fff; --green:#1f6244; --green-dark:#174c35; --orange:#db6b35; }
* { box-sizing:border-box; }
/* Neyul visual system */
:root { --ink:#232323; --muted:#696969; --line:#dedede; --paper:#f4f4f3; --card:#fff; --green:#141414; --green-dark:#F43D01; --orange:#F43D01; }
body { background:var(--paper); color:#232323; font-family:Inter,Arial,Helvetica,sans-serif; }
.sidebar { background:#141414; color:#fff; }.brand-mark { background:#F43D01; color:#fff; border-radius:8px; }.brand small { color:#a9a9a9; }.add-form { border-color:#353535; }.input-row input { background:#242424; border-color:#525252; border-radius:6px; }.input-row input:focus { border-color:#F43D01; }.input-row button { background:#F43D01; color:#fff; border-radius:6px; }.section-label { color:#929292; }.site-row { border-radius:6px; }.site-row:hover { background:#272727; }.site-row small { color:#a0a0a0; }.icon-btn { color:#aaa; }.icon-btn:hover { color:#F43D01; }.sidebar-note { border-color:#353535; color:#929292; }
.main { max-width:1440px; padding:42px 54px 70px; }.eyebrow { color:#F43D01; letter-spacing:1.7px; } h1,h2,h3 { color:#141414; } h1 { font-weight:700; letter-spacing:-1.8px; }.muted { color:#696969; }.primary { background:#141414; border-radius:7px; box-shadow:none; }.primary:hover { background:#F43D01; }.toolbar { border-color:#d8d8d8; }.tab,.quiet { color:#696969; }.tab.active { color:#F43D01; background:#fff0eb; }.tab span { background:#F43D01; }.toolbar select,.insights-actions input,.insights-actions select { border-color:#d5d5d5; border-radius:7px; color:#232323; }.quiet:hover { color:#F43D01; }.status-box { background:#fff8f5; border-color:#fcc3b0; color:#9f3212; border-radius:8px; }
.insights-panel { background:#fff; border:1px solid #dedede; border-radius:10px; padding:28px; }.secondary { border-color:#141414; color:#141414; border-radius:7px; }.secondary:hover { background:#F43D01; border-color:#F43D01; }.card { border:1px solid #dedede; border-radius:9px; box-shadow:none; }.card:hover { border-color:#bdbdbd; box-shadow:0 8px 24px #1414140d; }.card h2 { font-weight:650; }.open { background:#141414; border-radius:6px; }.open:hover { background:#F43D01; }.topic-card,.keyword-results { border-color:#dedede; border-radius:8px; background:#fff; }.topic-keywords span { background:#f4f4f3; color:#595959; }.topic-item button:hover,.keyword-list button:hover { color:#F43D01; }.toast { background:#141414; border-radius:6px; }
.auth-screen { background:#f4f4f3; }.auth-card { border:1px solid #dedede; border-radius:10px; box-shadow:0 18px 50px #14141418; }.auth-tab.active { color:#F43D01; border-color:#F43D01; }.auth-card input:focus { outline:0; border-color:#F43D01; }.auth-card .primary { background:#141414; }.auth-card .primary:hover { background:#F43D01; }
.auth-screen { position:fixed; inset:0; z-index:10; display:grid; place-items:center; background:#18241e; }.auth-screen.hidden { display:none; }.auth-card { width:min(420px,calc(100% - 32px)); padding:30px; background:#fff; border-radius:16px; box-shadow:0 20px 60px #0005; }.auth-brand { color:var(--ink); padding:0 0 24px; }.auth-tabs { display:flex; gap:8px; margin-bottom:22px; border-bottom:1px solid var(--line); }.auth-tab { border:0; background:transparent; padding:10px 4px; color:var(--muted); font-weight:700; }.auth-tab.active { color:var(--green); border-bottom:2px solid var(--green); }.auth-card label { display:block; margin:12px 0 6px; font-size:13px; font-weight:700; }.auth-card input { width:100%; padding:11px; border:1px solid var(--line); border-radius:8px; }.auth-card .primary { width:100%; margin-top:20px; }.auth-message { color:#b4492d; min-height:20px; font-size:13px; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; }
button,input,select { font:inherit; }
button { cursor:pointer; }
.app-shell { display:grid; grid-template-columns:280px 1fr; min-height:100vh; }
.sidebar { position:sticky; top:0; height:100vh; padding:30px 20px; background:#18241e; color:#f6f7f4; display:flex; flex-direction:column; overflow-x:hidden; }
.brand { display:flex; gap:12px; align-items:center; padding:0 7px 28px; }
.brand-mark { display:grid; place-items:center; width:38px; height:38px; border-radius:11px; background:#d9f06b; color:#18241e; font-weight:900; font-size:20px; }
.brand strong,.brand small { display:block; }.brand small { color:#94a098; margin-top:3px; }
.add-form { padding:20px 7px; border-top:1px solid #334039; border-bottom:1px solid #334039; }
.add-form label { display:block; font-size:13px; font-weight:700; margin-bottom:9px; }
.input-row { display:flex; gap:7px; }.input-row input { min-width:0; flex:1; border:1px solid #4c5852; color:#fff; background:#25332c; border-radius:8px; padding:10px; outline:none; }
.input-row input:focus { border-color:#d9f06b; }.input-row button { border:0; width:40px; border-radius:8px; background:#d9f06b; color:#152019; font-size:22px; transition:opacity .18s, transform .18s; }.input-row button:hover:not(:disabled) { transform:translateY(-1px); }.input-row button:disabled { cursor:wait; opacity:.85; }.input-row button.is-loading { display:grid; place-items:center; }.add-spinner { width:16px; height:16px; border:2px solid #15201955; border-top-color:#152019; border-radius:50%; animation:add-spin .7s linear infinite; }.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } @keyframes add-spin { to { transform:rotate(360deg); } } @media (prefers-reduced-motion:reduce) { .add-spinner { animation:none; } }
.section-label { color:#87938c; font-size:10px; letter-spacing:1.2px; font-weight:800; margin:25px 7px 10px; }
.site-list { overflow:auto; display:grid; gap:5px; }.site-row { display:grid; grid-template-columns:34px 1fr auto; align-items:center; gap:9px; border-radius:9px; padding:9px 7px; }
.site-row:hover { background:#243129; }.site-row > div:nth-child(2) { min-width:0; }.site-row img { width:28px;height:28px;border-radius:7px;background:#fff; }.site-row strong { font-size:13px; display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.site-row small { color:#89958e; font-size:11px; }
.site-actions { display:flex; }.icon-btn { border:0; background:transparent; color:#a9b2ac; padding:5px; }.icon-btn:hover { color:#fff; }
.sidebar-note { margin-top:auto; color:#8d9991; line-height:1.5; font-size:11px; padding:18px 7px 0; border-top:1px solid #334039; }
.main { padding:44px 54px 60px; max-width:1350px; width:100%; margin:auto; }
.topbar { display:flex; justify-content:space-between; align-items:center; gap:30px; }.eyebrow { color:var(--green); font-size:11px; font-weight:900; letter-spacing:1.5px; margin:0 0 7px; }
h1 { font-size:42px; margin:0 0 7px; font-weight:750; letter-spacing:-1.5px; }.muted { color:var(--muted); margin:0; }
.primary { border:0; border-radius:9px; background:var(--green); color:#fff; padding:13px 18px; font-weight:750; box-shadow:0 5px 15px #1f62442b; }.primary:hover { background:var(--green-dark); }.primary:disabled { opacity:.65; cursor:wait; }
.toolbar { margin-top:38px; padding-bottom:13px; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; gap:20px; }
.tabs { display:flex; gap:6px; }.tab,.quiet { border:0; background:transparent; color:var(--muted); padding:8px 10px; font-weight:700; }.tab.active { color:var(--green); background:#e2ebe5; border-radius:7px; }.tab span { background:var(--orange); color:#fff; padding:1px 6px; border-radius:10px; font-size:10px; }
.toolbar-actions { display:flex; align-items:center; gap:10px; min-width:0; }.toolbar select { max-width:220px; border:1px solid var(--line); border-radius:8px; background:#fff; padding:8px 12px; color:var(--ink); }
.status-box { margin-top:18px; background:#fffaf8; border:1px solid #ffc6b5; padding:14px 16px 13px; border-radius:9px; color:#b52f0d; box-shadow:0 5px 16px #f43d0112; }.status-copy { display:flex; align-items:center; gap:9px; font-size:13px; font-weight:650; }.status-spinner { width:10px; height:10px; flex:0 0 10px; border:2px solid #ffd4c8; border-top-color:#f43d01; border-radius:50%; animation:status-spin .7s linear infinite; }.scan-progress { position:relative; height:5px; overflow:hidden; margin-top:12px; background:#ffe8e1; border-radius:99px; }.scan-progress span { position:absolute; inset:0 auto 0 -35%; width:42%; background:linear-gradient(90deg,#f43d01,#ff8a68); border-radius:inherit; animation:scan-progress 1.25s ease-in-out infinite; }.hidden { display:none; } @keyframes status-spin { to { transform:rotate(360deg); } } @keyframes scan-progress { 0% { transform:translateX(0); } 100% { transform:translateX(320%); } } @media (prefers-reduced-motion:reduce) { .status-spinner,.scan-progress span { animation:none; } .scan-progress span { left:0; width:100%; opacity:.7; } }
.insights-panel { margin-top:22px; padding:22px; background:#e9efe9; border:1px solid #d4ddd5; border-radius:14px; }
.insights-head { display:flex; align-items:center; justify-content:space-between; gap:20px; }.insights-head h2 { font-size:25px; margin:0 0 6px; font-weight:750; letter-spacing:-.5px; }.insights-head .eyebrow { margin-bottom:5px; }.insights-head .muted { font-size:13px; }
.insights-actions { display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }.insights-actions input,.insights-actions select { border:1px solid #cbd6cd; border-radius:8px; background:#fff; padding:9px 11px; min-width:0; }.insights-actions input { width:190px; }.secondary { border:1px solid var(--green); border-radius:8px; color:var(--green); background:#fff; padding:9px 13px; font-weight:800; }.secondary:hover { color:#fff; background:var(--green); }.secondary:disabled { opacity:.6; cursor:wait; }
.topic-list { margin-top:17px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }.topic-card { min-width:0; background:#fff; border:1px solid #d8e0da; border-radius:10px; padding:15px; }.topic-top { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }.topic-card h3 { min-width:0; overflow-wrap:anywhere; margin:0; font-size:18px; line-height:1.3; font-weight:750; }.topic-count { flex:none; background:#e0eee4; color:var(--green); border-radius:20px; padding:4px 8px; font-size:10px; font-weight:850; }
.topic-stats { color:var(--muted); font-size:11px; margin:7px 0 11px; }.topic-keywords { display:flex; flex-wrap:wrap; gap:5px; margin-bottom:11px; }.topic-keywords span { background:#f1f3f0; border-radius:5px; padding:3px 6px; color:#58625b; font-size:10px; }.topic-items { display:grid; gap:6px; }.topic-item { display:grid; grid-template-columns:1fr auto; gap:10px; align-items:center; border-top:1px solid #edf0ed; padding-top:7px; }.topic-item button { text-align:left; border:0; background:transparent; padding:0; color:var(--ink); font-size:12px; line-height:1.35; }.topic-item button:hover { color:var(--green); }.topic-item small { color:#8a938d; font-size:10px; white-space:nowrap; }.insight-empty { grid-column:1/-1; padding:20px; text-align:center; color:#78817b; font-size:13px; border:1px dashed #c8d3ca; border-radius:9px; }
.keyword-results { grid-column:1/-1; min-width:0; background:#fff; border:1px solid #d8e0da; border-radius:10px; padding:15px; }.keyword-results h3 { margin:0; font-size:18px; font-weight:750; }.keyword-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 18px; max-height:360px; overflow:auto; }.keyword-list button { min-width:0; display:flex; flex-direction:column; gap:3px; text-align:left; border:0; border-top:1px solid #edf0ed; background:transparent; padding:9px 0; color:var(--ink); }.keyword-list button:hover span { color:var(--green); }.keyword-list span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; font-weight:700; }.keyword-list small { color:#89918c; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.feed { margin-top:19px; display:grid; gap:13px; }.card { display:grid; grid-template-columns:180px 1fr auto; gap:20px; background:var(--card); border:1px solid #e1e5df; padding:15px; border-radius:12px; transition:.15s ease; }
.card:hover { transform:translateY(-1px); box-shadow:0 8px 25px #1e312514; }.card.read { opacity:.66; }.thumb { width:180px; height:112px; object-fit:cover; border-radius:8px; background:#e8ebe7; }.thumb.placeholder { display:grid;place-items:center;color:#9da49f;font-size:12px; }
.card-body { min-width:0; }.meta { display:flex;align-items:center;gap:7px;color:var(--muted);font-size:12px;margin-bottom:8px; }.meta img { width:17px;height:17px;border-radius:4px; }.new-dot { width:7px;height:7px;border-radius:50%;background:var(--orange); }
.card h2 { font-size:20px;line-height:1.3;margin:0 0 8px;font-weight:750;overflow-wrap:anywhere; }.card p { color:var(--muted);font-size:13px;line-height:1.5;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; }
.card-actions { display:flex;flex-direction:column;justify-content:space-between;align-items:flex-end; }.open { border:1px solid var(--line);border-radius:8px;background:#fff;padding:8px 11px;color:var(--green);font-weight:750;white-space:nowrap; }.open:hover { border-color:var(--green); }.read-toggle { border:0;background:transparent;color:#89918c;font-size:12px; }
.empty { padding:80px 30px;text-align:center;background:#fff;border:1px dashed #cfd6cf;border-radius:13px; }.empty-icon { width:58px;height:58px;border-radius:50%;background:#e5ece7;color:var(--green);display:grid;place-items:center;margin:0 auto 18px;font-size:25px; }.empty h2 { margin:0 0 8px;font-weight:750; }.empty p { color:var(--muted);margin:0 auto;max-width:440px;line-height:1.55; }
.toast { position:fixed;right:25px;bottom:25px;background:#15221b;color:#fff;padding:12px 16px;border-radius:9px;box-shadow:0 8px 25px #0003;opacity:0;transform:translateY(10px);pointer-events:none;transition:.2s; }.toast.show { opacity:1;transform:none; }
@media (max-width:1000px) { .app-shell{grid-template-columns:235px 1fr}.main{padding:35px 28px}.card{grid-template-columns:130px 1fr}.thumb{width:130px;height:95px}.card-actions{grid-column:2;flex-direction:row-reverse;align-items:center}.topic-list{grid-template-columns:1fr}.keyword-list{grid-template-columns:1fr}.insights-head{align-items:flex-start;flex-direction:column} }
.sidebar { background:#141414; }.brand-mark { background:#F43D01; color:#fff; border-radius:8px; }.brand small { color:#a9a9a9; }.input-row input { background:#242424; border-color:#525252; border-radius:6px; }.input-row input:focus { border-color:#F43D01; }.input-row button { background:#F43D01; color:#fff; border-radius:6px; }.site-row:hover { background:#272727; }.site-row small { color:#a0a0a0; }.icon-btn:hover { color:#F43D01; }.sidebar-note { border-color:#353535; color:#929292; }
.main { max-width:1440px; padding:42px 54px 70px; }.eyebrow { color:#F43D01; letter-spacing:1.7px; } h1,h2,h3 { color:#141414; } h1 { font-weight:700; letter-spacing:-1.8px; }.primary { background:#141414; border-radius:7px; box-shadow:none; }.primary:hover { background:#F43D01; }.tab.active { color:#F43D01; background:#fff0eb; }.tab span { background:#F43D01; }.quiet:hover { color:#F43D01; }.status-box { background:#fff8f5; border-color:#fcc3b0; color:#9f3212; }
.insights-panel { background:#fff; border-color:#dedede; border-radius:10px; padding:28px; }.secondary { border-color:#141414; color:#141414; border-radius:7px; }.secondary:hover { background:#F43D01; border-color:#F43D01; }.card { border-color:#dedede; border-radius:9px; box-shadow:none; }.card:hover { border-color:#bdbdbd; box-shadow:0 8px 24px #1414140d; }.open { background:#141414; color:#fff; border-color:#141414; border-radius:6px; }.open:hover { background:#F43D01; border-color:#F43D01; }.topic-card,.keyword-results { border-color:#dedede; border-radius:8px; }.topic-count { background:#fff0eb; color:#F43D01; }.topic-keywords span { background:#f4f4f3; color:#595959; }.topic-item button:hover,.keyword-list button:hover span { color:#F43D01; }.empty-icon { background:#fff0eb; color:#F43D01; }.toast { background:#141414; border-radius:6px; }
.auth-screen { background:#f4f4f3; }.auth-card { border-color:#dedede; border-radius:10px; box-shadow:0 18px 50px #14141418; }.auth-tab.active { color:#F43D01; border-color:#F43D01; }.auth-card input:focus { outline:0; border-color:#F43D01; }.auth-card .primary { background:#141414; }.auth-card .primary:hover { background:#F43D01; }
.account-bar { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:auto; padding:14px 7px; border-top:1px solid #353535; }.account-bar small,.account-bar strong { display:block; }.account-bar small { color:#8f8f8f; font-size:9px; letter-spacing:1px; }.account-bar strong { margin-top:4px; font-size:12px; color:#fff; }.account-bar button { border:0; background:transparent; color:#aaa; font-size:11px; padding:5px 0; }.account-bar button:hover { color:#F43D01; }.account-bar + .sidebar-note { margin-top:0; border-top:0; padding-top:10px; }
.help-button { width:100%; margin:0 7px 10px; padding:9px 0; border:0; background:transparent; color:#bdbdbd; text-align:left; font-size:11px; }.help-button:hover { color:#F43D01; }.help-modal { position:fixed; inset:0; z-index:30; display:grid; place-items:center; padding:20px; background:#14141480; }.help-modal.hidden { display:none; }.help-dialog { position:relative; width:min(680px,100%); max-height:min(720px,90vh); overflow:auto; padding:34px 38px; background:#fff; border-radius:10px; box-shadow:0 20px 70px #14141430; }.help-dialog h2 { margin:0 0 24px; font-size:30px; letter-spacing:-.8px; }.help-close { position:absolute; right:18px; top:12px; border:0; background:transparent; color:#696969; font-size:28px; line-height:1; }.help-close:hover { color:#F43D01; }.help-content { color:#595959; font-size:14px; line-height:1.65; }.help-content h3 { margin:22px 0 5px; font-size:16px; color:#141414; }.help-content p { margin:0; }
.brand-mark { object-fit:cover; padding:0; }
.brand-logo { display:block; width:92px; height:auto; max-height:32px; object-fit:contain; object-position:left center; filter:none; }.brand-logo-wrap { display:grid; place-items:center; width:104px; height:42px; padding:8px 10px; background:transparent; border:0; border-radius:0; flex:none; }.auth-brand .brand-logo { width:110px; max-height:42px; padding:0; background:transparent; border-radius:0; }.auth-brand .brand-logo-wrap { display:block; width:auto; height:auto; padding:0; background:transparent; }
.sidebar-logo { width:92px; }
.sidebar-brand { display:grid; grid-template-columns:104px minmax(0,1fr); align-items:center; gap:16px; }.sidebar-brand-copy { min-width:0; align-self:center; }.sidebar-brand-copy strong { color:#fff; font-size:15px; line-height:1.15; white-space:nowrap; }.sidebar-brand-copy small { margin-top:5px; color:#929292; font-size:11px; line-height:1.2; white-space:nowrap; }

/* Balanced application shell */
.app-shell { grid-template-columns:320px minmax(0,1fr); }
.sidebar { padding:32px 24px; }
.main { max-width:1380px; padding:42px clamp(32px,4vw,64px) 72px; }
.brand { padding-inline:4px; }
.add-form { padding-inline:4px; }
.site-row { padding-inline:8px; }

@media (max-width:1180px) {
  .app-shell { grid-template-columns:292px minmax(0,1fr); }
  .sidebar { padding:28px 20px; }
  .main { padding:36px 34px 60px; }
  .toolbar { align-items:flex-start; flex-direction:column; }
  .toolbar-actions { width:100%; flex-wrap:wrap; }
}

@media (max-width:820px) {
  .app-shell { grid-template-columns:1fr; }
  .sidebar { position:relative; height:auto; min-height:0; padding:24px 20px; }
  .site-list { max-height:220px; }
  .account-bar { margin-top:22px; }
  .main { padding:30px 20px 48px; }
  .topbar,.insights-head { align-items:flex-start; flex-direction:column; }
  .topbar h1 { font-size:34px; }
  .card { grid-template-columns:96px minmax(0,1fr); }
  .thumb { width:96px; height:88px; }
  .card-actions { grid-column:1 / -1; flex-direction:row-reverse; align-items:center; }
}

.marketing-popup { position:fixed; right:24px; bottom:24px; z-index:25; width:min(460px,calc(100vw - 32px)); overflow:hidden; padding:26px; background:#141414; color:#fff; border-radius:12px; box-shadow:0 22px 70px #14141448; animation:marketing-popup-in .28s ease-out; }.marketing-popup.hidden { display:none; }.marketing-popup-close { position:absolute; right:14px; top:12px; width:30px; height:30px; border:0; background:transparent; color:#aaa; font-size:24px; line-height:1; }.marketing-popup-close:hover { color:#F43D01; }.marketing-popup-kicker { margin:0 0 9px; color:#F43D01; font-size:10px; font-weight:800; letter-spacing:1.6px; }.marketing-popup h2 { max-width:340px; margin:0; color:#fff; font-size:26px; line-height:1.1; letter-spacing:-.7px; }.marketing-popup-copy { margin:12px 0 16px; color:#bbb; font-size:13px; line-height:1.55; }.marketing-tags { display:flex; flex-wrap:wrap; gap:7px; }.marketing-tags span { padding:6px 9px; border:1px solid #3d3d3d; border-radius:999px; color:#ddd; font-size:10px; }.marketing-contact { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-top:20px; }.marketing-contact a { min-height:48px; border-radius:7px; text-decoration:none; }.marketing-zalo { display:grid; place-items:center; background:#F43D01; color:#fff; font-size:13px; font-weight:800; }.marketing-zalo:hover { background:#d93600; }.marketing-phone { display:flex; flex-direction:column; justify-content:center; padding:7px 12px; border:1px solid #484848; color:#fff; }.marketing-phone small { color:#929292; font-size:9px; }.marketing-phone strong { margin-top:2px; font-size:13px; }.marketing-popup-progress { position:absolute; left:0; bottom:0; width:100%; height:3px; background:#F43D01; transform-origin:left; }.marketing-popup.is-timing .marketing-popup-progress { animation:marketing-popup-timer 15s linear forwards; }
@keyframes marketing-popup-in { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:none; } }
@keyframes marketing-popup-timer { from { transform:scaleX(1); } to { transform:scaleX(0); } }
@media (max-width:560px) { .marketing-popup { right:16px; bottom:16px; padding:22px; }.marketing-popup h2 { font-size:23px; }.marketing-contact { grid-template-columns:1fr; } }