/* ═══════════════════════════════════════════════
   ONEHUB — v3
   ═══════════════════════════════════════════════ */
:root{
  --bg:#0a0a0b;--bg2:#111113;--bg3:#19191d;
  --card:#131315;--card-hov:#18181c;
  --border:rgba(255,255,255,.06);--border-s:rgba(255,255,255,.11);
  --shadow:0 1px 12px rgba(0,0,0,.4);--shadow-lg:0 6px 28px rgba(0,0,0,.55);
  --text:#e8e6e3;--text-2:#a8a5a0;--muted:#504e4b;
  --a1:#d97757;--a2:#7ab8f5;--a3:#6ecf8a;--a4:#c49cde;
  --a1-bg:rgba(217,119,87,.07);--a2-bg:rgba(122,184,245,.07);
  --a3-bg:rgba(110,207,138,.07);--a4-bg:rgba(196,156,222,.07);
  --nav-bg:rgba(10,10,11,.8);--nav-border:rgba(255,255,255,.05);
  --tag-p-bg:rgba(217,119,87,.13);--tag-p:#d97757;
  --tag-s-bg:rgba(122,184,245,.10);--tag-s:#7ab8f5;
  --tag-t-bg:rgba(110,207,138,.08);--tag-t:#6ecf8a;
  --tag-d-bg:rgba(196,156,222,.09);--tag-d:#c49cde;
  --portal-bg:#151518;--portal-hov:#1c1c20;
  --trk-head:#151518;--trk-alt:rgba(255,255,255,.012);
  --st-applied:#7ab8f5;--st-interview:#d97757;--st-offer:#6ecf8a;--st-rejected:#e05555;
  --danger:#e05555;--danger-bg:rgba(224,85,85,.07);
  --inline-bg:#111113;
}
[data-theme="claude"]{
  --bg:#faf6f1;--bg2:#f0ebe4;--bg3:#e6e0d7;
  --card:#ffffff;--card-hov:#fdfcfa;
  --border:rgba(80,60,40,.06);--border-s:rgba(80,60,40,.13);
  --shadow:0 1px 12px rgba(80,60,40,.04);--shadow-lg:0 6px 28px rgba(80,60,40,.08);
  --text:#1a1612;--text-2:#6b5e52;--muted:#9a8d80;
  --a1:#c4540a;--a2:#2b6cb0;--a3:#2f7d4f;--a4:#7c4dba;
  --a1-bg:rgba(196,84,10,.05);--a2-bg:rgba(43,108,176,.05);
  --a3-bg:rgba(47,125,79,.05);--a4-bg:rgba(124,77,186,.05);
  --nav-bg:rgba(250,246,241,.88);--nav-border:rgba(80,60,40,.06);
  --tag-p-bg:rgba(196,84,10,.08);--tag-p:#c4540a;
  --tag-s-bg:rgba(43,108,176,.06);--tag-s:#2b6cb0;
  --tag-t-bg:rgba(47,125,79,.05);--tag-t:#2f7d4f;
  --tag-d-bg:rgba(124,77,186,.06);--tag-d:#7c4dba;
  --portal-bg:#f3ede5;--portal-hov:#ebe4da;
  --trk-head:#f0ebe4;--trk-alt:rgba(80,60,40,.02);
  --st-applied:#2b6cb0;--st-interview:#c4540a;--st-offer:#2f7d4f;--st-rejected:#c53030;
  --danger:#c53030;--danger-bg:rgba(197,48,48,.05);
  --inline-bg:#f8f4ee;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:4.5rem}
body{font-family:'DM Sans',system-ui,sans-serif;background:var(--bg);color:var(--text);min-height:100vh;overflow-x:hidden;transition:background .3s,color .3s;-webkit-font-smoothing:antialiased}
::selection{background:var(--a1);color:#fff}
::-webkit-scrollbar{width:4px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--muted);border-radius:2px}
a{color:inherit;text-decoration:none}
.muted-text{color:var(--muted)!important}

/* ═══ LOGIN ═══ */
#login-overlay{position:fixed;inset:0;z-index:2000;background:var(--bg);display:flex;align-items:center;justify-content:center;padding:1rem;transition:background .3s}
.login-card{background:var(--card);border:1.5px solid var(--border-s);border-radius:1rem;padding:2.2rem 1.8rem;width:100%;max-width:320px;box-shadow:var(--shadow-lg);text-align:center;transition:background .3s,border-color .3s}
.login-icon{font-family:'Bricolage Grotesque',sans-serif;font-size:1.5rem;font-weight:800;color:var(--text);margin-bottom:.6rem}
.login-dot{color:var(--a1)}
.login-sub{font-size:.7rem;color:var(--muted);margin-bottom:1.8rem;letter-spacing:.12em;text-transform:uppercase}
.login-error{background:var(--danger-bg);color:var(--danger);border-radius:.5rem;padding:.4rem .7rem;font-size:.78rem;margin-bottom:.6rem}
.login-card input{display:block;width:100%;padding:.65rem .85rem;margin-bottom:.6rem;background:var(--bg2);border:1.5px solid var(--border);border-radius:.5rem;font-family:'DM Sans',sans-serif;font-size:.84rem;color:var(--text);outline:none;transition:border-color .2s,background .3s}
.login-card input:focus{border-color:var(--a1)}
#login-btn{width:100%;background:var(--a1);color:#fff;border:none;border-radius:.5rem;padding:.6rem;font-family:'Bricolage Grotesque',sans-serif;font-size:.84rem;font-weight:700;cursor:pointer;transition:filter .2s,transform .12s}
#login-btn:hover{filter:brightness(1.1);transform:translateY(-1px)}
#login-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}

/* ═══ SYNC ═══ */
.sync-dot{position:fixed;bottom:.8rem;right:1rem;z-index:100;width:6px;height:6px;border-radius:50%;background:var(--a3);transition:background .3s}
.sync-dot.syncing{animation:psync .8s ease infinite}.sync-dot.error{background:var(--danger)}
@keyframes psync{0%{box-shadow:0 0 0 0 rgba(110,207,138,.5)}70%{box-shadow:0 0 0 6px rgba(110,207,138,0)}100%{box-shadow:0 0 0 0 rgba(110,207,138,0)}}

/* ═══ NAV ═══ */
#topnav{position:fixed;top:0;left:0;right:0;z-index:1000;background:var(--nav-bg);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--nav-border);transition:background .3s}
.nav-inner{max-width:1100px;margin:0 auto;display:flex;align-items:center;padding:.5rem 1.4rem;gap:.7rem}
.nav-brand{font-family:'Bricolage Grotesque',sans-serif;font-size:1.1rem;font-weight:800;color:var(--text);flex-shrink:0}
.brand-dot{color:var(--a1)}
.nav-links{display:flex;gap:.08rem;flex:1;justify-content:center}
.nav-link{font-family:'Bricolage Grotesque',sans-serif;font-size:.7rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;padding:.38rem .7rem;border-radius:.4rem;color:var(--text-2);transition:all .15s;white-space:nowrap;cursor:pointer}
.nav-link:hover{color:var(--text);background:var(--bg3)}
.nav-link.active{color:var(--a1);background:var(--a1-bg)}
.nav-actions{display:flex;gap:.3rem;flex-shrink:0}
#theme-btn,#logout-btn,#lang-btn{height:32px;display:flex;align-items:center;justify-content:center;background:var(--bg3);border:1px solid var(--border);border-radius:.4rem;color:var(--text-2);cursor:pointer;transition:all .15s}
#theme-btn,#logout-btn{width:32px;font-size:.8rem}
#lang-btn{padding:0 .55rem;font-family:'JetBrains Mono',monospace;font-size:.6rem;font-weight:500;letter-spacing:.04em;position:relative;gap:.3rem;width:auto}
#lang-btn img.flag-img{width:16px;height:11px;border-radius:1px;object-fit:cover}
.lang-dropdown{position:absolute;top:calc(100% + 6px);right:0;background:var(--card);border:1px solid var(--border-s);border-radius:.5rem;box-shadow:var(--shadow-lg);overflow:hidden;z-index:2000;min-width:120px;animation:slideDown .15s cubic-bezier(.22,1,.36,1)}
.lang-dropdown.hidden{display:none}
.lang-opt{display:flex;align-items:center;gap:.5rem;padding:.5rem .7rem;font-size:.74rem;cursor:pointer;transition:background .12s;color:var(--text);font-family:'DM Sans',sans-serif}
.lang-opt:hover{background:var(--bg3)}
.lang-opt.active{color:var(--a1);font-weight:600}
.lang-opt img.flag-img{width:18px;height:12px;border-radius:1px;object-fit:cover}
.news-country{display:flex;align-items:center;gap:.4rem;font-family:'Bricolage Grotesque',sans-serif;font-size:.78rem;font-weight:700;color:var(--text-2);margin-bottom:.4rem;padding-bottom:.3rem;border-bottom:1px solid var(--border)}
.news-country .flag-img{width:18px;height:12px;border-radius:1px;object-fit:cover}
#theme-btn:hover,#logout-btn:hover,#lang-btn:hover{color:var(--text);border-color:var(--border-s);background:var(--card-hov)}
.theme-icon{font-size:.78rem}
.mobile-menu-btn{display:none;background:none;border:none;color:var(--text);cursor:pointer;padding:.2rem;line-height:0}
@media(max-width:720px){
  .nav-links{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;background:var(--nav-bg);backdrop-filter:blur(16px);border-bottom:1px solid var(--nav-border);padding:.4rem .8rem;gap:0}
  .nav-links.open{display:flex}
  .mobile-menu-btn{display:block;margin-left:auto;order:2}
  .nav-actions{order:3}
}

/* ═══ SECTIONS ═══ */
.section{max-width:1100px;margin:0 auto;padding:2.5rem 1.4rem 1.2rem}
.section-first{padding-top:5.5rem!important}
.section-header{display:flex;align-items:baseline;gap:.7rem;margin-bottom:1.5rem;border-bottom:1px solid var(--border);padding-bottom:.6rem}
.section-number{font-family:'JetBrains Mono',monospace;font-size:.68rem;font-weight:500;color:var(--a1);letter-spacing:.08em}
.section-header h2{font-family:'Bricolage Grotesque',sans-serif;font-size:1.3rem;font-weight:700;letter-spacing:-.01em}
.subsection-label{font-family:'Bricolage Grotesque',sans-serif;font-size:.8rem;font-weight:700;color:var(--text-2);margin:1.2rem 0 .6rem}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem}
@media(max-width:800px){.grid-2,.grid-3{grid-template-columns:1fr}}

