@font-face{font-family:Tajawal;src:url('/fonts/tajawal-400.woff2') format('woff2');font-weight:400;font-display:swap}@font-face{font-family:Tajawal;src:url('/fonts/tajawal-500.woff2') format('woff2');font-weight:500;font-display:swap}@font-face{font-family:Tajawal;src:url('/fonts/tajawal-700.woff2') format('woff2');font-weight:700;font-display:swap}@font-face{font-family:Tajawal;src:url('/fonts/tajawal-800.woff2') format('woff2');font-weight:800;font-display:swap}
:root{--ink:#172d50;--muted:#66758a;--yellow:#ffd45c;--paper:#fff;--blue:#eaf1fc;--pink:#fff0f1;--line:#dfe6ee;--background:#f5f8fc;font-family:Tajawal,system-ui,sans-serif;font-size:18px;color:var(--ink);background:var(--background)}*{box-sizing:border-box}body{margin:0;line-height:1.6}button,input,select,textarea{font:inherit}button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{opacity:.6;cursor:wait}a{color:inherit;text-decoration:none}button,input,select,textarea{color:var(--ink)}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #eaae18;outline-offset:4px}.hidden{display:none!important}.skip-link{position:fixed;top:-100px;right:20px;z-index:20;background:var(--ink);color:white;padding:12px 20px;border-radius:12px}.skip-link:focus{top:14px}.site-header{max-width:1300px;margin:auto;padding:18px 44px;display:flex;justify-content:space-between;align-items:center;gap:20px;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:8px}.brand img{width:76px;height:76px;object-fit:contain}.brand-name{display:block;font-size:2rem;line-height:1;font-weight:800}.brand-dot{color:#e3a816}.brand-caption{display:block;font-size:.78rem;color:var(--muted);margin-top:5px}.account{display:flex;align-items:center;gap:14px;font-size:.89rem}.account-name{font-weight:700}.account .avatar{width:38px;height:38px;font-size:1rem}.account-person{display:flex;align-items:center;gap:9px}.logout-button{background:none;border:0;color:var(--muted);padding:8px;min-height:44px}.logout-button:hover{color:var(--ink)}main{max-width:1220px;margin:0 auto;padding:36px 32px 64px}h1,h2,h3,p{margin-top:0}h1{font-weight:800;font-size:2.5rem;line-height:1.35;margin-bottom:12px;letter-spacing:-.025em}h2{font-size:1.3rem;line-height:1.5;font-weight:800;margin-bottom:10px}.muted{color:var(--muted)}.eyebrow{color:#67788f;font-size:.78rem;font-weight:700;display:block;margin-bottom:8px}.button{border:0;border-radius:13px;padding:11px 22px;font-weight:700;min-height:48px;display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:transform .15s,box-shadow .15s,background .15s}.button:hover{transform:translateY(-2px)}.primary{background:var(--ink);color:white;box-shadow:0 4px 0 #0e213e}.primary:hover{background:#234574;box-shadow:0 5px 0 #0e213e}.secondary{background:#edf2f9;color:#445671}.danger{background:#a83547;color:white}.wide{width:100%}.small-sticker{display:inline-block;background:var(--yellow);border:1px solid #e9bf43;border-radius:7px;padding:5px 12px;font-size:.83rem;font-weight:700;transform:rotate(3deg);margin-bottom:16px}.auth-layout{display:grid;grid-template-columns:1.15fr 1fr;gap:80px;align-items:center;max-width:1040px;margin:40px auto}.auth-story h1{font-size:3.05rem;line-height:1.4;letter-spacing:-.02em}.sun-dot{color:#df9f00}.auth-story>p{font-size:1.02rem;color:#576b89;line-height:1.9;margin-bottom:12px}.auth-mascot{display:block;object-fit:contain;width:240px;height:240px;margin:0 14px 12px}.story-pills{display:flex;gap:10px;flex-wrap:wrap}.story-pills span{padding:7px 12px;border-radius:8px;background:#e8effa;font-size:.78rem;font-weight:500}.auth-card{background:white;border:1px solid #d8e2f0;border-radius:24px;padding:36px;box-shadow:8px 8px 0 #e6edf8}.auth-card h2{font-size:1.65rem;margin-bottom:4px}.auth-card>p{font-size:.94rem;margin-bottom:18px}.privacy-line{display:flex;align-items:center;gap:8px;border-top:1px dashed var(--line);padding-top:18px;margin-top:24px;font-size:.78rem;color:#6c7990}.loading-state{padding:110px 20px;text-align:center;color:var(--muted)}.loading-star{font-size:3rem;color:#b78204;animation:twinkle 1.4s ease-in-out infinite}.center-state{max-width:520px;text-align:center;margin:80px auto;padding:36px;background:white;border:1px solid var(--line);border-radius:22px}.center-state h1{font-size:1.7rem}.state-icon{font-size:3rem;color:#657fab}.workspace-heading{display:flex;align-items:center;justify-content:space-between;gap:24px;margin:7px 0 22px}.workspace-heading h1{font-size:2.1rem;margin-bottom:4px}.workspace-heading p{margin-bottom:0;font-size:.95rem}.workspace-heading .primary span{font-size:1.4rem;line-height:1}.view-tabs{display:flex;border-bottom:1px solid var(--line);gap:24px;margin-bottom:28px;overflow-x:auto}.view-tab{white-space:nowrap;border:0;border-bottom:3px solid transparent;background:transparent;font-size:.95rem;font-weight:700;display:flex;align-items:center;gap:8px;padding:15px 2px 16px;color:#697a92}.view-tab.active{border-color:var(--ink);color:var(--ink)}.tab-label{font-size:.67rem;border-radius:5px;background:#e8eefa;padding:2px 7px;color:#667899}.workspace-grid{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:28px}.filter-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:20px}.filters{display:flex;gap:7px}.filter{padding:7px 17px;border-radius:10px;background:white;border:1px solid #dce4ef;font-size:.88rem;color:#667a93;min-height:43px}.filter.active{background:#e7eefb;border-color:#bfcee8;color:#21406c;font-weight:700}.entry-count{font-size:.78rem;color:#71829a}.entry-card{border:1px solid #dbe4ef;background:white;border-radius:18px;padding:22px;margin-bottom:20px;position:relative;box-shadow:0 4px 0 #e9eef6;animation:arrive .25s ease-out}.entry-card.good{border-top:4px solid #f3c754}.entry-card.bad{border-top:4px solid #b5c7e7}.entry-top{display:flex;justify-content:space-between;gap:12px;align-items:center}.entry-person{display:flex;align-items:center;gap:11px}.avatar{width:42px;height:42px;border-radius:14px;display:inline-grid;place-items:center;font-weight:800;font-size:1.1rem;flex-shrink:0}.avatar.mulham{background:#e4edff;color:#35568e;transform:rotate(-4deg)}.avatar.raneem{background:#fff0c4;color:#765412;transform:rotate(4deg)}.entry-person strong{font-size:.95rem;line-height:1.4;display:block}.entry-date{color:#7b899e;font-size:.74rem;line-height:1.4;display:block;margin-top:3px}.kind-badge{font-size:.74rem;background:#fff3c9;color:#705308;padding:5px 10px;border-radius:8px;white-space:nowrap;transform:rotate(-2deg)}.bad .kind-badge{background:#edf2fc;color:#546b93;transform:rotate(2deg)}.entry-text{margin:22px 0 14px;font-size:1.07rem;line-height:1.85;white-space:pre-wrap;overflow-wrap:anywhere}.entry-details{display:flex;justify-content:space-between;align-items:center;gap:12px}.entry-stars{direction:ltr;letter-spacing:3px;line-height:1.3;font-size:1.15rem;color:#a77808;white-space:nowrap}.entry-by{font-size:.72rem;color:#7c879c}.entry-footer{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;border-top:1px dashed #dee5ee;margin-top:17px;padding-top:16px}.reaction-buttons{display:flex;gap:6px;flex-wrap:wrap}.reaction{border:1px solid #e0e6ef;background:#f7f9fd;border-radius:10px;min-width:39px;min-height:39px;padding:5px 8px;font-size:1rem;line-height:1;transition:transform .15s,background .15s}.reaction:hover{transform:rotate(-7deg);background:#fff3d0}.reaction.selected{border-color:#d2ad4f;background:#fff0b9}.reaction-count{font-family:Tajawal,sans-serif;font-size:.72rem;margin-right:3px}.entry-actions{display:flex;gap:12px}.text-button{border:0;background:transparent;padding:6px 2px;font-size:.78rem;color:#627693;min-height:36px}.text-button:hover{color:var(--ink)}.reply-list{margin-top:17px;border-top:1px solid #edf1f6;padding-top:12px;display:grid;gap:10px}.reply-item{background:#f5f8fd;padding:11px 14px;border-radius:10px;font-size:.88rem}.reply-item p{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.8;margin-bottom:0}.reply-meta{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:.72rem;margin-bottom:4px}.reply-meta strong{color:#52698b}.reply-meta .text-button{min-height:28px;padding:0}.side-card{border:1px solid #dce4f0;border-radius:17px;padding:24px;background:white;margin-bottom:20px}.side-card h2{font-size:1.1rem;line-height:1.6}.people-card .eyebrow{font-size:.73rem}.person{display:flex;align-items:center;gap:12px;margin-top:19px}.person strong{font-size:.9rem}.person p{margin:0;font-size:.72rem;color:#7988a0}.kindness-card{background:#fff3c9;border-color:#ebdcae;transform:rotate(-1deg);position:relative;padding-top:27px}.kindness-card h2{margin-bottom:12px}.kindness-card p{font-size:.9rem;color:#665629;line-height:1.9;margin-bottom:13px}.kindness-card .kindness-foot{font-size:.85rem;margin-bottom:0}.kindness-symbol{position:absolute;top:20px;left:20px;font-size:1.8rem;color:#95700c}.dashed-line{border-top:1px dashed #d4c48f;margin:14px 0}.sidebar-foot{font-size:.74rem;color:#8390a4;line-height:1.8;text-align:center;padding:0 20px}.empty-state{text-align:center;padding:48px 24px;border:2px dashed #d4dfee;border-radius:18px;background:#ffffff70}.empty-star{font-size:3.4rem;line-height:1.1;margin-bottom:16px;color:#bf8b12}.empty-state h2{font-size:1.4rem}.empty-state p{font-size:.95rem;color:#6f7e94;max-width:380px;margin:0 auto 22px;line-height:1.8}.private-banner{display:flex;align-items:flex-start;gap:14px;background:#e8effb;border:1px solid #d5e1f4;border-radius:13px;padding:15px 20px;margin-bottom:22px}.private-banner>span{font-size:1.8rem;line-height:1.3}.private-banner strong{font-size:.95rem}.private-banner p{font-size:.83rem;color:#5d7293;margin:2px 0 0}.note-card{border:1px solid #eedca0;border-radius:15px;background:#fff9e4;padding:24px;margin-bottom:20px;box-shadow:0 4px 0 #efe8cd}.note-card p{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.9;font-size:1rem;margin-bottom:20px}.note-footer{display:flex;justify-content:space-between;align-items:center;gap:14px;border-top:1px dashed #e6d9b5;padding-top:12px}.note-footer time{font-size:.76rem;color:#8a7951}.note-footer .entry-actions .text-button{color:#706647}.note-delete{color:#96514d!important}dialog{border:1px solid #dbe4f0;border-radius:23px;padding:29px;max-width:550px;width:calc(100% - 32px);color:var(--ink);box-shadow:0 20px 80px #10244130;max-height:90dvh;overflow-y:auto}dialog::backdrop{background:#172d5085;backdrop-filter:blur(3px)}.dialog-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:20px}.dialog-heading h2{font-size:1.5rem;margin-bottom:0}.dialog-heading .eyebrow{font-size:.72rem}.icon-button{border:0;background:#f0f4fa;border-radius:50%;width:36px;height:36px;font-size:1.4rem;display:grid;place-items:center;line-height:1;flex-shrink:0}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}label,legend{display:block;font-size:.85rem;font-weight:700;margin:14px 0 7px}input,select,textarea{width:100%;background:#fff;border:1px solid #cfdbea;border-radius:11px;padding:11px 13px;font-size:.95rem;line-height:1.55;min-height:47px}input[type=date]{text-align:right;min-width:0}select{cursor:pointer}textarea{resize:vertical}.field-hint{font-size:.76rem;line-height:1.7;color:#7a899e;margin:9px 0 0}.kind-picker{padding:0;border:0;display:flex;gap:10px;margin:14px 0}.kind-picker legend{margin:0 0 9px}.kind-option{flex:1;border:1px solid #dce4ef;border-radius:11px;padding:9px 12px;font-weight:500;font-size:.86rem;cursor:pointer;display:flex;align-items:center;gap:8px;margin:0}.kind-option:has(input:checked){background:#fff4ce;border-color:#d9b953}.kind-option.bad:has(input:checked){background:#edf2fd;border-color:#acbfdf}.kind-option input{width:16px;height:16px;min-height:0;margin:0;accent-color:#263f66}.star-field{border:0;padding:0;margin:14px 0 0}.star-field legend{margin:0 0 4px}.rating{display:flex;direction:ltr;justify-content:flex-end;gap:2px}.rating button{font-size:2.05rem;line-height:1;border:0;background:transparent;color:#c18c18;padding:8px;min-width:44px;min-height:48px}.rating button:hover{transform:scale(1.12)}.dialog-actions{display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap;margin-top:22px}.error-message{font-size:.82rem;color:#a23845;line-height:1.7;margin:10px 0;min-height:0}.error-message:empty{display:none}blockquote{margin:0 0 15px;padding:14px 16px;border-right:3px solid #efc760;background:#fff9e8;border-radius:7px;color:#70613c;font-size:.88rem;max-height:130px;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere}.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--ink);color:white;padding:13px 23px;border-radius:13px;font-size:.9rem;z-index:30;box-shadow:0 8px 25px #172d5030;max-width:calc(100% - 32px);text-align:center}
@keyframes twinkle{50%{transform:rotate(15deg) scale(.85);opacity:.65}}@keyframes arrive{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:1000px){.auth-layout{gap:40px}.auth-story h1{font-size:2.5rem}.workspace-grid{grid-template-columns:minmax(0,1fr) 255px;gap:20px}.side-card{padding:20px}}@media(max-width:760px){:root{font-size:17px}.site-header{padding:12px 20px}.brand img{width:58px;height:58px}.brand-name{font-size:1.65rem}.brand-caption{font-size:.71rem}.account{gap:6px}.account-person{gap:5px}.account .avatar{display:none}main{padding:26px 20px 48px}.auth-layout{grid-template-columns:1fr;gap:28px;margin:8px auto;max-width:440px}.auth-story{text-align:center}.auth-story h1{font-size:2.25rem}.auth-story>p{font-size:.97rem}.auth-mascot{width:135px;height:135px;margin:0 auto}.story-pills{display:none}.auth-card{padding:26px;border-radius:20px;box-shadow:5px 5px 0 #e6edf8}.auth-card h2{font-size:1.5rem}.workspace-heading{align-items:flex-start;gap:12px}.workspace-heading h1{font-size:1.8rem}.workspace-heading p{font-size:.88rem}.workspace-heading .primary{padding:11px 14px;font-size:.85rem;white-space:nowrap;min-height:46px;margin-top:18px}.workspace-heading .eyebrow{font-size:.71rem}.view-tabs{gap:16px;margin-bottom:20px}.view-tab{font-size:.87rem;padding:12px 0}.tab-label{display:none}.workspace-grid{grid-template-columns:1fr}.sidebar{display:none}.entry-card{padding:18px}.entry-text{font-size:1.05rem}.entry-footer{gap:10px}.reaction{min-width:38px;min-height:40px}.entry-details{align-items:flex-start}.entry-by{font-size:.72rem}.kind-badge{font-size:.72rem}.empty-state{padding:42px 20px}.empty-state p{font-size:.93rem}.form-row{grid-template-columns:1fr 1fr;gap:12px}dialog{padding:24px}.dialog-heading h2{font-size:1.35rem}.rating button{font-size:1.9rem}.dialog-actions .button{padding:10px 16px}.note-card{padding:20px}.private-banner{padding:14px}.private-banner p{font-size:.79rem}}@media(max-width:380px){main{padding-right:14px;padding-left:14px}.site-header{padding-right:14px;padding-left:14px}.account-name{font-size:.8rem}.logout-button{font-size:.73rem;padding:7px}.form-row{grid-template-columns:1fr}.workspace-heading{flex-wrap:wrap}.workspace-heading .primary{margin-top:0}.entry-top{flex-wrap:wrap}.kind-picker{flex-direction:column}.reaction-buttons{gap:4px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.brand-caption{font-size:.88rem;font-weight:700;max-width:55px;line-height:1.7}.date-selects{display:grid;grid-template-columns:50px minmax(80px,1fr) 70px;gap:5px}.date-selects select{font-size:.81rem;padding:10px 4px}.form-row{grid-template-columns:1fr 1.3fr}.entry-card{animation:none}@media(max-width:760px){.form-row{grid-template-columns:1fr}.date-selects{grid-template-columns:65px minmax(90px,1fr) 85px}.date-selects select{font-size:.9rem;padding:10px 8px}.brand-caption{font-size:.8rem;max-width:50px}.brand img{width:68px;height:68px}}

/* التعليقات المشتركة على كل موقف */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.content-column,
.comment-body,
.entry-person > div {
  min-width: 0;
}
.comments-section {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  scroll-margin-top: 100px;
}
.comments-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 14px;
  margin-bottom: 14px;
}
.comments-heading h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 1rem;
  line-height: 1.5;
}
.comment-total {
  display: inline-grid;
  place-items: center;
  min-width: 26px;
  height: 26px;
  padding: 0 7px;
  border-radius: 8px;
  background: var(--blue);
  color: #52698d;
  font-size: .8rem;
  font-weight: 500;
}
.comments-hint,
.comments-empty,
.comment-length {
  color: #6b7c94;
  font-size: .8rem;
  line-height: 1.7;
}
.comments-empty {
  padding: 12px 14px;
  border-radius: 11px;
  background: #f5f8fd;
  margin-bottom: 14px;
}
.comment-list {
  display: grid;
  gap: 12px;
}
.comment-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 13px;
  border-radius: 12px;
  background: #f5f8fd;
}
.comment-avatar {
  width: 30px;
  height: 30px;
  border-radius: 10px;
  font-size: .9rem;
  margin-top: 6px;
}
.comment-body {
  flex: 1;
}
.comment-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  margin-top: -5px;
}
.comment-meta strong {
  font-size: .86rem;
  color: #52698b;
}
.comment-text {
  margin: 0 0 5px;
  font-size: .95rem;
  line-height: 1.85;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.comment-time {
  display: block;
  font-size: .8rem;
  color: #748298;
  line-height: 1.7;
}
.comment-edit {
  margin-left: -4px;
}
.comment-form {
  margin-top: 16px;
}
.comment-input {
  display: block;
  min-height: 88px;
  max-height: 176px;
  font-size: max(16px, .95rem);
  background: #fff;
  line-height: 1.7;
  resize: vertical;
  scroll-margin-bottom: 160px;
}
.comment-compose-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 10px;
}
.comment-length {
  max-width: 190px;
  font-size: .8rem;
}
.comment-length [data-comment-count] {
  display: inline-block;
}
.comment-submit {
  background: #fff1bd;
  border: 1px solid #e5c665;
  color: #665012;
  padding: 9px 17px;
  font-size: .88rem;
}
.comment-submit:hover {
  background: #ffe595;
}
.text-button,
.logout-button,
.filter,
.reaction {
  min-height: 44px;
  min-width: 44px;
}
.text-button {
  padding: 7px 6px;
  font-size: max(14px, .78rem);
}
.icon-button {
  min-width: 44px;
  min-height: 44px;
  width: 44px;
  height: 44px;
}
button,
select,
a {
  touch-action: manipulation;
}
.modal-open {
  overflow: hidden;
}
fieldset {
  min-width: 0;
}
legend {
  max-width: 100%;
  white-space: normal;
}

