@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;600&family=Inter:wght@300;400;500;600;700&display=swap');

:root{
  --bg:#0E171F; --panel:#1B2731; --cream:#EEE7D7; --sage:#91937C;
  --gold:#D8AA6E; --gold-light:#E8C594;
  --w90:rgba(255,255,255,0.90); --w70:rgba(255,255,255,0.70);
  --w50:rgba(255,255,255,0.50); --w30:rgba(255,255,255,0.30);
  --surface:rgba(255,255,255,0.055); --border:rgba(255,255,255,0.10);
}
*{box-sizing:border-box; margin:0; padding:0;}
body{
  background:var(--bg); font-family:'Inter',-apple-system,sans-serif; color:var(--w90);
  min-height:100vh; display:flex; align-items:flex-start; justify-content:center; padding:32px 12px;
}
.card, .auth-card{
  width:100%; max-width:420px; background:var(--bg); border:1px solid var(--border);
  border-radius:28px; overflow:hidden; box-shadow:0 30px 80px rgba(0,0,0,0.5);
}
.card{ display:flex; flex-direction:column; min-height:640px; }
.auth-card{ padding:32px 26px 24px; }
.auth-header{ display:flex; flex-direction:column; align-items:center; text-align:center; margin-bottom:20px; }
.mark-lg{ width:44px; height:44px; border-radius:12px; margin-bottom:12px; }
.brand-name{ font-family:'Playfair Display',serif; font-weight:500; font-size:20px; color:var(--w90); letter-spacing:-0.01em; }
.intro-panel{ background:var(--panel); border-radius:16px; padding:16px 18px; margin-bottom:22px; }
.intro-panel p{ font-size:12px; font-weight:300; color:var(--w70); line-height:1.65; }
.brand-sm{ display:flex; align-items:center; gap:8px; font-weight:600; font-size:13px; }
.mark{ width:24px; height:24px; border-radius:7px; background:var(--panel); border:1px solid rgba(216,170,110,0.35); display:flex; align-items:center; justify-content:center; }
.tabs{ display:flex; gap:6px; margin-bottom:14px; }
.tabbtn{ flex:1; text-align:center; font-size:10.5px; font-weight:600; padding:9px 4px; border-radius:100px; background:var(--surface); border:1px solid var(--border); color:var(--w50); cursor:pointer; transition:all 0.15s ease; }
.tabbtn.active{ background:rgba(216,170,110,0.14); border-color:rgba(216,170,110,0.45); color:var(--gold-light); }
.tab-hint{ font-size:11px; font-weight:300; color:var(--w50); line-height:1.55; margin-bottom:16px; }
.input{ width:100%; background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:13px 14px; color:var(--w90); font-size:13px; margin-bottom:11px; font-family:'Inter'; }
.error{ font-size:11.5px; color:#e08a8a; margin-top:10px; }
.disclaimer{ font-size:9.5px; font-weight:300; color:var(--w30); line-height:1.6; margin-top:22px; padding-top:16px; border-top:1px solid var(--border); }
.topbar{ padding:16px 18px 12px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; }
.profile-btn{ font-size:11px; font-weight:600; color:var(--w70); background:var(--surface); border:1px solid var(--border); border-radius:100px; padding:6px 12px; cursor:pointer; }
.content{ flex:1; overflow-y:auto; padding:20px 18px; }
.title{ font-family:'Playfair Display',serif; font-weight:500; font-size:24px; color:var(--w90); letter-spacing:-0.01em; margin-bottom:4px; }
.sub{ font-size:12px; font-weight:300; color:var(--w50); margin-bottom:18px; }
.label{ font-size:10px; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; color:var(--w50); display:block; margin-bottom:8px; }
.pillrow{ display:flex; gap:8px; overflow-x:auto; margin-bottom:12px; flex-wrap:wrap; }
.pill{ flex-shrink:0; font-size:12px; font-weight:500; color:var(--w70); background:var(--surface); border:1px solid var(--border); border-radius:100px; padding:8px 14px; cursor:pointer; white-space:nowrap; display:flex; align-items:center; gap:6px; }
.pill.active{ background:rgba(216,170,110,0.14); border-color:rgba(216,170,110,0.45); color:var(--gold-light); }
.pill.add{ border-style:dashed; color:var(--w50); }
.pill-x{ font-size:13px; color:rgba(255,255,255,0.35); }
.addrow{ display:none; gap:8px; margin-bottom:18px; }
.addrow.show{ display:flex; }
.addinput{ flex:1; background:var(--surface); border:1px solid rgba(255,255,255,0.15); border-radius:10px; padding:10px 12px; color:var(--w90); font-size:12.5px; outline:none; font-family:'Inter'; }
.addbtn{ background:var(--gold); color:var(--bg); font-size:12px; font-weight:600; border:none; border-radius:10px; padding:0 16px; cursor:pointer; }
.empty{ text-align:center; color:var(--w30); font-size:12px; padding:10px 0 16px; }
.check{ display:flex; align-items:center; gap:10px; background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:11px 12px; margin-bottom:7px; cursor:pointer; }
.check.sel{ background:rgba(216,170,110,0.10); border-color:rgba(216,170,110,0.4); }
.check .name{ font-size:12.5px; font-weight:500; color:var(--w90); }
.check .meta{ font-size:10px; font-weight:300; color:var(--w50); margin-top:1px; }
.radio{ width:16px; height:16px; border-radius:50%; border:1.5px solid var(--w30); flex-shrink:0; }
.check.sel .radio{ border-color:var(--gold); background:var(--gold); }
.checkbox{ width:16px; height:16px; border-radius:5px; border:1.5px solid var(--w30); flex-shrink:0; position:relative; }
.check.sel .checkbox{ border-color:var(--gold); background:var(--gold); }
.check.sel .checkbox::after{ content:''; position:absolute; left:4px; top:1px; width:5px; height:9px; border:solid var(--bg); border-width:0 2px 2px 0; transform:rotate(45deg); }
.stepper{ display:flex; align-items:center; justify-content:space-between; background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:12px 14px; margin:16px 0; }
.step-btn{ width:28px; height:28px; border-radius:50%; background:var(--panel); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; font-size:16px; cursor:pointer; user-select:none; }
.step-val{ font-family:'Playfair Display',serif; font-size:20px; font-weight:600; color:var(--gold-light); min-width:44px; text-align:center; }
.textarea{ width:100%; background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:12px 14px; color:var(--w90); font-size:12.5px; margin-bottom:14px; resize:none; font-family:'Inter'; }
.cta{ width:100%; background:var(--gold); color:var(--bg); font-size:13px; font-weight:600; letter-spacing:0.03em; padding:14px; border-radius:100px; text-align:center; border:none; cursor:pointer; }
.cta:disabled{ opacity:0.5; cursor:default; }
.savemsg{ text-align:center; font-size:12px; font-weight:600; margin-top:0; min-height:0; border-radius:12px; padding:0; max-height:0; overflow:hidden; transition:all 0.2s ease; }
.savemsg.show{ margin-top:12px; padding:12px; max-height:60px; }
.savemsg.show.success{ background:rgba(120,190,130,0.15); border:1px solid rgba(120,190,130,0.4); color:#8fd39b; }
.savemsg.show.error{ background:rgba(224,138,138,0.12); border:1px solid rgba(224,138,138,0.35); color:#e08a8a; }
.progress-panel{ background:var(--surface); border:1px solid var(--border); border-radius:20px; padding:20px; margin-bottom:22px; }
.panel-divider{ height:1px; background:var(--border); margin:18px 0; }
.ring-row{ display:flex; gap:12px; margin-bottom:0; }
.ring-card{ flex:1; background:var(--panel); border-radius:16px; padding:14px 10px 16px; text-align:center; }
.settings-row{ display:flex; align-items:center; justify-content:space-between; background:transparent; border:none; padding:0; margin-bottom:14px; }
.pace{ display:flex; align-items:center; gap:8px; background:rgba(216,170,110,0.09); border:1px solid rgba(216,170,110,0.28); border-radius:12px; padding:11px 12px; margin-bottom:0; font-size:11px; color:var(--w70); }
.pace.pace-neutral{ background:var(--panel); border-color:var(--border); }
.ring-wrap{ position:relative; width:76px; height:76px; margin:0 auto; }
.ring-num{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:'Playfair Display',serif; font-size:18px; font-weight:600; color:var(--gold-light); }
.ring-title{ font-size:10.5px; font-weight:600; color:var(--w90); margin-top:8px; }
.ring-sub{ font-size:9.5px; font-weight:300; color:var(--w50); margin-top:2px; }
.num-input{ width:70px; background:transparent; border:none; color:var(--gold-light); font-family:'Playfair Display',serif; font-size:16px; font-weight:600; text-align:right; outline:none; }
.log-item{ display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid var(--border); }
.log-item:last-child{ border-bottom:none; }
.log-detail{ flex:1; min-width:0; }
.log-detail .t{ font-size:12px; font-weight:500; color:var(--w90); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.log-detail .d{ font-size:10px; font-weight:300; color:var(--w50); }
.log-hrs{ font-family:'Playfair Display',serif; font-size:14px; font-weight:600; color:var(--gold-light); flex-shrink:0; }
.export-btn{ display:flex; align-items:center; justify-content:center; gap:8px; border:1px solid rgba(255,255,255,0.15); border-radius:100px; padding:12px; margin-top:16px; font-size:12px; font-weight:600; color:var(--w90); cursor:pointer; background:transparent; width:100%; }
.export-btn:disabled{ opacity:0.5; cursor:default; }
.tabbar{ display:flex; border-top:1px solid var(--border); background:rgba(13,31,20,0.6); }
.tab{ flex:1; padding:12px; text-align:center; font-size:10px; font-weight:600; color:var(--w50); cursor:pointer; letter-spacing:0.03em; }
.tab.active{ color:var(--gold); }
.welcome{ background:var(--panel); border-radius:18px; padding:20px 18px; margin-bottom:18px; }
.welcome h3{ font-family:'Playfair Display',serif; font-weight:500; font-size:18px; color:var(--w90); margin-bottom:8px; }
.welcome p{ font-size:12px; font-weight:300; color:var(--w70); line-height:1.6; margin-bottom:14px; }
.welcome .step{ display:flex; gap:10px; align-items:flex-start; margin-bottom:10px; }
.welcome .num{ width:20px; height:20px; border-radius:50%; background:rgba(216,170,110,0.15); border:1px solid rgba(216,170,110,0.4); color:var(--gold-light); font-size:10.5px; font-weight:600; display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:1px; }
.welcome .step span{ font-size:12px; color:var(--w70); line-height:1.5; }

/* ---- Desktop layout: sidebar nav + two-column content, instead of a phone card ---- */
@media (min-width: 900px) {
  body{ align-items:center; padding:48px 32px; }

  .card{
    max-width:1040px;
    min-height:520px;
    max-height:calc(100vh - 96px);
    height:auto;
    display:grid;
    grid-template-columns:200px 1fr;
    grid-template-rows:auto 1fr;
    grid-template-areas:
      "topbar topbar"
      "tabbar content";
  }
  .auth-card{ max-width:640px; padding:52px 56px 40px; }
  .auth-card .brand-name{ font-size:24px; }
  .auth-card .mark-lg{ width:52px; height:52px; }
  .auth-card .intro-panel{ padding:20px 24px; }
  .auth-card .intro-panel p{ font-size:13px; }
  .auth-card .input{ padding:15px 16px; font-size:14px; }
  .auth-card .cta{ padding:16px; font-size:14px; }

  .topbar{ grid-area:topbar; padding:20px 28px; }
  .brand-sm{ font-size:14px; }

  .tabbar{
    grid-area:tabbar;
    flex-direction:column;
    border-top:none;
    border-right:1px solid var(--border);
    justify-content:flex-start;
    align-items:stretch;
    padding:20px 14px;
    gap:6px;
    background:transparent;
  }
  .tab{
    flex:none;
    text-align:left;
    padding:11px 16px;
    border-radius:10px;
    font-size:11px;
  }
  .tab.active{ background:rgba(216,170,110,0.12); }

  .content{ padding:32px 40px; overflow-y:auto; }

  .log-grid, .dash-grid{
    display:grid;
    grid-template-columns:1.15fr 0.85fr;
    gap:40px;
    align-items:start;
  }
  .log-col-left, .dash-col-left{ min-width:0; }
  .log-col-right, .dash-col-right{ min-width:0; position:sticky; top:0; }

  .ring-row{ gap:16px; }
  .pillrow{ flex-wrap:wrap; }
}

.outlook-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:10px 14px; margin-bottom:16px; }
.outlook-text{ font-size:11px; color:var(--w70); }
.outlook-btn{ font-size:11px; font-weight:600; color:var(--gold-light); background:rgba(216,170,110,0.12); border:1px solid rgba(216,170,110,0.35); border-radius:100px; padding:7px 14px; cursor:pointer; white-space:nowrap; text-decoration:none; }
.outlook-events{ max-height:220px; overflow-y:auto; margin-bottom:16px; border:1px solid var(--border); border-radius:12px; }
.outlook-event{ padding:10px 14px; border-bottom:1px solid var(--border); cursor:pointer; }
.outlook-event:last-child{ border-bottom:none; }
.outlook-event:hover{ background:var(--surface); }
.outlook-event .t{ font-size:12px; color:var(--w90); font-weight:500; }
.outlook-event .d{ font-size:10.5px; color:var(--w50); margin-top:2px; }

.help-btn{ width:26px; height:26px; border-radius:50%; background:var(--surface); border:1px solid var(--border); color:var(--w70); font-size:12px; font-weight:700; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.help-btn:hover{ color:var(--gold-light); border-color:rgba(216,170,110,0.4); }

.wt-overlay{ position:fixed; inset:0; background:rgba(6,10,14,0.75); display:flex; align-items:center; justify-content:center; z-index:1000; padding:24px; }
.wt-modal{ width:100%; max-width:400px; background:var(--panel); border:1px solid var(--border); border-radius:22px; padding:30px 28px 24px; box-shadow:0 30px 80px rgba(0,0,0,0.5); }
.wt-dots{ display:flex; gap:6px; justify-content:center; margin-bottom:20px; }
.wt-dot{ width:6px; height:6px; border-radius:50%; background:var(--border); }
.wt-dot.active{ background:var(--gold); width:18px; border-radius:4px; }
.wt-title{ font-family:'Playfair Display',serif; font-weight:500; font-size:20px; color:var(--w90); text-align:center; margin-bottom:12px; }
.wt-body{ font-size:13px; font-weight:300; color:var(--w70); line-height:1.65; text-align:center; margin-bottom:26px; }
.wt-actions{ display:flex; align-items:center; justify-content:space-between; }
.wt-skip{ font-size:12px; color:var(--w50); cursor:pointer; }
.wt-btn{ background:var(--gold); color:var(--bg); font-size:12.5px; font-weight:600; padding:10px 20px; border-radius:100px; cursor:pointer; }
.wt-btn-secondary{ background:transparent; border:1px solid var(--border); color:var(--w70); }

/* Native date input renders a dark calendar icon by default, invisible on
   our dark background — color-scheme:dark tells the browser to use its
   light-on-dark native control styling instead. */
input[type="date"]{ color-scheme: dark; }

.suggest-panel{ background:rgba(216,170,110,0.06); border:1px solid rgba(216,170,110,0.25); border-radius:14px; padding:14px; margin-bottom:16px; }
.suggest-header{ font-size:10.5px; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; color:var(--gold-light); margin-bottom:10px; }
.suggest-item{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 0; border-bottom:1px solid rgba(255,255,255,0.08); }
.suggest-item:last-child{ border-bottom:none; }
.suggest-info{ min-width:0; flex:1; }
.suggest-info .t{ font-size:12px; font-weight:500; color:var(--w90); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.suggest-info .d{ font-size:10px; font-weight:300; color:var(--w50); margin-top:2px; }
.suggest-actions{ display:flex; align-items:center; gap:8px; flex-shrink:0; }
.suggest-use{ font-size:11px; font-weight:600; color:var(--gold-light); background:rgba(216,170,110,0.14); border:1px solid rgba(216,170,110,0.4); border-radius:100px; padding:6px 12px; cursor:pointer; white-space:nowrap; }
.suggest-dismiss{ font-size:14px; color:var(--w30); cursor:pointer; padding:0 4px; }
.suggest-dismiss:hover{ color:var(--w70); }