*{box-sizing:border-box;margin:0;padding:0;}
:root{
  --ink:#0d0d0d;--paper:#f5f2ea;--gold:#c9970f;--gold-light:#fdf3d0;
  --white:#fff;--muted:#6b6558;--border:#d4cfc4;--border2:#b8b2a8;
  --red:#c0392b;--green:#2d6a4f;--blue:#1a3a5c;--purple:#6b2fa0;--orange:#b5530a;
}
body{background:var(--paper);color:var(--ink);font-family:'DM Sans',sans-serif;font-size:14px;min-height:100vh;}

/* LOGIN */
#login-screen{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:2rem;}
.login-card{background:var(--white);border:1px solid var(--border);border-radius:16px;padding:2.5rem 2rem;width:100%;max-width:380px;position:relative;}
.login-title{font-family:'Playfair Display',serif;font-size:40px;font-weight:900;line-height:.9;margin-bottom:6px;}
.login-title em{font-style:italic;color:var(--gold);}
.login-sub{font-size:12px;color:var(--muted);margin-bottom:2rem;font-family:'DM Mono',monospace;letter-spacing:.05em;}
.login-label{font-size:11px;font-family:'DM Mono',monospace;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:5px;display:block;}
.login-input{width:100%;height:42px;padding:0 12px;font-size:14px;font-family:'DM Sans',sans-serif;border:1px solid var(--border);border-radius:8px;background:var(--paper);color:var(--ink);outline:none;margin-bottom:12px;}
.login-input:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(201,151,15,.12);}
.login-btn{width:100%;height:44px;background:var(--ink);color:var(--paper);border:none;border-radius:8px;font-size:14px;font-family:'DM Sans',sans-serif;font-weight:500;cursor:pointer;margin-top:4px;transition:opacity .15s;}
.login-btn:hover{opacity:.85;}
.login-err{font-size:12px;color:var(--red);margin-top:10px;padding:8px 12px;background:#fff5f5;border-radius:6px;display:none;border:1px solid #fdd;}
.login-note{font-size:11px;color:var(--muted);text-align:center;margin-top:16px;line-height:1.6;padding-top:16px;border-top:1px solid var(--border);}
.login-note strong{color:var(--ink);}

/* LOADING */
.overlay{display:none;position:absolute;inset:0;background:rgba(245,242,234,.9);align-items:center;justify-content:center;border-radius:16px;z-index:10;}
.overlay.show{display:flex;}
.spinner{width:28px;height:28px;border:2.5px solid var(--border);border-top-color:var(--gold);border-radius:50%;animation:spin .7s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}

/* APP */
#app-screen{display:none;}
.masthead{border-bottom:3px solid var(--ink);padding:.7rem 2.5rem;display:grid;grid-template-columns:1fr auto 1fr;align-items:end;gap:1rem;}
.masthead-meta{font-family:'DM Mono',monospace;font-size:10px;color:var(--muted);letter-spacing:.07em;text-transform:uppercase;line-height:1.7;}
.masthead-title{font-family:'Playfair Display',serif;font-size:clamp(40px,6vw,72px);font-weight:900;letter-spacing:-.02em;line-height:.88;text-align:center;}
.masthead-title em{font-style:italic;color:var(--gold);}
.masthead-right{text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:5px;}
.user-chip{display:inline-flex;align-items:center;gap:6px;background:var(--ink);color:var(--paper);font-size:11px;font-family:'DM Mono',monospace;padding:4px 12px;border-radius:20px;}
.btn-logout{font-size:10px;font-family:'DM Mono',monospace;color:var(--muted);background:none;border:none;cursor:pointer;text-decoration:underline;text-underline-offset:2px;}
.btn-logout:hover{color:var(--red);}

.stats-bar{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--border);margin:0 2.5rem;}
.stat-cell{padding:.875rem 1.25rem;border-right:1px solid var(--border);}
.stat-cell:last-child{border-right:none;}
.stat-num{font-family:'Playfair Display',serif;font-size:32px;font-weight:700;line-height:1;}
.stat-num.gold{color:var(--gold);}
.stat-lbl{font-family:'DM Mono',monospace;font-size:10px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);margin-top:3px;}

.prog-wrap{height:3px;background:var(--border);margin:0 2.5rem;}
.prog-bar{height:100%;background:var(--gold);transition:width .5s cubic-bezier(.4,0,.2,1);}

.body-grid{display:grid;grid-template-columns:200px 1fr;margin:0 2.5rem;border-left:1px solid var(--border);border-right:1px solid var(--border);}
.sidebar{border-right:1px solid var(--border);padding:1.25rem 1rem;}
.sb-section{margin-bottom:1.75rem;}
.sb-label{font-family:'DM Mono',monospace;font-size:10px;text-transform:uppercase;letter-spacing:.09em;color:var(--muted);border-bottom:1px solid var(--border);padding-bottom:5px;margin-bottom:8px;}

.cat-btn{display:flex;align-items:center;gap:8px;width:100%;padding:9px 10px;border:none;background:transparent;cursor:pointer;font-family:'DM Sans',sans-serif;font-size:13px;color:var(--muted);border-radius:5px;margin-bottom:4px;text-align:left;transition:all .15s;min-height:38px;}
.cat-btn:hover{background:rgba(0,0,0,.05);color:var(--ink);}
.cat-btn.active{background:var(--ink);color:var(--paper);}
.cat-btn.active .cat-pip{background:var(--gold)!important;}
.cat-pip{width:7px;height:7px;border-radius:50%;flex-shrink:0;}
.cat-cnt{margin-left:auto;font-family:'DM Mono',monospace;font-size:10px;opacity:.5;}