/* استخدام الهاتف بيد واحدة، مع مراعاة الحواف ولوحة المفاتيح */
@media (max-width: 900px) {
  :root {
    font-size: 18px;
  }
  html {
    -webkit-text-size-adjust: 100%;
    scroll-padding-top: 95px;
  }
  .site-header {
    position: sticky;
    top: 0;
    z-index: 20;
    padding: calc(8px + env(safe-area-inset-top)) 16px 8px;
    padding-right: max(16px, env(safe-area-inset-right));
    padding-left: max(16px, env(safe-area-inset-left));
    background: var(--background);
    gap: 12px;
  }
  .brand {
    gap: 6px;
  }
  .brand img {
    width: 55px;
    height: 55px;
  }
  .brand-caption {
    font-size: max(14px, .8rem);
    max-width: 55px;
  }
  .account-name,
  .logout-button {
    font-size: max(14px, .85rem);
  }
  main {
    padding: 22px 16px 36px;
    padding-right: max(16px, env(safe-area-inset-right));
    padding-left: max(16px, env(safe-area-inset-left));
  }
  body:has(#workspace:not(.hidden)) main {
    padding-bottom: calc(var(--mobile-nav-height, 84px) + 28px);
  }
  .auth-layout {
    display: flex;
    flex-direction: column;
    gap: 26px;
    margin: 4px auto;
  }
  .auth-card {
    order: 0;
    padding: 23px;
    width: 100%;
  }
  .auth-story {
    order: 1;
  }
  .auth-story h1 {
    font-size: 1.55rem;
    margin-bottom: 10px;
  }
  .auth-story h1 br {
    display: none;
  }
  .auth-story > p {
    font-size: .92rem;
  }
  .auth-mascot {
    width: 110px;
    height: 110px;
  }
  .workspace-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .sidebar {
    display: none;
  }
  .workspace-heading {
    display: block;
    margin: 0 0 22px;
  }
  .workspace-heading h1 {
    font-size: 1.8rem;
  }
  .workspace-heading .eyebrow,
  .eyebrow {
    font-size: max(14px, .78rem);
  }
  .view-tabs #add {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    padding: 6px 2px;
    min-width: 0;
    min-height: 58px;
    margin: 0;
    background: transparent;
    color: var(--ink);
    border: 0;
    border-radius: 12px;
    font-size: max(14px, .82rem);
    line-height: 1.6;
    box-shadow: none;
  }
  .view-tabs #add:hover {
    transform: none;
    box-shadow: none;
  }
  .view-tabs #add .add-icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 34px;
    border-radius: 11px;
    font-size: 1.5rem;
    line-height: 1;
    background: var(--yellow);
    color: var(--ink);
  }
  .view-tabs #add .add-label {
    text-align: center;
  }
  .view-tabs {
    position: fixed;
    z-index: 30;
    right: 0;
    left: 0;
    bottom: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin: 0;
    padding: 8px max(12px, env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
    background: #fff;
    border: 0;
    border-top: 1px solid #dbe4f0;
    box-shadow: 0 -3px 20px #172d5007;
    overflow: visible;
  }
  .view-tab {
    flex: 1;
    min-width: 0;
    min-height: 58px;
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 8px 5px;
    border: 0;
    border-radius: 12px;
    font-size: max(14px, .82rem);
    line-height: 1.6;
    white-space: normal;
    text-align: center;
  }
  .view-tab > span:first-child {
    font-size: 1.15rem;
    line-height: 1.3;
  }
  .view-tab.active {
    border: 0;
    background: #eaf1fc;
    color: #274c7c;
  }
  .filter-bar {
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 18px;
  }
  .filter {
    padding: 8px 19px;
    font-size: .9rem;
  }
  .entry-count {
    font-size: max(14px, .8rem);
  }
  .entry-card {
    padding: 18px 16px;
    margin-bottom: 24px;
    border-radius: 18px;
  }
  .entry-top {
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .entry-date,
  .entry-by,
  .kind-badge {
    font-size: max(14px, .8rem);
  }
  .entry-text {
    margin: 18px 0 14px;
    font-size: 1.05rem;
  }
  .entry-details {
    flex-wrap: wrap;
    gap: 9px;
  }
  .entry-footer {
    display: block;
    padding-top: 14px;
  }
  .reaction-buttons {
    display: grid;
    grid-template-columns: repeat(6, minmax(44px, 1fr));
    gap: 5px;
  }
  .reaction {
    min-height: 46px;
    padding: 7px 3px;
    font-size: 1.05rem;
  }
  .entry-footer > .entry-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 10px;
  }
  .entry-footer > .entry-actions .text-button {
    background: #f3f6fb;
    border-radius: 10px;
    padding: 8px 5px;
    font-size: max(14px, .84rem);
  }
  .comments-section {
    margin-top: 18px;
    padding-top: 18px;
  }
  .comments-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
  }
  .comments-hint,
  .comments-empty,
  .comment-time,
  .comment-length {
    font-size: max(14px, .8rem);
  }
  .comment-item {
    padding: 11px;
    gap: 8px;
  }
  .comment-text {
    font-size: .96rem;
  }
  .comment-compose-footer {
    gap: 8px;
    align-items: flex-start;
  }
  .comment-length {
    flex: 1;
    min-width: 95px;
    padding-top: 6px;
  }
  .comment-submit {
    padding: 10px 14px;
    min-height: 48px;
    font-size: max(16px, .9rem);
  }
  input,
  select,
  textarea {
    font-size: max(16px, 1rem);
    min-height: 50px;
    scroll-margin-top: 100px;
  }
  .date-selects {
    grid-template-columns: minmax(54px, .7fr) minmax(86px, 1.3fr) minmax(78px, 1fr);
  }
  .date-selects select {
    font-size: max(16px, .9rem);
    padding: 11px 7px;
  }
  label,
  legend {
    font-size: .93rem;
  }
  .field-hint,
  .error-message,
  .privacy-line,
  .private-banner p {
    font-size: max(14px, .8rem);
  }
  .kind-option {
    min-height: 50px;
    font-size: .94rem;
  }
  .rating {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    width: 100%;
    gap: 2px;
  }
  .rating button {
    min-width: 0;
    width: 100%;
    padding: 8px 4px;
    font-size: clamp(30px, 8vw, 42px);
  }
  dialog {
    position: fixed;
    inset: auto 0 var(--sheet-bottom, 0px);
    width: 100%;
    max-width: 600px;
    max-height: calc(var(--visible-height, 100dvh) - 12px);
    margin: 0 auto;
    padding: 0;
    border: 0;
    border-radius: 24px 24px 0 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  dialog > form {
    padding: 0 max(18px, env(safe-area-inset-right)) 0 max(18px, env(safe-area-inset-left));
  }
  .dialog-heading {
    position: sticky;
    top: 0;
    z-index: 2;
    align-items: center;
    margin: 0 -3px 15px;
    padding: 20px 3px 10px;
    background: #fff;
    border-bottom: 1px solid #edf1f6;
  }
  .dialog-heading h2 {
    font-size: 1.3rem;
  }
  .dialog-heading .eyebrow {
    font-size: max(14px, .8rem);
  }
  .dialog-actions {
    position: sticky;
    bottom: 0;
    z-index: 2;
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
    margin: 20px -18px 0;
    padding: 14px 18px calc(16px + env(safe-area-inset-bottom));
    background: white;
    border-top: 1px solid #e5ebf4;
  }
  .dialog-actions .button {
    flex: 1;
    min-width: 0;
    padding: 12px 8px;
    min-height: 52px;
    font-size: max(16px, .9rem);
  }
  #deleteDialog > form {
    padding-top: 24px;
  }
  .note-footer {
    flex-wrap: wrap;
  }
  .note-footer time {
    font-size: max(14px, .8rem);
  }
  .toast {
    bottom: calc(var(--mobile-nav-height, 84px) + 16px);
    padding: 12px 17px;
    font-size: .9rem;
    width: max-content;
    max-width: calc(100% - 32px);
  }
  .keyboard-open .view-tabs,
  .keyboard-open #add {
    visibility: hidden;
  }
  .keyboard-open .toast {
    bottom: calc(var(--sheet-bottom, 0px) + 14px);
  }
}
@media (max-width: 360px) {
  .reaction-buttons {
    grid-template-columns: repeat(3, minmax(44px, 1fr));
  }
  .filter-bar {
    flex-direction: column;
    align-items: flex-start;
  }
  .comments-heading h3 {
    font-size: .96rem;
  }
  .comment-compose-footer {
    align-items: stretch;
  }
  .comment-submit {
    flex: 1;
  }
}
@media (hover: none) {
  .button:hover,
  .reaction:hover {
    transform: none;
  }
}
@media (max-width: 900px) and (max-height: 500px) {
  .site-header {
    position: static;
  }
  .view-tabs {
    padding-top: 4px;
    padding-bottom: calc(4px + env(safe-area-inset-bottom));
  }
  .view-tab {
    min-height: 44px;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding-top: 4px;
    padding-bottom: 4px;
  }
  .view-tabs #add {
    flex-direction: row;
    align-items: center;
    gap: 5px;
    min-height: 44px;
  }
  .view-tabs #add .add-icon {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
  }
}