/* ═══ CARDS ═══ */
.card{background:var(--card);border:1px solid var(--border);border-radius:.85rem;padding:1.3rem 1.4rem;margin-bottom:.8rem;position:relative;overflow:hidden;box-shadow:var(--shadow);transition:all .2s}
.card:hover{box-shadow:var(--shadow-lg)}
.card-compact{padding:1rem 1.1rem}
.card-no-pad{padding:0;overflow:hidden}
.card-accent{position:absolute;top:0;left:0;right:0;height:2px}
.accent-1{background:linear-gradient(90deg,var(--a1),var(--a4))}.accent-2{background:linear-gradient(90deg,var(--a2),var(--a3))}
.accent-3{background:linear-gradient(90deg,var(--a3),var(--a1))}.accent-4{background:linear-gradient(90deg,var(--a4),var(--a2))}
.card h3{font-family:'Bricolage Grotesque',sans-serif;font-size:.9rem;font-weight:700;margin-bottom:.6rem}
.card-desc{font-size:.78rem;color:var(--text-2);margin-bottom:.7rem}

/* ═══ MODERN LIST ITEMS — hover reveal actions ═══ */
.li{display:flex;align-items:center;gap:.6rem;padding:.5rem .7rem;border-radius:.55rem;border:1px solid var(--border);margin-bottom:.3rem;transition:all .15s;position:relative;overflow:hidden}
.li:hover{background:var(--bg3);border-color:var(--border-s)}
.li-body{flex:1;min-width:0}
.li-body strong{font-size:.8rem;display:block}
.li-body p{font-size:.68rem;color:var(--text-2);margin-top:.04rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.li .la{font-size:.72rem;color:var(--muted);flex-shrink:0;text-decoration:none;transition:color .12s}
.li:hover .la{color:var(--a1)}

/* Action overlay — slides in from right on hover */
.li-actions{position:absolute;right:0;top:0;bottom:0;display:flex;align-items:center;gap:0;transform:translateX(100%);transition:transform .2s cubic-bezier(.22,1,.36,1);z-index:2}
.li:hover .li-actions{transform:translateX(0)}
.li-act{height:100%;display:flex;align-items:center;padding:0 .6rem;cursor:pointer;border:none;background:none;color:var(--text-2);font-size:.68rem;transition:all .12s;font-family:'DM Sans',sans-serif}
.li-act.act-edit{background:var(--a2-bg);color:var(--a2)}
.li-act.act-edit:hover{background:var(--a2);color:#fff}
.li-act.act-del{background:var(--danger-bg);color:var(--danger)}
.li-act.act-del:hover{background:var(--danger);color:#fff}

/* ═══ INLINE ADD — expands in-place ═══ */
.inline-add-zone{margin-top:.3rem}
.add-trigger{
  display:inline-flex;align-items:center;gap:.35rem;
  padding:.35rem .7rem;border-radius:2rem;
  background:var(--bg3);border:1px solid var(--border);
  color:var(--muted);font-family:'DM Sans',sans-serif;font-size:.72rem;
  cursor:pointer;transition:all .18s;
}
.add-trigger:hover{color:var(--a1);border-color:var(--a1);background:var(--a1-bg)}
.add-trigger svg{transition:transform .2s}
.add-trigger:hover svg{transform:rotate(90deg)}
.inline-form{
  background:var(--inline-bg);border:1px solid var(--border-s);border-radius:.6rem;
  padding:.8rem;margin-top:.3rem;
  animation:slideDown .2s cubic-bezier(.22,1,.36,1);
}
@keyframes slideDown{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
.inline-form .if-row{display:flex;gap:.4rem;margin-bottom:.4rem;flex-wrap:wrap}
.inline-form input,.inline-form select,.inline-form textarea{
  flex:1;min-width:100px;padding:.42rem .6rem;
  background:var(--bg2);border:1px solid var(--border);border-radius:.4rem;
  font-family:'DM Sans',sans-serif;font-size:.78rem;color:var(--text);outline:none;
  transition:border-color .15s;
}
.inline-form input:focus,.inline-form select:focus,.inline-form textarea:focus{border-color:var(--a1)}
.inline-form textarea{resize:vertical;min-height:44px}
.if-actions{display:flex;gap:.35rem;justify-content:flex-end}
.btn-primary{
  font-family:'Bricolage Grotesque',sans-serif;font-size:.72rem;font-weight:700;
  padding:.38rem .8rem;border-radius:.4rem;background:var(--a1);color:#fff;
  border:none;cursor:pointer;transition:filter .15s,transform .1s;
}
.btn-primary:hover{filter:brightness(1.1);transform:translateY(-1px)}
.btn-ghost{
  font-family:'DM Sans',sans-serif;font-size:.72rem;font-weight:500;
  padding:.38rem .7rem;border-radius:.4rem;background:none;
  border:1px solid var(--border);color:var(--text-2);cursor:pointer;transition:all .15s;
}
.btn-ghost:hover{border-color:var(--border-s);color:var(--text)}
.btn-danger{
  font-family:'DM Sans',sans-serif;font-size:.72rem;font-weight:500;
  padding:.38rem .7rem;border-radius:.4rem;background:var(--danger-bg);
  border:none;color:var(--danger);cursor:pointer;transition:all .15s;
}
.btn-danger:hover{background:var(--danger);color:#fff}

/* ═══ INLINE EDIT — replaces item in-place ═══ */
.li-editing{background:var(--inline-bg);border-color:var(--a1);padding:.7rem}
.li-editing .inline-form{background:none;border:none;padding:0;margin:0;animation:none}

/* ═══ TIMELINE ═══ */
.tl{padding-left:.8rem;border-left:2px solid var(--border)}
.tl-item{position:relative;padding:0 0 .9rem .8rem}
.tl-item:last-child{padding-bottom:.15rem}
.tl-dot{position:absolute;left:-1.2rem;top:.28rem;width:8px;height:8px;border-radius:50%;background:var(--a1);border:2px solid var(--card)}
.tl-date{font-family:'JetBrains Mono',monospace;font-size:.64rem;color:var(--a1);letter-spacing:.05em}
.tl-body{padding-right:0}
.tl-body strong{font-size:.82rem;display:block;margin:.08rem 0 .12rem}
.tl-body p{font-size:.74rem;color:var(--text-2);line-height:1.5}
/* Timeline hover actions */
.tl-item .li-actions{top:0;right:-.5rem;bottom:auto;height:auto;padding:.15rem 0;transform:translateX(0);opacity:0;transition:opacity .15s}
.tl-item:hover .li-actions{opacity:1}
.tl-item .li-act{height:auto;padding:.15rem .35rem;border-radius:.3rem;font-size:.62rem}

/* ═══ PROJECT CARDS ═══ */
.pcard{background:var(--card);border:1px solid var(--border);border-radius:.75rem;padding:1.1rem 1.2rem;transition:all .2s;position:relative;overflow:hidden}
.pcard:hover{border-color:var(--border-s);box-shadow:var(--shadow)}
.pcard .li-actions{top:.6rem;right:0;bottom:auto;height:auto;padding:0 .5rem;transform:translateX(0);opacity:0;transition:opacity .15s}
.pcard:hover .li-actions{opacity:1}
.pcard .li-act{height:auto;padding:.2rem .4rem;border-radius:.3rem;font-size:.64rem}
.p-tag{font-family:'JetBrains Mono',monospace;font-size:.58rem;font-weight:500;letter-spacing:.05em;color:var(--a3);margin-bottom:.3rem}
.pcard h4{font-family:'Bricolage Grotesque',sans-serif;font-size:.86rem;font-weight:700;margin-bottom:.25rem}
.pcard>p{font-size:.74rem;color:var(--text-2);line-height:1.45;margin-bottom:.5rem}
.p-stack{display:flex;gap:.25rem;flex-wrap:wrap;margin-bottom:.4rem}
.p-stack span{font-family:'JetBrains Mono',monospace;font-size:.58rem;padding:.15rem .4rem;border-radius:2rem;background:var(--a1-bg);color:var(--a1)}
.p-link{font-size:.7rem;color:var(--a2);transition:color .12s}
.p-link:hover{color:var(--a1)}

/* ═══ CERTS ═══ */
.cert{display:flex;align-items:center;gap:.5rem;padding:.4rem 0}
.cert-chk{width:18px;height:18px;border-radius:50%;border:1.5px solid var(--border-s);display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;font-size:.6rem;color:transparent;transition:all .15s}
.cert-chk:hover{border-color:var(--a3)}
.cert-chk.done{background:var(--a3);border-color:var(--a3);color:#fff}
.cert strong{font-size:.8rem;flex:1}
.cert-note{font-size:.68rem;color:var(--text-2)}
.cert .li-actions{position:static;transform:none;opacity:0;transition:opacity .12s}
.cert:hover .li-actions{opacity:1}
.cert .li-act{height:auto;padding:.15rem .3rem;border-radius:.25rem;font-size:.6rem}

/* ═══ SKILL TAGS ═══ */
.sg{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin-bottom:.4rem}
.sg-label{font-family:'JetBrains Mono',monospace;font-size:.6rem;color:var(--muted);letter-spacing:.08em;text-transform:uppercase;min-width:45px;flex-shrink:0}
.sg-tags{display:flex;flex-wrap:wrap;gap:.25rem}
.stag{font-family:'JetBrains Mono',monospace;font-size:.66rem;font-weight:500;padding:.25rem .6rem;border-radius:2rem;display:inline-flex;align-items:center;gap:.3rem;transition:all .12s;cursor:default}
.stag:hover{filter:brightness(1.15)}
.stag-x{cursor:pointer;font-size:.55rem;opacity:0;transition:opacity .12s;margin-left:.1rem}
.stag:hover .stag-x{opacity:.7}
.stag-x:hover{opacity:1!important}
.tag-core{background:var(--tag-p-bg);color:var(--tag-p)}.tag-bi{background:var(--tag-s-bg);color:var(--tag-s)}
.tag-infra{background:var(--tag-t-bg);color:var(--tag-t)}.tag-domain{background:var(--tag-d-bg);color:var(--tag-d)}

/* ═══ READING ═══ */
.reading-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:.5rem}
.ritem{padding:.7rem .8rem;border-radius:.55rem;border:1px solid var(--border);position:relative;transition:all .15s;overflow:hidden}
.ritem:hover{border-color:var(--border-s)}
.ritem .li-actions{top:.3rem;right:0;bottom:auto;height:auto;padding:0 .3rem;transform:translateX(0);opacity:0;transition:opacity .12s}
.ritem:hover .li-actions{opacity:1}
.ritem .li-act{height:auto;padding:.15rem .3rem;border-radius:.25rem;font-size:.6rem}
.r-tag{font-family:'JetBrains Mono',monospace;font-size:.58rem;letter-spacing:.05em;display:block;margin-bottom:.2rem;color:var(--a2)}
.ritem strong{font-size:.78rem;display:block;margin-bottom:.12rem}
.ritem p{font-size:.68rem;color:var(--text-2)}

/* ═══ PORTAL GRID ═══ */
.portal-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:.5rem}
.portal{background:var(--portal-bg);border:1px solid var(--border);border-radius:.6rem;padding:.8rem;text-align:center;transition:all .18s;position:relative;display:block;overflow:hidden}
.portal:hover{background:var(--portal-hov);border-color:var(--border-s);transform:translateY(-1px)}
.portal-emoji{font-size:1.3rem;display:block;margin-bottom:.2rem}
.portal strong{font-size:.74rem;display:block;margin-bottom:.08rem}
.portal p{font-size:.62rem;color:var(--text-2)}
.portal .li-actions{top:0;right:0;bottom:0;flex-direction:column;opacity:0;transition:opacity .12s;transform:none}
.portal:hover .li-actions{opacity:1}
.portal .li-act{padding:.3rem .4rem;font-size:.6rem}

/* ═══ TRACKER ═══ */
.tracker-stats{display:flex;gap:.4rem;margin-bottom:.7rem;flex-wrap:wrap}
.tracker-stat{font-family:'JetBrains Mono',monospace;font-size:.66rem;padding:.2rem .5rem;border-radius:2rem}
.tracker-table-wrap{overflow-x:auto;margin-bottom:.7rem}
.tracker-table{width:100%;border-collapse:collapse;font-size:.78rem}
.tracker-table th{font-family:'Bricolage Grotesque',sans-serif;font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;text-align:left;padding:.45rem .65rem;background:var(--trk-head);color:var(--text-2);border-bottom:1px solid var(--border)}
.tracker-table td{padding:.45rem .65rem;border-bottom:1px solid var(--border);vertical-align:middle}
.tracker-table tbody tr:nth-child(even){background:var(--trk-alt)}
.tracker-table tbody tr:hover{background:var(--bg3)}
.status-badge{font-family:'JetBrains Mono',monospace;font-size:.62rem;font-weight:500;padding:.16rem .4rem;border-radius:2rem;display:inline-block}
.status-applied{background:rgba(122,184,245,.1);color:var(--st-applied)}
.status-interview{background:rgba(217,119,87,.1);color:var(--st-interview)}
.status-offer{background:rgba(110,207,138,.1);color:var(--st-offer)}
.status-rejected{background:rgba(224,85,85,.08);color:var(--st-rejected)}
.tracker-form{display:flex;gap:.35rem;flex-wrap:wrap;align-items:center}
.tracker-form input,.tracker-form select{padding:.42rem .6rem;background:var(--bg2);border:1px solid var(--border);border-radius:.4rem;font-family:'DM Sans',sans-serif;font-size:.78rem;color:var(--text);outline:none;transition:border-color .15s;flex:1;min-width:100px}
.tracker-form input:focus,.tracker-form select:focus{border-color:var(--a1)}
.tracker-form select{min-width:90px;flex:.5}
.trk-del{background:none;border:none;cursor:pointer;color:var(--muted);font-size:.7rem;transition:color .12s;padding:.1rem .2rem;border-radius:.2rem}
.trk-del:hover{color:var(--danger);background:var(--danger-bg)}

/* ═══ ETF ═══ */
.etf-tools{display:flex;gap:.35rem;margin-top:.5rem}
.btn-sm{font-family:'JetBrains Mono',monospace;font-size:.62rem;padding:.25rem .5rem;border-radius:.35rem;border:1px solid var(--border-s);color:var(--text-2);transition:all .12s;background:none}
.btn-sm:hover{border-color:var(--a1);color:var(--a1)}

/* ═══ NOTES ═══ */
.notes-textarea{width:100%;background:var(--bg2);border:1px solid var(--border);border-radius:.5rem;padding:.7rem .9rem;font-family:'DM Sans',sans-serif;font-size:.82rem;color:var(--text);outline:none;resize:vertical;transition:border-color .15s,background .3s;line-height:1.6}
.notes-textarea:focus{border-color:var(--a1)}
.notes-footer{display:flex;justify-content:flex-end;margin-top:.3rem}
.notes-saved{font-size:.64rem;font-family:'JetBrains Mono',monospace}

/* ═══ NEWS PAYWALL LINK ═══ */
.news-paywall-link{color:var(--text);text-decoration:none;display:inline-flex;align-items:center;gap:.35rem;transition:color .15s}
.news-paywall-link:hover{color:var(--a1)}
.news-paywall-link svg{opacity:.4;transition:opacity .15s,transform .15s}
.news-paywall-link:hover svg{opacity:1;transform:translate(1px,-1px)}

/* ═══ KEY NOTES ═══ */
#keynotes-list{margin-bottom:.6rem}
.keynote{display:flex;align-items:flex-start;gap:.6rem;padding:.6rem .75rem;border-radius:.55rem;border:1px solid var(--border);margin-bottom:.35rem;transition:all .15s;position:relative;overflow:hidden}
.keynote:hover{background:var(--bg3);border-color:var(--border-s)}
.keynote-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;margin-top:.25rem}
.keynote-dot.c-a1{background:var(--a1)}.keynote-dot.c-a2{background:var(--a2)}
.keynote-dot.c-a3{background:var(--a3)}.keynote-dot.c-a4{background:var(--a4)}
.keynote-text{flex:1;font-size:.82rem;line-height:1.5;min-width:0;word-break:break-word}
.keynote-ts{font-family:'JetBrains Mono',monospace;font-size:.58rem;color:var(--muted);flex-shrink:0;margin-top:.2rem}
.keynote-del{background:none;border:none;cursor:pointer;color:var(--muted);font-size:.65rem;padding:.1rem .25rem;border-radius:.2rem;opacity:0;transition:all .12s;flex-shrink:0;margin-top:.1rem}
.keynote:hover .keynote-del{opacity:1}
.keynote-del:hover{color:var(--danger);background:var(--danger-bg)}
.keynote-add-row{display:flex;gap:.35rem;align-items:center}
.keynote-add-row input{flex:1;padding:.5rem .7rem;background:var(--bg2);border:1px solid var(--border);border-radius:.4rem;font-family:'DM Sans',sans-serif;font-size:.82rem;color:var(--text);outline:none;transition:border-color .15s}
.keynote-add-row input:focus{border-color:var(--a1)}
.keynote-add-row select{padding:.5rem .4rem;background:var(--bg2);border:1px solid var(--border);border-radius:.4rem;font-size:.82rem;color:var(--text);outline:none;cursor:pointer;width:48px}
.keynote-empty{font-size:.74rem;color:var(--muted);padding:.5rem 0}

/* ═══ TRAVEL MAP ═══ */
.travel-map-wrap{position:relative;width:100%;aspect-ratio:2/1;overflow:hidden;border-radius:.6rem;border:1px solid var(--border);background:var(--bg2);margin:.6rem 0}
.travel-map-wrap svg{width:100%;height:100%}
.travel-map-wrap .country{fill:var(--bg3);stroke:var(--border-s);stroke-width:.3;cursor:pointer;transition:fill .2s,stroke .2s}
.travel-map-wrap .country:hover{stroke:var(--text-2);stroke-width:.6}
.travel-map-wrap .country.wish{fill:var(--a1-bg);stroke:var(--a1);stroke-width:.5}
.travel-map-wrap .country.wish:hover{fill:var(--a1);fill-opacity:.25}
.travel-map-wrap .country.visited{fill:var(--a3-bg);stroke:var(--a3);stroke-width:.5}
.travel-map-wrap .country.visited:hover{fill:var(--a3);fill-opacity:.25}
.travel-map-wrap .country.home{fill:var(--a2-bg);stroke:var(--a2);stroke-width:.6}
.map-legend{display:flex;gap:.8rem;margin-bottom:.3rem;flex-wrap:wrap}
.map-leg-item{display:flex;align-items:center;gap:.3rem;font-size:.68rem;color:var(--text-2)}
.map-leg-dot{width:8px;height:8px;border-radius:50%}
.leg-home{background:var(--a2)}.leg-wish{background:var(--a1)}.leg-visited{background:var(--a3)}
.map-stats{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.3rem}
.map-stat{font-family:'JetBrains Mono',monospace;font-size:.64rem;padding:.18rem .45rem;border-radius:2rem}
.map-home-pin{fill:var(--a2);filter:drop-shadow(0 0 3px var(--a2))}
.map-tooltip{position:absolute;background:var(--card);border:1px solid var(--border-s);border-radius:.4rem;padding:.3rem .5rem;font-size:.7rem;pointer-events:none;z-index:10;box-shadow:var(--shadow);white-space:nowrap;opacity:0;transition:opacity .12s}
.map-tooltip.show{opacity:1}

/* ═══ INVESTMENT WORKBOOK ═══ */
.inv-toggle{display:flex;align-items:center;gap:.5rem;cursor:pointer;user-select:none}
.inv-toggle h3{margin:0}
.inv-count{font-family:'JetBrains Mono',monospace;font-size:.62rem;color:var(--text-2);margin-left:auto}
.inv-chev{color:var(--text-2);transition:transform .2s;flex-shrink:0}
.inv-card-open .inv-chev{transform:rotate(180deg)}
.inv-panel{display:none;margin-top:.8rem}
.inv-card-open .inv-panel{display:block}
.inv-tabs{display:flex;gap:.25rem;margin-bottom:.6rem}
.inv-tab{font-family:'JetBrains Mono',monospace;font-size:.62rem;padding:.2rem .55rem;border-radius:2rem;border:1px solid var(--border);background:none;color:var(--text-2);cursor:pointer;transition:all .15s}
.inv-tab:hover{border-color:var(--border-s);color:var(--text)}
.inv-tab.active{background:var(--a1-bg);border-color:var(--a1);color:var(--a1)}
.inv-sc.active{background:rgba(0,211,149,.1);border-color:#00d395;color:#00d395}
.inv-bo.active{background:rgba(0,180,230,.1);border-color:#00b4e6;color:#00b4e6}
.inv-tbl{font-size:.72rem;min-width:850px}
.inv-nm{font-family:'DM Sans',sans-serif;font-weight:600;font-size:.74rem}
.inv-tp{font-size:.56rem;text-transform:uppercase;color:var(--text-2)}
.inv-badge{font-family:'JetBrains Mono',monospace;font-size:.52rem;font-weight:600;padding:.1rem .3rem;border-radius:2rem;letter-spacing:.02em}
.inv-badge.sc{background:#00d395;color:#0d0d0d}
.inv-badge.bo{background:#00b4e6;color:#fff}
.inv-pos{color:var(--a3);font-weight:500}
.inv-neg{color:var(--danger);font-weight:500}

/* ═══ FOOTER ═══ */
footer{text-align:center;padding:2rem 1rem 1.5rem;font-size:.64rem;color:var(--muted);letter-spacing:.1em;border-top:1px solid var(--border);max-width:1100px;margin:1rem auto 0}

/* ═══ ANIMATIONS ═══ */
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.section{animation:fadeUp .4s cubic-bezier(.22,1,.36,1) both}
#section-work{animation-delay:0s}#section-skills{animation-delay:.03s}#section-jobs{animation-delay:.06s}
#section-finance{animation-delay:.09s}#section-freetime{animation-delay:.12s}#section-notes{animation-delay:.15s}

@media(max-width:500px){
  .card{padding:1rem .9rem}.portal-grid{grid-template-columns:repeat(2,1fr)}
  .tracker-form{flex-direction:column}.tracker-form input,.tracker-form select{width:100%;min-width:unset;flex:unset}
  .chart-header{flex-direction:column;align-items:flex-start}
}