.mood-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:3px;margin-bottom:6px;}
.mood-btn{aspect-ratio:1;border:1px solid var(--border);border-radius:6px;background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s;padding:4px;color:var(--muted);}.mood-btn svg{width:100%;height:100%;}
.mood-btn:hover{border-color:var(--ink);}
.mood-btn.sel{background:var(--gold-light);border-color:var(--gold);}
.small-text{font-size:10px;color:var(--muted);font-family:'DM Mono',monospace;}

.water-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:3px;margin-bottom:5px;}
.cup{aspect-ratio:1;border:1px solid var(--border);border-radius:4px;background:transparent;cursor:pointer;font-size:13px;display:flex;align-items:center;justify-content:center;transition:all .15s;}
.cup.filled{background:var(--gold-light);border-color:var(--gold);}

.sleep-r{display:flex;align-items:center;gap:8px;margin-bottom:7px;}
.sleep-r input[type=range]{flex:1;accent-color:var(--gold);}
.sleep-n{font-family:'Playfair Display',serif;font-size:17px;font-weight:700;min-width:30px;text-align:right;}
.sq-row{display:flex;gap:3px;margin-bottom:6px;}
.sq{flex:1;padding:3px 0;font-size:10px;font-family:'DM Mono',monospace;border:1px solid var(--border);border-radius:3px;background:transparent;color:var(--muted);cursor:pointer;text-align:center;}
.sq.sel{background:var(--ink);color:var(--paper);border-color:var(--ink);}
.cal-bar-wrap{height:3px;background:var(--border);border-radius:2px;margin-top:6px;overflow:hidden;}
.cal-bar{height:100%;background:var(--gold);transition:width .4s;}

