/* ═══════════════════════════════ TOKENS ═══════════════════════════════ */
:root{
  --ink:#0d0d0d; --cream:#f5f0e8; --gold:#c9a84c; --gold-light:#e8d49a;
  --gold-dim:rgba(201,168,76,0.15); --warm-gray:#8a8278; --accent:#2c4a3e;
  --line:rgba(201,168,76,0.25);
}
*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:'DM Mono',monospace;background:var(--cream);color:var(--ink);min-height:100vh;overflow-x:hidden;}

/* GRAIN */
body::before{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:100;opacity:.4;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
}

/* ══════════════════════════ RTL / ARABIC ══════════════════════════════ */
body.rtl,body.rtl input,body.rtl textarea{font-family:'Noto Naskh Arabic',serif;}
body.rtl .f-title,body.rtl .hero h1,body.rtl .q-text,body.rtl .cd-d{font-family:'Noto Naskh Arabic',serif;}
body.rtl{direction:rtl;}
body.rtl .hdr{flex-direction:row-reverse;}
body.rtl .hdr-r{align-items:flex-start;}
body.rtl .date-box{text-align:left;}
body.rtl .sec-hdr{flex-direction:row-reverse;}
body.rtl .sec-cnt{margin-left:0;margin-right:auto;}
body.rtl .task{flex-direction:row-reverse;}
body.rtl .prog-row{flex-direction:row-reverse;}
body.rtl .obs-hdr{flex-direction:row-reverse;}
body.rtl .ob-lbl{flex-direction:row-reverse;}
body.rtl .ob-lbl::after{display:none;}
body.rtl .ob-lbl::before{content:'';flex:1;height:1px;background:var(--line);}
body.rtl .stats{flex-direction:row-reverse;}
body.rtl .btn-reset{margin-left:0;margin-right:auto;}
body.rtl .q-line{order:-1;}
body.rtl .quote::before{right:auto;left:36px;}
body.rtl #editBanner{flex-direction:row-reverse;}
body.rtl .cd-d{letter-spacing:0;}
body.rtl .lang-bar{justify-content:flex-start;}
body.rtl .date-box b{font-family:'Noto Naskh Arabic',serif;letter-spacing:0;}
body.rtl .sec-name{font-family:'Noto Naskh Arabic',serif;letter-spacing:0;font-size:12px;}
body.rtl .obs-ttl{font-family:'Noto Naskh Arabic',serif;letter-spacing:0;font-size:12px;}
body.rtl .ob-lbl{font-family:'Noto Naskh Arabic',serif;letter-spacing:0;font-size:11px;}
body.rtl .f-time,body.rtl .f-desc{letter-spacing:0;font-family:'Noto Naskh Arabic',serif;}
body.rtl .f-title{font-family:'Noto Naskh Arabic',serif;font-size:15px;}
body.rtl .n-line{font-family:'Noto Naskh Arabic',serif;text-align:right;}
body.rtl .r-area{font-family:'Noto Naskh Arabic',serif;text-align:right;}
body.rtl .mood-txt{font-family:'Noto Naskh Arabic',serif;letter-spacing:0;font-size:11px;text-align:right;}
body.rtl .st-l{font-family:'Noto Naskh Arabic',serif;letter-spacing:0;font-size:11px;}
body.rtl .btn-reset{font-family:'Noto Naskh Arabic',serif;letter-spacing:0;font-size:11px;}
body.rtl .btn-add{font-family:'Noto Naskh Arabic',serif;letter-spacing:0;font-size:11px;}
body.rtl .hero p{letter-spacing:0;}
body.rtl .prog-row span{letter-spacing:0;}
body.rtl .prog-fill{background:linear-gradient(270deg,var(--gold),var(--gold-light));}
body.rtl .prog-fill::after{right:auto;left:-3px;}
body.rtl .q-text{font-style:normal;}

/* ════════════════════════ LANG BAR ═══════════════════════════════════ */
.lang-bar{background:var(--ink);padding:8px 48px;display:flex;align-items:center;gap:6px;justify-content:flex-end;}
.lang-btn{border:1px solid rgba(201,168,76,.2);background:transparent;color:var(--warm-gray);padding:4px 10px;font-family:'DM Mono',monospace;font-size:10px;letter-spacing:.1em;cursor:pointer;transition:all .2s;border-radius:2px;}
.lang-btn:hover{border-color:var(--gold);color:var(--gold);}
.lang-btn.active{background:var(--gold-dim);border-color:var(--gold);color:var(--gold);}
.lang-sep{color:rgba(201,168,76,.2);font-size:10px;}

