@import url('https://fonts.googleapis.com/css2?family=Special+Elite&family=Courier+Prime:ital,wght@0,400;0,700;1,400&display=swap');
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
:root{
  --ink:#1a1a1a;--ink-light:#555;--ink-faint:#aaa;
  --paper:#f5f0e8;--paper-dark:#ede7d9;--line:#c8bfa8;--line-soft:#e0d8c8;
  --red:#b03030;--accent:#4a4a8a;--green:#2d7a4a;--lh:36px;
}
body{
  background:#d6cfc4;font-family:'Courier Prime',monospace;color:var(--ink);min-height:100vh;
  background-image:repeating-linear-gradient(45deg,transparent,transparent 40px,rgba(0,0,0,0.015) 40px,rgba(0,0,0,0.015) 80px);
}

/* ── LOGIN PAGE ──────────────────────────────────────── */
.login-wrap{
  min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;
}
.login-box{
  background:var(--paper);width:400px;max-width:100%;
  box-shadow:-6px 0 0 #b5aba0, 8px 6px 24px rgba(0,0,0,0.25);
  position:relative;overflow:hidden;
}
.login-box::before{
  content:'';position:absolute;left:44px;top:0;bottom:0;width:2px;
  background:repeating-linear-gradient(to bottom,transparent 0,transparent 28px,var(--line) 28px,var(--line) 30px);
  z-index:5;pointer-events:none;
}
.login-binding{position:absolute;left:36px;top:0;bottom:0;width:18px;display:flex;flex-direction:column;align-items:center;justify-content:space-around;padding:20px 0;z-index:6;pointer-events:none;}
.login-header{padding:28px 24px 18px 68px;border-bottom:2px solid var(--ink);background:var(--paper-dark);}
.login-title{font-family:'Special Elite',cursive;font-size:18px;letter-spacing:2px;}
.login-subtitle{font-size:10px;color:var(--ink-light);text-transform:uppercase;letter-spacing:2px;margin-top:3px;}
.login-body{padding:24px 24px 24px 68px;}
.login-field{margin-bottom:18px;}
.login-label{font-size:10px;text-transform:uppercase;letter-spacing:2px;color:var(--ink-light);display:block;margin-bottom:6px;}
.login-input{
  width:100%;border:none;border-bottom:2px solid var(--line);background:transparent;
  font-family:'Courier Prime',monospace;font-size:16px;color:var(--ink);
  padding:6px 0;outline:none;transition:border-color 0.15s;
}
.login-input:focus{border-bottom-color:var(--ink);}
.login-btn{
  width:100%;background:var(--ink);color:var(--paper);border:none;
  font-family:'Courier Prime',monospace;font-size:13px;letter-spacing:2px;
  text-transform:uppercase;padding:14px;cursor:pointer;margin-top:8px;
  transition:opacity 0.15s;
}
.login-btn:hover{opacity:0.8;}
.login-btn:disabled{opacity:0.5;cursor:default;}
.login-error{
  color:var(--red);font-size:12px;margin-top:10px;
  padding:8px 10px;border:1px solid var(--red);background:rgba(176,48,48,0.05);
  display:none;
}
.login-error.show{display:block;}
.login-lang{display:flex;gap:6px;margin-bottom:20px;}
.login-lang-btn{background:none;border:1px solid var(--line);font-family:'Courier Prime',monospace;font-size:10px;letter-spacing:1px;padding:3px 9px;cursor:pointer;color:var(--ink-light);transition:all 0.15s;}
.login-lang-btn.active{background:var(--ink);color:var(--paper);border-color:var(--ink);}