.main{padding:1.5rem 1.5rem 2rem;}
.add-form{border:2px solid var(--ink);margin-bottom:1.75rem;position:relative;}
.add-label-tag{position:absolute;top:-9px;left:12px;background:var(--paper);padding:0 6px;font-family:'DM Mono',monospace;font-size:10px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);}
.add-r1{display:flex;border-bottom:1px solid var(--border);}
.add-r1 input{flex:1;height:42px;padding:0 14px;font-size:15px;font-family:'DM Sans',sans-serif;border:none;background:transparent;color:var(--ink);outline:none;}
.add-r1 input::placeholder{color:var(--border);}
.btn-add{height:42px;padding:0 18px;font-size:11px;font-family:'DM Mono',monospace;letter-spacing:.08em;text-transform:uppercase;border:none;border-left:1px solid var(--border);background:var(--ink);color:var(--paper);cursor:pointer;transition:background .18s,transform .1s;}
.btn-add:hover{background:#2a2a2a;}.btn-add:active{transform:scale(.97);}
.add-r2{display:flex;flex-wrap:wrap;}
.add-r2 select,.add-r2 input[type=time],.add-r2 input[type=number],.add-r2 input[type=text]{height:32px;padding:0 10px;font-size:12px;font-family:'DM Mono',monospace;border-top:none;border-left:none;border-bottom:none;border-right:1px solid var(--border);background:transparent;color:var(--ink);outline:none;cursor:pointer;}
.add-r2 input[type=text]{flex:1;}

.section-wrap{margin-bottom:1.5rem;}
.section-head{display:flex;align-items:baseline;gap:10px;border-bottom:1px solid var(--border);padding-bottom:6px;margin-bottom:8px;}
.section-name{font-family:'Playfair Display',serif;font-size:20px;font-weight:700;font-style:italic;}
.section-tally{margin-left:auto;font-family:'DM Mono',monospace;font-size:10px;color:var(--muted);}

.task-list{display:flex;flex-direction:column;gap:3px;}
.task-wrap{display:flex;flex-direction:column;}
.task-item{display:flex;align-items:center;gap:9px;padding:.6rem .7rem;border:1px solid transparent;border-radius:3px;cursor:grab;transition:all .15s;}
.task-item:hover{border-color:var(--border);background:var(--white);}
.task-item.done-item{opacity:1;}
.done-item .task-title{opacity:.38;}
.done-item .task-meta{opacity:.38;}
.done-item .drag-pip{opacity:.1;}
.done-item .done-journal{opacity:.6;}
.done-item .cb{opacity:.5;}
.task-item.dragging{opacity:.2;}
.task-item.drag-over{border-color:var(--gold);border-style:dashed;background:var(--gold-light);}
.drag-pip{display:flex;flex-direction:column;gap:2.5px;opacity:.18;flex-shrink:0;}
.drag-pip span{display:block;width:10px;height:1px;background:var(--ink);}
.cb{width:16px;height:16px;border:1.5px solid var(--border);border-radius:3px;cursor:pointer;flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:all .15s;}
.cb.chk{border-color:transparent;}
.cb.chk::after{content:'';width:8px;height:4px;border-left:2px solid var(--paper);border-bottom:2px solid var(--paper);transform:rotate(-45deg) translateY(-1px);display:block;}
.task-body{flex:1;min-width:0;}
.task-title{font-size:14px;color:var(--ink);}
.done-item .task-title{text-decoration:line-through;color:var(--muted);}
.task-meta{display:flex;gap:4px;margin-top:3px;flex-wrap:wrap;}
.badge{display:inline-flex;align-items:center;height:16px;padding:0 6px;font-size:10px;font-family:'DM Mono',monospace;border-radius:2px;}
.b-time{background:var(--ink);color:var(--paper);}
.b-cal-pos{background:var(--gold-light);color:#7a5500;border:1px solid #e0c040;}
.b-cal-neg{background:#e8f5ee;color:var(--green);}
.b-note{background:var(--white);color:var(--muted);border:1px solid var(--border);}
.btn-del{width:22px;height:22px;border:none;background:transparent;cursor:pointer;color:var(--border);font-size:16px;display:flex;align-items:center;justify-content:center;border-radius:3px;flex-shrink:0;line-height:1;transition:all .15s;}
.btn-del:hover{background:#fbeaf0;color:var(--red);}
.empty-state{padding:2.5rem;text-align:center;border:1px dashed var(--border);border-radius:3px;}
.empty-state p{font-family:'Playfair Display',serif;font-size:18px;font-style:italic;color:var(--border);}

.photo-panel{background:var(--paper);border:1px solid var(--border);border-top:none;border-radius:0 0 8px 8px;padding:1rem;margin-top:-3px;}
.photo-drop{border:2px dashed var(--border);border-radius:6px;padding:1.25rem 1rem;text-align:center;cursor:pointer;transition:all .15s;position:relative;background:var(--white);}
.photo-drop:hover{border-color:var(--gold);background:var(--gold-light);}
.photo-drop input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%;}
.photo-drop-txt{font-size:12px;color:var(--muted);font-family:'DM Mono',monospace;}
.photo-preview-wrap{position:relative;margin:8px 0;display:none;}
.photo-preview-wrap img{width:100%;height:auto;border-radius:6px;cursor:zoom-in;display:block;}
.photo-size-row{display:flex;align-items:center;gap:8px;margin-bottom:4px;}
.photo-size-row input[type=range]{flex:1;accent-color:var(--gold);}
.photo-size-lbl{font-size:10px;font-family:'DM Mono',monospace;color:var(--muted);min-width:32px;text-align:right;}
.lightbox{display:none;position:fixed;inset:0;background:rgba(0,0,0,.92);z-index:9999;align-items:center;justify-content:center;cursor:zoom-out;}
.lightbox.open{display:flex;}
.lightbox img{max-width:92vw;max-height:92vh;width:auto;height:auto;min-width:min(400px,90vw);border-radius:8px;object-fit:contain;}
.lightbox-close{position:fixed;top:18px;right:22px;color:#fff;font-size:28px;cursor:pointer;line-height:1;opacity:.8;}
.lightbox-close:hover{opacity:1;}
.ai-comment{background:var(--gold-light);border:1px solid #e0c040;border-radius:6px;padding:.75rem;font-size:12px;color:#5a3e00;line-height:1.6;margin:8px 0;display:none;}
.ai-comment-label{font-family:'DM Mono',monospace;font-size:10px;font-weight:500;text-transform:uppercase;letter-spacing:.06em;margin-bottom:4px;color:#7a5500;}
.photo-note{width:100%;border:1px solid var(--border);border-radius:6px;padding:8px 10px;font-size:13px;font-family:'DM Sans',sans-serif;background:var(--white);color:var(--ink);outline:none;resize:none;min-height:60px;margin:8px 0;}
.photo-note:focus{border-color:var(--gold);}
.photo-actions{display:flex;gap:6px;justify-content:flex-end;}
.btn-photo-cancel{padding:5px 14px;font-size:11px;font-family:'DM Mono',monospace;border:1px solid var(--border);border-radius:4px;background:transparent;color:var(--muted);cursor:pointer;}
.btn-photo-confirm{padding:5px 14px;font-size:11px;font-family:'DM Mono',monospace;border:none;border-radius:4px;background:var(--ink);color:var(--paper);cursor:pointer;}
.btn-photo-confirm:disabled{opacity:.4;cursor:not-allowed;}
.btn-cam{width:22px;height:22px;border:none;background:transparent;cursor:pointer;font-size:14px;display:flex;align-items:center;justify-content:center;border-radius:3px;flex-shrink:0;color:var(--muted);transition:all .15s;}
.btn-cam:hover{background:var(--gold-light);color:#7a5500;}
.task-photo-thumb{width:44px;height:44px;border-radius:6px;object-fit:cover;flex-shrink:0;border:1px solid var(--border);cursor:zoom-in;transition:opacity .15s;}
.task-photo-thumb:hover{opacity:.85;}
.ai-spinner{display:inline-block;width:14px;height:14px;border:2px solid var(--border);border-top-color:var(--gold);border-radius:50%;animation:spin .7s linear infinite;vertical-align:middle;margin-right:6px;}
.done-journal{font-size:11px;color:var(--muted);font-style:italic;margin-top:3px;line-height:1.4;}

.policy-modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:8888;align-items:center;justify-content:center;padding:1.5rem;}
.policy-modal.open{display:flex;}
.policy-box{background:var(--white);border-radius:16px;max-width:460px;width:100%;padding:2rem;max-height:85vh;overflow-y:auto;}
.policy-title{font-family:'Playfair Display',serif;font-size:22px;font-weight:700;margin-bottom:4px;}
.policy-subtitle{font-size:11px;color:var(--muted);font-family:'DM Mono',monospace;letter-spacing:.05em;margin-bottom:1.25rem;}
.policy-section{margin-bottom:1rem;}
.policy-section h3{font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:.07em;color:var(--ink);margin-bottom:5px;font-family:'DM Mono',monospace;}
.policy-section p{font-size:13px;color:var(--muted);line-height:1.65;}
.policy-highlight{background:#fff8e6;border-left:3px solid var(--gold);padding:.75rem 1rem;border-radius:0 6px 6px 0;margin:1rem 0;font-size:13px;color:#5a3e00;line-height:1.6;}
.policy-check{display:flex;align-items:flex-start;gap:10px;margin:1.25rem 0 1rem;cursor:pointer;}
.policy-check input{width:16px;height:16px;margin-top:2px;accent-color:var(--gold);flex-shrink:0;cursor:pointer;}
.policy-check label{font-size:13px;color:var(--ink);line-height:1.5;cursor:pointer;}
.policy-agree-btn{width:100%;height:42px;background:var(--ink);color:var(--paper);border:none;border-radius:8px;font-size:14px;font-family:'DM Sans',sans-serif;font-weight:500;cursor:pointer;opacity:.4;transition:opacity .2s;}
.policy-agree-btn.ready{opacity:1;}
.policy-agree-btn.ready:hover{opacity:.85;}

.hamburger{display:none;background:none;border:none;cursor:pointer;padding:6px;color:var(--ink);}
.hamburger svg{width:20px;height:20px;}
@media(max-width:768px){
  /* MASTHEAD */
  .masthead{padding:.5rem 1rem;grid-template-columns:auto 1fr auto;gap:.5rem;}
  .masthead-meta{font-size:9px;}
  .masthead-title{font-size:clamp(24px,7vw,40px);}
  .hamburger{display:flex;align-items:center;}

  /* STATS */
  .stats-bar{margin:0;grid-template-columns:repeat(2,1fr);border-left:none;border-right:none;}
  .stat-cell{padding:.6rem .75rem;}
  .stat-cell:nth-child(2){border-right:none;}
  .stat-cell:nth-child(3){border-top:1px solid var(--border);}
  .stat-num{font-size:22px;}
  .prog-wrap{margin:0;}

  /* BODY GRID - stack vertically */
  .body-grid{grid-template-columns:1fr;margin:0;border-left:none;border-right:none;}
  .sidebar{border-right:none;border-bottom:1px solid var(--border);padding:.75rem 1rem;display:none;}
  .sidebar.open{display:block;}



  /* BOTTOM BAR */
  .bottom-bar{margin:0;padding:.5rem .75rem;position:fixed;bottom:0;left:0;right:0;background:var(--paper);border-top:2px solid var(--ink);z-index:100;}

  /* HOME CARDS */
  .home-cards{grid-template-columns:1fr;gap:1rem;padding:1.5rem 1rem;}
  .home-masthead{padding:.75rem 1rem;}
  .home-card{padding:1.5rem;}
  .home-card-title{font-size:22px;}

  /* DIARY */
  .diary-body{grid-template-columns:1fr;margin:0;}
  .diary-sidebar{border-right:none;border-bottom:1px solid var(--border);padding:.75rem 1rem;}
  .diary-masthead{padding:.5rem 1rem;}
  .diary-save-bar{margin:0;padding:.5rem .75rem;position:fixed;bottom:0;left:0;right:0;background:var(--paper);border-top:1px solid var(--border);z-index:100;}
  .diary-main{padding:.75rem .75rem 5rem;}

  /* MUSIC PLAYER */
  .music-player{bottom:4.5rem;}

  /* TASK ITEMS */
  .task-item{padding:.5rem .4rem;gap:7px;}
  .task-title{font-size:13px;}
  .section-name{font-size:17px;}

  /* HISTORY MODAL */
  .hist-box{padding:1rem;}
  .hist-stat-row{gap:5px;}
  .hist-stat{padding:5px 8px;}
  .hist-stat strong{font-size:15px;}

  /* POLICY MODAL */
  .policy-box{padding:1.25rem;}
  /* ADD FORM MOBILE - 2x2 grid */
  .add-r2{display:grid!important;grid-template-columns:1fr 1fr!important;flex-wrap:unset!important;}
  .add-r2 select,
  .add-r2 input[type=time],
  .add-r2 input[type=number],
  .add-r2 input[type=text]{
    height:46px!important;
    font-size:16px!important;
    padding:0 10px!important;
    border-top:1px solid var(--border)!important;
    border-right:none!important;
    border-bottom:none!important;
    border-left:none!important;
    width:100%!important;
    min-width:0!important;
    box-sizing:border-box!important;
  }
  .add-r2 select{border-right:1px solid var(--border)!important;}
  .add-r2 input[type=number]{border-right:1px solid var(--border)!important;}
  .add-r2 input[type=text]{grid-column:1/-1!important;}
}
.bottom-bar{border-top:2px solid var(--ink);margin:0 2.5rem;padding:.75rem 0;display:flex;justify-content:space-between;align-items:center;}
.bottom-info{font-family:'DM Mono',monospace;font-size:10px;color:var(--muted);letter-spacing:.05em;}
.btn-reset{font-family:'DM Mono',monospace;font-size:10px;letter-spacing:.07em;text-transform:uppercase;border:1px solid var(--border);background:transparent;color:var(--muted);padding:5px 12px;cursor:pointer;border-radius:2px;}
.btn-reset:hover{border-color:var(--red);color:var(--red);}

/* CALENDAR */
.cal-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;}
.cal-nav-btn{background:none;border:none;cursor:pointer;color:var(--muted);font-size:16px;padding:2px 6px;border-radius:3px;}
.cal-nav-btn:hover{background:rgba(0,0,0,.07);}
.cal-month-lbl{font-family:'DM Mono',monospace;font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--ink);}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;}
.cal-dow{font-family:'DM Mono',monospace;font-size:9px;text-align:center;color:var(--muted);padding-bottom:3px;letter-spacing:.04em;}
.cal-day{aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-size:11px;font-family:'DM Mono',monospace;border-radius:3px;cursor:pointer;position:relative;color:var(--muted);transition:all .12s;}
.cal-day:hover{background:rgba(0,0,0,.07);color:var(--ink);}
.cal-day.today{background:var(--ink);color:var(--paper)!important;font-weight:500;}
.cal-day.has-data::after{content:'';position:absolute;bottom:2px;left:50%;transform:translateX(-50%);width:4px;height:4px;border-radius:50%;background:var(--gold);}
.cal-day.today.has-data::after{background:var(--gold);}
.cal-day.other-month{opacity:.3;}
.cal-day.selected{outline:2px solid var(--gold);outline-offset:-2px;color:var(--ink);}

/* HISTORY MODAL */
.hist-modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:8000;align-items:center;justify-content:center;padding:1rem;}
.hist-modal.open{display:flex;}
.hist-box{background:var(--paper);border-radius:16px;width:100%;max-width:520px;max-height:85vh;overflow-y:auto;padding:1.5rem;}
.hist-title{font-family:'Playfair Display',serif;font-size:22px;font-weight:700;margin-bottom:4px;}
.hist-date{font-family:'DM Mono',monospace;font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.07em;margin-bottom:1.25rem;}
.hist-close{float:right;background:none;border:none;font-size:20px;cursor:pointer;color:var(--muted);margin-top:-4px;}
.hist-stat-row{display:flex;gap:8px;margin-bottom:1rem;flex-wrap:wrap;}
.hist-stat{background:var(--white);border:1px solid var(--border);border-radius:6px;padding:6px 12px;font-family:'DM Mono',monospace;font-size:10px;color:var(--muted);}
.hist-stat strong{display:block;font-family:'Playfair Display',serif;font-size:18px;color:var(--ink);font-weight:700;}
.hist-task{display:flex;align-items:center;gap:8px;padding:7px 0;border-bottom:1px solid var(--border);}
.hist-task:last-child{border-bottom:none;}
.hist-cb{width:14px;height:14px;border-radius:2px;flex-shrink:0;}
.hist-task-title{font-size:13px;flex:1;}
.hist-task.done .hist-task-title{text-decoration:line-through;color:var(--muted);}
.hist-empty{text-align:center;padding:2rem;font-family:'Playfair Display',serif;font-style:italic;color:var(--border);font-size:16px;}


/* MUSIC PLAYER */
.music-player{position:fixed;bottom:1.25rem;right:1.25rem;z-index:7000;display:none;}
.music-player.visible{display:block;}
.music-toggle{width:42px;height:42px;border-radius:50%;background:var(--ink);color:var(--paper);border:none;cursor:pointer;font-size:18px;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 12px rgba(0,0,0,.2);transition:all .2s;}
.music-toggle:hover{background:#333;transform:scale(1.08);}
.music-panel{position:absolute;bottom:54px;right:0;background:var(--white);border:1px solid var(--border);border-radius:14px;padding:1rem 1rem .875rem;width:230px;box-shadow:0 6px 28px rgba(0,0,0,.13);display:none;}
.music-panel.open{display:block;}
.music-panel-hd{font-family:'DM Mono',monospace;font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:10px;}
.music-track{display:flex;align-items:center;gap:9px;padding:8px 9px;border-radius:7px;cursor:pointer;transition:background .12s;}
.music-track:hover{background:var(--paper);}
.music-track.active{background:var(--gold-light);}
.music-dot{width:7px;height:7px;border-radius:50%;background:var(--border);flex-shrink:0;}
.music-track.active .music-dot{background:var(--gold);}
.music-name{font-size:12px;color:var(--ink);flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.music-vol{display:flex;align-items:center;gap:8px;margin-top:10px;padding-top:10px;border-top:1px solid var(--border);}
.music-vol input{flex:1;accent-color:var(--gold);}
.music-vol span{font-size:11px;color:var(--muted);}
.music-now{font-size:10px;font-family:'DM Mono',monospace;color:var(--gold);margin-top:8px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:none;}
.music-now.show{display:block;}

/* HOME SCREEN */
#home-screen{display:none;min-height:100vh;background:var(--paper);flex-direction:column;}
#home-screen.visible{display:flex;}
.home-masthead{border-bottom:3px solid var(--ink);padding:1rem 2.5rem;display:flex;justify-content:space-between;align-items:flex-end;}
.home-masthead-title{font-family:'Playfair Display',serif;font-size:clamp(36px,5vw,64px);font-weight:900;letter-spacing:-.02em;line-height:.88;}
.home-masthead-title em{font-style:italic;color:var(--gold);}
.home-user{display:flex;flex-direction:column;align-items:flex-end;gap:5px;}
.home-utility-bar{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1rem 2.5rem 0;flex-wrap:wrap;}
.home-utility-copy{display:flex;flex-direction:column;gap:4px;}
.home-utility-kicker{font-family:'DM Mono',monospace;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--gold);}
.home-utility-text{font-size:13px;color:var(--muted);max-width:640px;line-height:1.6;}
.home-actions{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;}
.install-btn{height:40px;padding:0 16px;border:1px solid var(--ink);border-radius:999px;background:var(--ink);color:var(--paper);font-family:'DM Mono',monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:all .18s;}
.install-btn:hover{background:#2a2a2a;}
.install-btn[hidden]{display:none!important;}
.status-chip{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border:1px solid var(--border);border-radius:999px;background:var(--white);font-family:'DM Mono',monospace;font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);}
.status-chip-dot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px rgba(45,106,79,.12);}
.status-chip.is-offline .status-chip-dot{background:var(--red);box-shadow:0 0 0 3px rgba(192,57,43,.12);}
.status-chip.is-offline{color:var(--red);border-color:#e7c1be;background:#fff8f8;}
.home-cards{display:grid;grid-template-columns:1fr 1fr;gap:2rem;padding:3rem 2.5rem;flex:1;}
.home-card{border:2px solid var(--ink);border-radius:16px;padding:2rem;cursor:pointer;transition:all .18s;background:var(--white);display:flex;flex-direction:column;gap:1rem;position:relative;overflow:hidden;}
.home-card:hover{background:var(--ink);color:var(--paper);}
.home-card:hover .home-card-icon{color:var(--gold);}
.home-card:hover .home-card-desc{color:rgba(255,255,255,.6);}
.home-card-icon{font-size:36px;line-height:1;}
.home-card-title{font-family:'Playfair Display',serif;font-size:28px;font-weight:900;}
.home-card-desc{font-size:12px;font-family:'DM Mono',monospace;color:var(--muted);line-height:1.6;letter-spacing:.03em;}
.home-card-arrow{position:absolute;bottom:1.5rem;right:1.5rem;font-size:20px;opacity:.3;}
.home-card:hover .home-card-arrow{opacity:1;color:var(--gold);}
@media(max-width:600px){.home-cards{grid-template-columns:1fr;padding:1.5rem 1rem;}.home-masthead{padding:.75rem 1rem;}.home-utility-bar{padding:.75rem 1rem 0;}.home-actions{width:100%;}.install-btn,.status-chip{width:100%;justify-content:center;}}

/* DIARY SCREEN */
#diary-screen{display:none;}
#diary-screen.visible{display:block;}
.diary-masthead{border-bottom:3px solid var(--ink);padding:.7rem 2.5rem;display:grid;grid-template-columns:auto 1fr auto;align-items:end;gap:1rem;}
.diary-back{background:none;border:none;cursor:pointer;font-family:'DM Mono',monospace;font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.07em;display:flex;align-items:center;gap:5px;}
.diary-back:hover{color:var(--ink);}
.diary-body{display:grid;grid-template-columns:200px 1fr;margin:0 2.5rem;border-left:1px solid var(--border);border-right:1px solid var(--border);min-height:calc(100vh - 120px);align-items:start;}
.diary-sidebar{border-right:1px solid var(--border);padding:1.25rem 1rem;display:block!important;}
.diary-main{padding:1.5rem 2rem;}
.diary-date-lbl{font-family:'Playfair Display',serif;font-size:22px;font-weight:700;margin-bottom:4px;}
.diary-date-sub{font-family:'DM Mono',monospace;font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.07em;margin-bottom:1.5rem;}
.diary-textarea{width:100%;min-height:320px;border:none;background:transparent;font-family:'DM Sans',sans-serif;font-size:15px;line-height:1.9;color:var(--ink);resize:none;outline:none;}
.diary-textarea::placeholder{color:var(--border);}
.diary-photo-strip{display:flex;gap:8px;flex-wrap:wrap;margin-top:1rem;padding-top:1rem;border-top:1px solid var(--border);}
.diary-photo-thumb{width:80px;height:80px;object-fit:cover;border-radius:8px;cursor:zoom-in;border:1px solid var(--border);}
.diary-photo-add{width:80px;height:80px;border:2px dashed var(--border);border-radius:8px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:22px;color:var(--border);transition:all .15s;position:relative;}
.diary-photo-add:hover{border-color:var(--gold);color:var(--gold);}
.diary-photo-add input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%;}
.diary-save-bar{border-top:1px solid var(--border);padding:.75rem 2rem;display:flex;justify-content:space-between;align-items:center;margin:0 2.5rem;}
.diary-save-status{font-family:'DM Mono',monospace;font-size:10px;color:var(--muted);}
.diary-entry-item{padding:8px 10px;border-radius:6px;cursor:pointer;margin-bottom:3px;transition:background .12s;}
.diary-entry-item:hover{background:rgba(0,0,0,.05);}
.diary-entry-item.active{background:var(--ink);color:var(--paper);}
.diary-entry-date{font-family:'DM Mono',monospace;font-size:10px;text-transform:uppercase;letter-spacing:.05em;}
.diary-entry-item.active .diary-entry-date{color:rgba(255,255,255,.6);}
.diary-entry-preview{font-size:12px;color:var(--muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.diary-entry-item.active .diary-entry-preview{color:rgba(255,255,255,.7);}
.btn-new-entry{width:100%;padding:8px;font-family:'DM Mono',monospace;font-size:10px;text-transform:uppercase;letter-spacing:.07em;border:1px solid var(--border);background:transparent;color:var(--muted);cursor:pointer;border-radius:5px;margin-bottom:12px;}
.btn-new-entry:hover{background:var(--ink);color:var(--paper);border-color:var(--ink);}
@media(max-width:680px){
  .diary-body{grid-template-columns:1fr;margin:0 1rem;}
  .diary-sidebar{border-right:none;border-bottom:1px solid var(--border);display:block!important;}
  .diary-masthead{padding:.5rem 1rem;}
  .diary-save-bar{margin:0 1rem;}
  .diary-main{padding:1rem;}
}


.notif-bar{position:fixed;top:0;left:0;right:0;z-index:9999;background:var(--ink);color:var(--paper);padding:.6rem 1.5rem;display:none;align-items:center;justify-content:space-between;gap:12px;font-size:13px;font-family:'DM Sans',sans-serif;}
.notif-bar.on{display:flex;}
.notif-bar button{padding:4px 14px;border-radius:4px;border:none;cursor:pointer;font-size:11px;font-family:'DM Mono',monospace;}
.notif-bar .nb-yes{background:var(--gold);color:var(--ink);}
.notif-bar .nb-no{background:transparent;color:rgba(255,255,255,.5);border:1px solid rgba(255,255,255,.2);}

/* ENHANCED LANDING + MOBILE APP SHELL */
body{
  background:
    radial-gradient(circle at top, rgba(201,151,15,.12), transparent 22%),
    linear-gradient(180deg, #f5f2ea 0%, #f0eadf 100%);
  padding-bottom:env(safe-area-inset-bottom);
}
#home-screen{
  position:relative;
  background:
    linear-gradient(180deg, rgba(245,242,234,.55), rgba(245,242,234,.96)),
    repeating-linear-gradient(90deg, rgba(201,151,15,.06) 0 1px, transparent 1px 48px);
}
#home-screen::before{
  content:'';
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 85% 16%, rgba(201,151,15,.16), transparent 18%),
    linear-gradient(135deg, rgba(13,13,13,.03), transparent 38%);
  pointer-events:none;
}
.home-masthead{
  position:relative;
  z-index:1;
  padding:1.2rem 2.5rem .85rem;
  border-bottom:1px solid rgba(13,13,13,.1);
  backdrop-filter:blur(10px);
}
.home-masthead-eyebrow{
  font-family:'DM Mono',monospace;
  font-size:10px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:10px;
}
.home-masthead-title{
  max-width:5ch;
}
.home-shell{
  position:relative;
  z-index:1;
  display:grid;
  gap:1.5rem;
  padding:1.5rem 2.5rem 2rem;
}
.home-hero{
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(280px,.8fr);
  gap:1.5rem;
  align-items:stretch;
}
.home-hero-copy,.home-hero-art,.home-story-card,.editorial-card{
  border:1px solid rgba(13,13,13,.12);
  background:rgba(255,255,255,.74);
  box-shadow:0 14px 40px rgba(17,12,5,.06);
  backdrop-filter:blur(12px);
}
.home-hero-copy{
  border-radius:28px;
  padding:2rem;
}
.home-hero-title{
  font-family:'Playfair Display',serif;
  font-size:clamp(34px,4.8vw,62px);
  line-height:.98;
  letter-spacing:-.03em;
  margin:0 0 1rem;
  max-width:12ch;
}
.home-hero-text{
  font-size:15px;
  line-height:1.8;
  color:var(--muted);
  max-width:56ch;
}
.home-actions{
  margin-top:1.4rem;
  align-items:center;
}
.ghost-btn{
  height:40px;
  padding:0 16px;
  border:1px solid rgba(13,13,13,.15);
  border-radius:999px;
  background:rgba(255,255,255,.72);
  color:var(--ink);
  font-family:'DM Mono',monospace;
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  cursor:pointer;
}
.ghost-btn:hover{
  border-color:var(--gold);
  color:#7a5500;
}
.home-hero-art{
  border-radius:32px;
  padding:1.5rem;
  position:relative;
  overflow:hidden;
  background:
    linear-gradient(180deg, rgba(13,13,13,.9), rgba(31,22,11,.88)),
    radial-gradient(circle at center, rgba(201,151,15,.18), transparent 55%);
  min-height:320px;
}
.hero-orbit{
  position:absolute;
  border:1px solid rgba(255,255,255,.18);
  border-radius:999px;
}
.hero-orbit-a{inset:18% 12% auto 12%;height:180px;}
.hero-orbit-b{inset:auto 9% 12% 9%;height:220px;}
.hero-sun{
  width:220px;
  height:220px;
  border-radius:50%;
  margin:2.2rem auto 1.4rem;
  background:linear-gradient(180deg, #fff7d6 0%, #fff 84%);
  border:4px solid rgba(201,151,15,.9);
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
}
.hero-sun::before{
  content:'';
  position:absolute;
  width:112px;
  height:56px;
  border-radius:112px 112px 0 0;
  background:#d39b05;
  bottom:76px;
}
.hero-sun span{
  width:68px;
  height:34px;
  border-radius:68px 68px 0 0;
  background:#e8bc47;
  position:absolute;
  bottom:76px;
}
.hero-quote{
  color:rgba(255,255,255,.78);
  text-align:center;
  font-family:'Playfair Display',serif;
  font-size:24px;
  line-height:1.3;
  max-width:14ch;
  margin:0 auto;
}
.home-dashboard{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr);
  gap:1.5rem;
}
.home-story-card{
  border-radius:26px;
  padding:1.5rem;
}
.story-label{
  font-family:'DM Mono',monospace;
  font-size:10px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:1rem;
}
.story-stat-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:.9rem;
}
.story-stat{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:1rem;
  border-radius:18px;
  background:rgba(245,242,234,.9);
  border:1px solid rgba(13,13,13,.08);
}
.story-stat-num{
  font-family:'Playfair Display',serif;
  font-size:34px;
  line-height:1;
}
.story-stat-lbl{
  font-family:'DM Mono',monospace;
  font-size:10px;
  color:var(--muted);
  letter-spacing:.08em;
  text-transform:uppercase;
}
.home-progress-line{
  height:8px;
  background:rgba(13,13,13,.08);
  border-radius:999px;
  overflow:hidden;
  margin-top:1rem;
}
.home-progress-bar{
  height:100%;
  width:0;
  background:linear-gradient(90deg, #c9970f, #d9b03c);
  transition:width .35s ease;
}
.home-story-side .home-cards{
  padding:0;
  gap:1rem;
}
.home-card{
  min-height:220px;
  border-width:1px;
  border-color:rgba(13,13,13,.1);
  border-radius:22px;
  background:linear-gradient(180deg, rgba(255,255,255,.94), rgba(245,242,234,.94));
}
.home-card-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.home-card-badge{
  font-family:'DM Mono',monospace;
  font-size:10px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--gold);
}
.home-editorial{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(280px,.9fr);
  gap:1.5rem;
}
.editorial-card{
  border-radius:24px;
  padding:1.4rem;
}
.entry-stream{
  display:grid;
  gap:.75rem;
}
.entry-empty{
  border:1px dashed rgba(13,13,13,.12);
  border-radius:18px;
  padding:1rem;
  color:var(--muted);
  font-size:13px;
}
.entry-snippet{
  display:grid;
  gap:6px;
  padding:1rem 1rem .95rem;
  border-radius:18px;
  background:rgba(245,242,234,.9);
  border:1px solid rgba(13,13,13,.08);
}
.entry-snippet-date{
  font-family:'DM Mono',monospace;
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.09em;
  color:var(--gold);
}
.entry-snippet-title{
  font-family:'Playfair Display',serif;
  font-size:22px;
  line-height:1.1;
}
.entry-snippet-text{
  color:var(--muted);
  font-size:13px;
  line-height:1.7;
}
.entry-snippet-action{
  margin-top:4px;
  font-family:'DM Mono',monospace;
  font-size:10px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink);
}
.editorial-note{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  background:
    linear-gradient(180deg, rgba(13,13,13,.94), rgba(31,22,11,.92)),
    radial-gradient(circle at top, rgba(201,151,15,.22), transparent 38%);
  color:var(--paper);
}
.editorial-note .story-label{
  color:rgba(255,255,255,.55);
}
.editorial-note-text{
  font-family:'Playfair Display',serif;
  font-size:28px;
  line-height:1.25;
  max-width:14ch;
}
.editorial-chip-row{
  display:flex;
  gap:.5rem;
  flex-wrap:wrap;
  margin-top:1rem;
}
.editorial-chip{
  border:1px solid rgba(255,255,255,.16);
  border-radius:999px;
  padding:8px 12px;
  font-family:'DM Mono',monospace;
  font-size:10px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(255,255,255,.8);
}
.mobile-tabbar{
  display:none;
}

@media(max-width:1024px){
  .home-hero,
  .home-dashboard,
  .home-editorial{
    grid-template-columns:1fr;
  }
  .story-stat-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media(max-width:768px){
  body{
    padding-bottom:calc(82px + env(safe-area-inset-bottom));
  }
  .notif-bar{
    padding:.75rem 1rem;
    flex-wrap:wrap;
  }
  .home-masthead{
    padding:1rem 1rem .75rem;
    align-items:flex-start;
  }
  .home-user{
    gap:8px;
  }
  .home-shell{
    padding:1rem 1rem 1.25rem;
    gap:1rem;
  }
  .home-hero-copy,
  .home-hero-art,
  .home-story-card,
  .editorial-card{
    border-radius:22px;
  }
  .home-hero-copy{
    padding:1.35rem;
  }
  .home-hero-title{
    font-size:34px;
  }
  .home-hero-text{
    font-size:14px;
  }
  .home-actions{
    gap:.55rem;
  }
  .install-btn,
  .ghost-btn,
  .status-chip{
    width:100%;
    justify-content:center;
  }
  .home-hero-art{
    min-height:260px;
    padding:1rem;
  }
  .hero-sun{
    width:170px;
    height:170px;
    margin-top:1.2rem;
  }
  .hero-sun::before{
    width:88px;
    height:44px;
    bottom:58px;
  }
  .hero-sun span{
    width:54px;
    height:28px;
    bottom:58px;
  }
  .hero-quote{
    font-size:20px;
  }
  .story-stat-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .story-stat{
    border-radius:16px;
  }
  .story-stat-num{
    font-size:28px;
  }
  #app-screen .bottom-bar,
  #diary-screen .diary-save-bar{
    padding-bottom:calc(.75rem + env(safe-area-inset-bottom) + 58px);
  }
  .main,
  .diary-main{
    padding-bottom:calc(6rem + env(safe-area-inset-bottom));
  }
  .music-player{
    bottom:5.8rem;
    right:1rem;
  }
  .mobile-tabbar{
    position:fixed;
    left:12px;
    right:12px;
    bottom:12px;
    z-index:8000;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:8px;
    padding:10px;
    border:1px solid rgba(13,13,13,.08);
    border-radius:22px;
    background:rgba(255,255,255,.82);
    box-shadow:0 14px 40px rgba(17,12,5,.14);
    backdrop-filter:blur(18px);
  }
  body[data-screen="login"] .mobile-tabbar{
    display:none;
  }
  .mobile-tabbar-btn{
    border:none;
    background:transparent;
    border-radius:16px;
    min-height:54px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:4px;
    font-family:'DM Mono',monospace;
    font-size:10px;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--muted);
    cursor:pointer;
  }
  .mobile-tabbar-btn.active{
    background:var(--ink);
    color:var(--paper);
  }
  .mobile-tabbar-icon{
    font-size:18px;
    line-height:1;
  }
}