/* ═══════════════════════ EDIT BANNER ════════════════════════════════ */
#editBanner{background:var(--accent);color:var(--gold-light);padding:11px 48px;font-size:10px;letter-spacing:.12em;text-transform:uppercase;display:none;align-items:center;gap:12px;}
#editBanner.on{display:flex;}
#editBanner small{color:rgba(229,219,190,.5);}

/* ═════════════════════════ HEADER ═══════════════════════════════════ */
.hdr{padding:30px 48px 16px;display:flex;justify-content:space-between;align-items:flex-start;}
.brand{font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:300;font-size:13px;letter-spacing:.15em;color:var(--gold);text-transform:uppercase;}
.hdr-r{display:flex;flex-direction:column;align-items:flex-end;gap:8px;}
.date-box{text-align:right;font-size:11px;color:var(--warm-gray);letter-spacing:.07em;}
.date-box b{display:block;font-family:'Syne',sans-serif;font-weight:800;font-size:10px;letter-spacing:.2em;color:var(--gold);text-transform:uppercase;}
#btnEdit{border:1px solid var(--line);background:transparent;color:var(--warm-gray);padding:7px 16px;font-family:'DM Mono',monospace;font-size:9px;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;transition:all .2s;}
#btnEdit:hover{border-color:var(--gold);color:var(--gold);}
#btnEdit.on{background:var(--gold-dim);border-color:var(--gold);color:var(--gold);}

/* ══════════════════════ CALENDAR ════════════════════════════════════ */
.cal-wrap{padding:0 48px 10px;}
.cal-scroll{display:flex;gap:10px;overflow-x:auto;padding-bottom:10px;scrollbar-width:thin;scrollbar-color:var(--line) transparent;}
.cal-scroll::-webkit-scrollbar{height:3px;}
.cal-scroll::-webkit-scrollbar-thumb{background:var(--line);border-radius:4px;}
.cal-day{flex-shrink:0;min-width:52px;border:1px solid var(--line);border-radius:5px;padding:9px 0;background:transparent;cursor:pointer;transition:all .2s;display:flex;flex-direction:column;align-items:center;gap:4px;position:relative;}
.cal-day:hover{border-color:var(--gold);}
.cal-day.today{border-style:dashed;}
.cal-day.active{background:var(--gold-dim);border-color:var(--gold);transform:scale(1.06);}
.cal-day.active .cd-n,.cal-day.active .cd-d{color:var(--gold);}
.cal-day.done::after{content:'';position:absolute;bottom:4px;width:4px;height:4px;background:var(--gold);border-radius:50%;box-shadow:0 0 5px var(--gold);}
.cd-d{font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--warm-gray);font-family:'DM Mono',monospace;line-height:1;}
.cd-n{font-family:'Syne',sans-serif;font-size:15px;font-weight:700;color:var(--ink);line-height:1;}

/* ══════════════════════════ HERO ════════════════════════════════════ */
.hero{padding:8px 48px 18px;}
.hero h1{font-family:'Cormorant Garamond',serif;font-weight:300;font-size:clamp(44px,8vw,80px);line-height:.92;letter-spacing:-.02em;}
.hero h1 em{font-style:italic;color:var(--gold);}
.hero p{margin-top:12px;font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--warm-gray);}

/* ════════════════════════ PROGRESS ══════════════════════════════════ */
.prog-zone{padding:0 48px 26px;}
.prog-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:9px;}
.prog-row span{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--warm-gray);}
.prog-row strong{font-family:'Syne',sans-serif;font-size:14px;font-weight:700;color:var(--gold);}
.prog-track{height:2px;background:var(--line);}
.prog-fill{height:100%;background:linear-gradient(90deg,var(--gold),var(--gold-light));transition:width .6s cubic-bezier(.4,0,.2,1);position:relative;}
.prog-fill::after{content:'';position:absolute;right:-3px;top:50%;transform:translateY(-50%);width:6px;height:6px;background:var(--gold);border-radius:50%;box-shadow:0 0 10px var(--gold);}

/* ═════════════════════════ GRID ═════════════════════════════════════ */
.grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);margin:0 48px;border:1px solid var(--line);}

/* ════════════════════════ SECTION ══════════════════════════════════ */
.sec{background:var(--cream);padding:24px 26px;}
.fw{grid-column:1/-1;}
.sec-hdr{display:flex;align-items:center;gap:10px;margin-bottom:18px;}
.sec-ico{width:27px;height:27px;border:1px solid var(--gold);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;flex-shrink:0;background:var(--gold-dim);}
.sec-name{font-family:'Syne',sans-serif;font-size:9px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);}
.sec-cnt{margin-left:auto;font-size:9px;color:var(--warm-gray);}