/* ── TOPNAV ──────────────────────────────────────────── */
.topnav{position:sticky;top:0;z-index:200;background:var(--ink);display:flex;align-items:center;padding:0 16px;box-shadow:0 2px 8px rgba(0,0,0,0.3);min-height:48px;gap:0;}
.topnav-logo{font-family:'Special Elite',cursive;font-size:15px;letter-spacing:2px;color:var(--paper);padding-right:16px;border-right:1px solid #333;margin-right:2px;flex-shrink:0;white-space:nowrap;}
.topnav-tabs{display:flex;flex:1;overflow-x:auto;scrollbar-width:none;}
.topnav-tabs::-webkit-scrollbar{display:none;}
.topnav-tab{padding:14px 14px;font-family:'Courier Prime',monospace;font-size:11px;text-transform:uppercase;letter-spacing:1.5px;color:#888;text-decoration:none;border-bottom:3px solid transparent;transition:all 0.15s;white-space:nowrap;display:inline-block;}
.topnav-tab:hover{color:var(--paper);}
.topnav-tab.active{color:var(--paper);border-bottom-color:var(--paper);}
.topnav-lang{display:flex;gap:3px;flex-shrink:0;margin-left:6px;padding-left:10px;border-left:1px solid #333;}
.lang-btn{background:none;border:1px solid #444;color:#888;font-family:'Courier Prime',monospace;font-size:10px;letter-spacing:1px;padding:3px 7px;cursor:pointer;transition:all 0.15s;}
.lang-btn:hover{border-color:#888;color:var(--paper);}
.lang-btn.active{background:var(--paper);color:var(--ink);border-color:var(--paper);}

/* ── PAGE WRAP ───────────────────────────────────────── */
.page-wrap{padding:24px 18px 40px;max-width:920px;margin:0 auto;}

/* ── NOTEBOOK ────────────────────────────────────────── */
.notebook{background:var(--paper);border-radius:2px;box-shadow:-8px 0 0 #b5aba0,8px 4px 20px rgba(0,0,0,0.25),0 2px 6px rgba(0,0,0,0.15);position:relative;overflow:hidden;}
.notebook::before{content:'';position:absolute;left:54px;top:0;bottom:0;width:2px;background:repeating-linear-gradient(to bottom,transparent 0,transparent 28px,var(--line) 28px,var(--line) 30px);z-index:10;pointer-events:none;}
.binding-holes{position:absolute;left:46px;top:0;bottom:0;width:18px;display:flex;flex-direction:column;align-items:center;justify-content:space-around;padding:20px 0;z-index:11;pointer-events:none;}
.hole{width:14px;height:14px;border-radius:50%;background:#d6cfc4;border:1.5px solid #a09585;box-shadow:inset 0 1px 2px rgba(0,0,0,0.2);}

/* ── NB HEADER ───────────────────────────────────────── */
.nb-header{padding:24px 28px 15px 80px;border-bottom:2px solid var(--ink);background:var(--paper-dark);}
.nb-header-row{display:flex;justify-content:space-between;align-items:flex-start;}
.nb-title{font-family:'Special Elite',cursive;font-size:22px;letter-spacing:2px;line-height:1;}
.nb-subtitle{font-size:10px;color:var(--ink-light);text-transform:uppercase;letter-spacing:3px;margin-top:4px;}
.nb-date-label{font-size:12px;color:var(--ink-light);font-style:italic;text-align:right;}

/* ── DATE NAV ────────────────────────────────────────── */
.date-nav{display:flex;align-items:center;gap:10px;padding:10px 28px 10px 80px;background:var(--paper-dark);border-bottom:1px solid var(--line);flex-wrap:wrap;}
.date-nav-btn{background:none;border:1px solid var(--line);width:26px;height:26px;cursor:pointer;font-size:14px;display:flex;align-items:center;justify-content:center;font-family:'Courier Prime',monospace;transition:all 0.15s;}
.date-nav-btn:hover{background:var(--paper);border-color:var(--ink);}
.date-nav-label{font-family:'Special Elite',cursive;font-size:14px;letter-spacing:1px;}
.view-tabs{display:flex;margin-left:auto;}
.view-tab{padding:4px 10px;font-family:'Courier Prime',monospace;font-size:10px;text-transform:uppercase;letter-spacing:1px;background:none;border:1px solid var(--line);border-right:none;cursor:pointer;transition:all 0.15s;text-decoration:none;color:var(--ink-light);display:inline-block;}
.view-tab:last-child{border-right:1px solid var(--line);}
.view-tab:hover,.view-tab.active{background:var(--ink);color:var(--paper);border-color:var(--ink);}

/* ── LINED BODY ──────────────────────────────────────── */
.nb-body{padding:0 28px 32px 80px;background-image:repeating-linear-gradient(to bottom,transparent 0,transparent calc(var(--lh) - 1px),var(--line-soft) calc(var(--lh) - 1px),var(--line-soft) var(--lh));background-size:100% var(--lh);}
.section-title{font-family:'Special Elite',cursive;font-size:13px;letter-spacing:1px;text-transform:uppercase;padding:14px 0 8px;border-bottom:1px solid var(--line);}

/* ── PANELS ──────────────────────────────────────────── */
.panel{border:1px solid var(--line);background:transparent;}
.panel-header{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;border-bottom:1px solid var(--line);background:var(--paper-dark);}
.panel-title{font-family:'Special Elite',cursive;font-size:11px;letter-spacing:1px;text-transform:uppercase;}
.panel-body{padding:2px 12px 10px;}

/* ── GRID ────────────────────────────────────────────── */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:13px;}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:13px;}

/* ── BUTTONS ─────────────────────────────────────────── */
.btn{font-family:'Courier Prime',monospace;font-size:11px;letter-spacing:1px;text-transform:uppercase;padding:5px 13px;cursor:pointer;border:1px solid var(--ink);transition:all 0.15s;background:none;color:var(--ink);}
.btn:hover{background:var(--ink);color:var(--paper);}
.btn-primary{background:var(--ink);color:var(--paper);}
.btn-primary:hover{opacity:0.75;}
.btn-sm{padding:3px 9px;font-size:10px;}
.btn-ghost{border-color:transparent;color:var(--ink-light);}
.btn-ghost:hover{background:var(--paper-dark);color:var(--ink);border-color:var(--line);}
.btn-danger{border-color:var(--red);color:var(--red);}
.btn-danger:hover{background:var(--red);color:#fff;}

/* ── INPUTS ──────────────────────────────────────────── */
input[type=text],input[type=time],input[type=date],textarea,select{font-family:'Courier Prime',monospace;font-size:14px;background:transparent;border:none;border-bottom:1px solid var(--line);color:var(--ink);padding:4px 0;outline:none;transition:border-color 0.15s;width:100%;}
input:focus,textarea:focus,select:focus{border-bottom-color:var(--ink);}
input::placeholder,textarea::placeholder{color:var(--ink-faint);font-style:italic;}
textarea{resize:none;}
select{background:var(--paper-dark);border:1px solid var(--line);padding:4px 7px;}
.nb-ta{width:100%;border:none;background:transparent;font-family:'Courier Prime',monospace;font-size:14px;color:var(--ink);outline:none;resize:none;line-height:var(--lh);padding:0;caret-color:var(--red);}
.nb-ta::placeholder{color:var(--ink-faint);font-style:italic;}

/* ── EMOJI ───────────────────────────────────────────── */
.emoji-row{display:flex;align-items:center;gap:10px;height:var(--lh);}
.emoji-label{font-size:13px;width:120px;flex-shrink:0;}
.emoji-opts{display:flex;gap:5px;}
.emoji-btn{font-size:19px;cursor:pointer;opacity:0.28;transition:opacity 0.15s,transform 0.15s;background:none;border:none;padding:0;line-height:1;}
.emoji-btn:hover{opacity:0.65;transform:scale(1.12);}
.emoji-btn.sel{opacity:1;transform:scale(1.18);}

/* ── ENTRIES ─────────────────────────────────────────── */
.entry-item{display:flex;align-items:baseline;gap:10px;min-height:var(--lh);}
.entry-item:hover .entry-actions{opacity:1;}
.bullet-icon{font-size:15px;flex-shrink:0;width:20px;text-align:center;cursor:pointer;user-select:none;line-height:var(--lh);}
.entry-text{flex:1;font-size:14px;line-height:var(--lh);}
.entry-text.done{text-decoration:line-through;color:var(--ink-faint);}
.entry-actions{display:flex;gap:4px;opacity:0;transition:opacity 0.15s;align-items:center;}
.entry-btn{background:none;border:none;cursor:pointer;font-size:12px;color:var(--ink-light);padding:2px 4px;font-family:'Courier Prime',monospace;transition:color 0.15s;}
.entry-btn:hover{color:var(--red);}

/* ── MODAL ───────────────────────────────────────────── */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:1000;align-items:center;justify-content:center;}
.modal-overlay.open{display:flex;}
.modal{background:var(--paper);width:520px;max-width:96vw;max-height:92vh;overflow-y:auto;box-shadow:-6px 0 0 #b5aba0,8px 6px 30px rgba(0,0,0,0.3);position:relative;}
.modal::before{content:'';position:absolute;left:42px;top:0;bottom:0;width:2px;background:repeating-linear-gradient(to bottom,transparent 0,transparent 28px,var(--line) 28px,var(--line) 30px);z-index:5;pointer-events:none;}
.modal-header{display:flex;justify-content:space-between;align-items:center;padding:16px 18px 13px 66px;border-bottom:2px solid var(--ink);background:var(--paper-dark);}
.modal-title{font-family:'Special Elite',cursive;font-size:15px;letter-spacing:1px;}
.modal-close{background:none;border:none;font-size:22px;cursor:pointer;color:var(--ink-light);}
.modal-close:hover{color:var(--ink);}
.modal-body{padding:14px 18px 14px 66px;}
.modal-footer{padding:12px 18px 12px 66px;border-top:1px solid var(--line);display:flex;justify-content:flex-end;gap:10px;background:var(--paper-dark);}

/* ── FORM ────────────────────────────────────────────── */
.form-row{margin-bottom:13px;}
.form-label{font-size:10px;text-transform:uppercase;letter-spacing:2px;color:var(--ink-light);margin-bottom:5px;display:block;}
.form-group{display:flex;gap:8px;}
.radio-group{display:flex;border:1px solid var(--line);width:fit-content;}
.radio-opt{padding:5px 12px;font-size:11px;letter-spacing:1px;text-transform:uppercase;cursor:pointer;border:none;background:none;font-family:'Courier Prime',monospace;color:var(--ink-light);border-right:1px solid var(--line);transition:all 0.15s;}
.radio-opt:last-child{border-right:none;}
.radio-opt.active{background:var(--ink);color:var(--paper);}

/* ── FOOTER ──────────────────────────────────────────── */
.nb-footer{padding:12px 28px 12px 80px;border-top:1px solid var(--line);font-size:10px;color:var(--ink-faint);text-align:center;letter-spacing:1px;text-transform:uppercase;background:var(--paper-dark);}

/* ── TOAST ───────────────────────────────────────────── */
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--ink);color:var(--paper);padding:10px 24px;font-family:'Courier Prime',monospace;font-size:13px;letter-spacing:1px;opacity:0;transition:all 0.3s;z-index:9999;pointer-events:none;}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

/* ── LOADING OVERLAY ─────────────────────────────────── */
.page-loading{position:fixed;inset:0;background:#d6cfc4;display:flex;align-items:center;justify-content:center;z-index:9000;font-family:'Special Elite',cursive;font-size:18px;letter-spacing:2px;color:var(--ink);}

/* ── MISC ────────────────────────────────────────────── */
.empty{padding:22px;text-align:center;color:var(--ink-faint);font-style:italic;font-size:13px;}
::-webkit-scrollbar{width:5px;height:5px;}
::-webkit-scrollbar-track{background:var(--paper-dark);}
::-webkit-scrollbar-thumb{background:var(--line);}

/* ── TABLET ──────────────────────────────────────────── */
@media(max-width:768px){
  .page-wrap{padding:14px 10px 32px;}
  .notebook::before{left:40px;}
  .binding-holes{left:32px;}
  .hole{width:11px;height:11px;}
  .nb-header{padding:18px 16px 13px 60px;}
  .nb-title{font-size:18px;}
  .date-nav{padding:8px 16px 8px 60px;}
  .nb-body{padding:0 16px 26px 60px;}
  .nb-footer{padding:10px 16px 10px 60px;}
  .modal-header,.modal-body,.modal-footer{padding-left:50px;}
  .modal::before{left:30px;}
  .grid-2{grid-template-columns:1fr;}
  .grid-3{grid-template-columns:1fr 1fr;}
  .topnav-tab{padding:14px 10px;font-size:10px;}
}

/* ── MOBILE ──────────────────────────────────────────── */
@media(max-width:480px){
  .page-wrap{padding:6px 4px 20px;}
  .notebook::before,.binding-holes{display:none;}
  .nb-header{padding:14px 12px 11px 14px;}
  .nb-title{font-size:16px;}
  .date-nav{padding:8px 12px;}
  .nb-body{padding:0 12px 20px 12px;}
  .nb-footer{padding:10px 12px;}
  .modal-header,.modal-body,.modal-footer{padding-left:14px;padding-right:14px;}
  .modal::before{display:none;}
  .grid-2,.grid-3{grid-template-columns:1fr;}
  .view-tabs{display:none;}
  .topnav{padding:0 8px;}
  .topnav-logo{font-size:13px;padding-right:8px;}
  .topnav-tab{padding:14px 8px;font-size:9px;}
  .lang-btn{padding:3px 5px;font-size:9px;}
  .emoji-label{width:80px;font-size:11px;}
  .login-box::before,.login-binding{display:none;}
  .login-header{padding:20px 16px 14px 16px;}
  .login-body{padding:20px 16px 20px 16px;}
}