/* ═══════════════════════ TASK ROW ══════════════════════════════════ */
.task{display:flex;align-items:flex-start;gap:11px;padding:11px 0;border-bottom:1px solid var(--line);}
.task:last-of-type{border-bottom:none;}

/* Checkbox */
.chk{width:17px;height:17px;border:1.5px solid var(--gold);flex-shrink:0;margin-top:4px;position:relative;cursor:pointer;transition:background .2s;}
.chk::after{content:'';position:absolute;inset:3px;background:var(--gold);opacity:0;transition:opacity .15s;}
.chk::before{content:'✓';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:9px;color:var(--gold);opacity:0;z-index:1;}
.task.done .chk{background:var(--gold-dim);}
.task.done .chk::after,.task.done .chk::before{opacity:1;}

/* Task input fields */
.task-fields{flex:1;min-width:0;}
.f-time,.f-title,.f-desc{
  display:block;width:100%;background:transparent;
  border:none;border-bottom:1px solid transparent;outline:none;
  font-family:inherit;color:inherit;
  transition:border-color .18s,background .18s,padding .18s;
  cursor:default;pointer-events:none;
}
.f-time{font-size:9px;letter-spacing:.13em;color:var(--gold);text-transform:uppercase;margin-bottom:3px;padding:1px 0;}
.f-title{font-family:'Cormorant Garamond',serif;font-size:16px;font-weight:400;color:var(--ink);line-height:1.3;padding:1px 0;}
.f-desc{font-size:9px;color:var(--warm-gray);margin-top:3px;letter-spacing:.05em;padding:1px 0;}
.task.done .f-title{text-decoration:line-through;text-decoration-color:var(--gold);color:var(--warm-gray);}

/* Edit mode activates fields */
body.edit .f-time,body.edit .f-title,body.edit .f-desc{pointer-events:auto;cursor:text;border-bottom-color:var(--line);}
body.edit .f-time:focus,body.edit .f-title:focus,body.edit .f-desc:focus{border-bottom-color:var(--gold);background:var(--gold-dim);padding:2px 5px;}
body.edit .f-time:hover,body.edit .f-title:hover,body.edit .f-desc:hover{border-bottom-color:rgba(201,168,76,.35);}

/* Delete / Add buttons */
.btn-del{display:none;width:17px;height:17px;flex-shrink:0;margin-top:4px;background:transparent;border:1px solid rgba(180,60,60,.25);color:#b83232;font-size:10px;cursor:pointer;align-items:center;justify-content:center;transition:all .18s;line-height:1;padding:0;}
body.edit .btn-del{display:flex;}
.btn-del:hover{background:rgba(180,60,60,.1);border-color:#b83232;}
.btn-add{display:none;width:100%;padding:9px 0;margin-top:10px;background:transparent;border:1px dashed var(--line);color:var(--warm-gray);font-family:'DM Mono',monospace;font-size:9px;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;transition:all .2s;}
body.edit .btn-add{display:block;}
.btn-add:hover{border-color:var(--gold);color:var(--gold);background:var(--gold-dim);}

/* Pulse on tick */
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(201,168,76,.45);}
  70%{box-shadow:0 0 0 9px rgba(201,168,76,0);}
  100%{box-shadow:0 0 0 0 rgba(201,168,76,0);}
}
.task.pop .chk{animation:pulse .5s ease;}

/* ═══════════════════════ EVENING 3-COL ════════════════════════════ */
.eve-wrap{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);margin:0 -26px;}
.eve-col{background:var(--cream);padding:0 26px;}

/* ═══════════════════════ QUOTE ═════════════════════════════════════ */
.quote{grid-column:1/-1;background:var(--accent);padding:26px 48px;display:flex;align-items:center;gap:24px;position:relative;overflow:hidden;}
.quote::before{content:'❝';position:absolute;right:36px;top:50%;transform:translateY(-50%);font-size:70px;color:rgba(201,168,76,.08);font-family:'Cormorant Garamond',serif;line-height:1;}
.q-line{width:2px;height:38px;background:var(--gold);flex-shrink:0;}
.q-text{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:15.5px;color:var(--cream);line-height:1.5;}
.q-auth{margin-top:4px;font-size:9px;letter-spacing:.13em;color:var(--gold);text-transform:uppercase;}

/* ════════════════════════ OBSERVATION ════════════════════════════════ */
.obs{grid-column:1/-1;background:var(--cream);border-top:1px solid var(--line);padding:26px 30px;}
.obs-hdr{display:flex;align-items:center;gap:12px;margin-bottom:18px;}
.obs-ico{width:27px;height:27px;border:1px solid var(--gold);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;background:var(--gold-dim);flex-shrink:0;}
.obs-ttl{font-family:'Syne',sans-serif;font-size:9px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);}
.obs-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1px;background:var(--line);}
.ob{background:var(--cream);padding:18px;}
.ob.s2{grid-column:span 2;}
.ob-lbl{font-size:8px;letter-spacing:.15em;text-transform:uppercase;color:var(--gold);margin-bottom:10px;display:flex;align-items:center;gap:7px;}
.ob-lbl::after{content:'';flex:1;height:1px;background:var(--line);}
.n-line{display:block;width:100%;border:none;border-bottom:1px solid var(--line);height:28px;background:transparent;font-family:'Cormorant Garamond',serif;font-size:14px;color:var(--ink);outline:none;padding:0 2px;margin-bottom:2px;transition:border-color .18s;}
.n-line::placeholder{color:rgba(138,130,120,.32);font-style:italic;}
.n-line:focus{border-bottom-color:var(--gold);}
.r-area{width:100%;min-height:96px;background:transparent;border:none;outline:none;resize:vertical;font-family:'Cormorant Garamond',serif;font-size:14px;color:var(--ink);line-height:1.75;}
.r-area::placeholder{color:rgba(138,130,120,.38);font-style:italic;}
.mood-row{display:flex;gap:7px;flex-wrap:wrap;margin-top:4px;}
.mb{border:1px solid var(--line);background:transparent;padding:6px 10px;font-size:14px;cursor:pointer;transition:all .18s;border-radius:2px;}
.mb:hover,.mb.on{background:var(--gold-dim);border-color:var(--gold);transform:scale(1.1);}
.mood-txt{font-size:9px;color:var(--warm-gray);margin-top:8px;letter-spacing:.07em;min-height:13px;}

/* ══════════════════════════ STATS ═══════════════════════════════════ */
.stats{grid-column:1/-1;background:var(--ink);padding:20px 48px;display:flex;gap:34px;align-items:center;flex-wrap:wrap;}
.st{display:flex;flex-direction:column;gap:3px;}
.st-v{font-family:'Syne',sans-serif;font-size:24px;font-weight:800;color:var(--gold);line-height:1;}
.st-l{font-size:8px;letter-spacing:.2em;text-transform:uppercase;color:var(--warm-gray);}
.st-d{width:1px;height:30px;background:rgba(255,255,255,.07);}
.btn-reset{margin-left:auto;border:1px solid rgba(201,168,76,.3);background:transparent;color:var(--gold);padding:9px 17px;font-family:'DM Mono',monospace;font-size:9px;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;transition:all .2s;}
.btn-reset:hover{background:var(--gold-dim);border-color:var(--gold);}

/* ════════════════════════ CONGRATS ══════════════════════════════════ */
.cgov{display:none;position:fixed;inset:0;background:rgba(13,13,13,.88);z-index:200;align-items:center;justify-content:center;backdrop-filter:blur(4px);}
.cgov.on{display:flex;}
@keyframes up{from{opacity:0;transform:translateY(18px);}to{opacity:1;transform:translateY(0);}}
.cg{background:var(--cream);padding:50px;text-align:center;max-width:400px;border:1px solid var(--gold);animation:up .5s cubic-bezier(.4,0,.2,1);}
.cg-star{font-size:32px;margin-bottom:14px;}
.cg-title{font-family:'Cormorant Garamond',serif;font-size:36px;font-weight:300;line-height:1;margin-bottom:10px;}
.cg-title em{font-style:italic;color:var(--gold);}
.cg-sub{font-size:10px;letter-spacing:.13em;color:var(--warm-gray);text-transform:uppercase;margin-bottom:24px;}
.cg-close{border:1px solid var(--gold);background:transparent;color:var(--ink);padding:10px 24px;font-family:'DM Mono',monospace;font-size:9px;letter-spacing:.18em;text-transform:uppercase;cursor:pointer;transition:all .2s;}
.cg-close:hover{background:var(--ink);color:var(--gold);}

/* ════════════════════════ RESPONSIVE ════════════════════════════════ */
@media(max-width:768px){
  .grid{grid-template-columns:1fr;margin:0 16px;}
  .hdr,.hero,.prog-zone,.cal-wrap{padding-left:16px;padding-right:16px;}
  .lang-bar{padding:8px 16px;}
  .eve-wrap,.obs-grid{grid-template-columns:1fr;}
  .ob.s2{grid-column:span 1;}
  .stats{padding:16px 20px;gap:18px;}
  .quote{padding:22px 24px;}
  .obs{padding:20px 16px;}
}