@font-face {
  font-family: "IRANSansX";
  src: url("/fonts/IRANSansX-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IRANSansX";
  src: url("/fonts/IRANSansX-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;
  font-family: "IRANSansX", Tahoma, "Segoe UI", Arial, sans-serif;
  background: #fff;
  color: #303a34;
  font-synthesis: none;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
html { scroll-padding-top: calc(58px + env(safe-area-inset-top)); }
body { margin: 0; }
button, input { font: inherit; }
button { cursor: pointer; touch-action: manipulation; }
[hidden] { display: none !important; }

.shell { min-height: 100dvh; min-width: 0; display: flex; flex-direction: column; }

.login-card {
  width: min(420px, calc(100% - 36px));
  margin: auto;
  padding: 36px;
  border: 1px solid #e7eae6;
  border-radius: 14px;
  background: #fff;
}
.card-icon { display: block; width: 48px; height: 48px; margin-bottom: 18px; }
.login-card h1 { font-size: 23px; line-height: 1.5; margin: 0 0 7px; }
.login-card p { margin: 0 0 27px; color: #78837a; font-size: 14px; line-height: 1.8; }
.login-card label { display: block; font-size: 13px; font-weight: 700; margin-bottom: 9px; }
.login-card input { width: 100%; height: 44px; padding: 0 13px; border: 1px solid #d7ddd7; border-radius: 7px; outline: none; background: #fff; }
.login-card input:focus { border-color: #6a9979; box-shadow: 0 0 0 3px #e7f1e9; }
.primary-button { width: 100%; height: 44px; margin-top: 13px; border: 0; border-radius: 7px; background: #3b7450; color: #fff; font-weight: 700; }
.primary-button:hover { background: #2f6242; }
.login-card .error-message { margin: 14px 0 0; color: #b14b44; }

.note-screen { flex: 1; min-height: 100dvh; min-width: 0; width: 100%; display: flex; flex-direction: column; }
.tab-strip { display: flex; flex: 1; min-width: 0; align-items: center; height: 100%; gap: 4px; }
.tab-list { display: flex; gap: 3px; min-width: 0; max-width: calc(100% - 32px); overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; align-self: stretch; align-items: center; }
.tab-list::-webkit-scrollbar { display: none; }
.tab-item { display: flex; align-items: center; flex: none; max-width: 190px; min-width: 85px; height: 31px; border-radius: 6px 6px 2px 2px; border-bottom: 1.5px solid transparent; color: #758179; transition: background .15s, color .15s; }
.tab-item:hover { background: #f0f3f1; color: #465c4e; }
.tab-item.active { background: #edf3ef; border-bottom-color: #719880; color: #355640; }
.tab-button { min-width: 0; max-width: 155px; flex: 1; padding: 5px 10px 5px 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background: transparent; border: 0; color: inherit; text-align: start; font-size: 12px; line-height: 1.6; }
.tab-close { display: grid; place-items: center; width: 23px; height: 23px; padding: 0; flex: none; border: 0; border-radius: 4px; background: transparent; color: #708177; opacity: .4; transition: opacity .15s, background .15s; }
.tab-item:hover .tab-close, .tab-item:focus-within .tab-close { opacity: 1; }
.tab-close:hover { color: #a15c54; background: #f7eeeb; }
.add-tab-button { display: grid; place-items: center; width: 28px; height: 28px; flex: none; padding: 0; border: 0; border-radius: 6px; background: transparent; color: #708177; }
.add-tab-button:hover { background: #edf3ef; color: #3b7450; }
.tab-button:focus-visible, .tab-close:focus-visible, .add-tab-button:focus-visible { outline: 2px solid #86a892; outline-offset: -2px; }
.tab-button { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: pan-x; }
.toolbar {
  position: sticky;
  top: 0;
  z-index: 3;
  height: 42px;
  flex: none;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  border-bottom: 1px solid #e7ece8;
  background: #fcfdfc;
}
.toolbar-tools { display: flex; flex: none; align-items: center; gap: 2px; padding-inline: 5px; border-inline-start: 1px solid #e7ece8; }
.tool-button {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #526258;
  font-size: 17px;
  line-height: 1;
  padding: 0;
  transition: background .15s, color .15s;
}
.tool-button svg { width: 17px; height: 17px; }
.tool-button:hover, .tool-button:focus-visible { background: #edf3ef; color: #355640; outline: none; }
.tool-button:focus-visible, .menu-item:focus-visible { box-shadow: inset 0 0 0 1.5px #8aaf96; }
.menu-button[aria-expanded="true"] { background: #edf3ef; color: #355640; }
.bold-button { font-family: Arial, sans-serif; font-weight: 800; }
.save-status { display: inline-flex; align-items: center; gap: 5px; flex: 0 0 116px; width: 116px; color: #71887a; font-size: 10.5px; line-height: 1.6; white-space: nowrap; }
#save-status-label { overflow: hidden; text-overflow: ellipsis; }
.status-icon { display: none; width: 16px; height: 16px; flex: none; }
.save-status[data-state="saved"] { color: #3b7450; }
.save-status[data-state="saved"] .status-saved { display: block; }
.save-status[data-state="pending"] { color: #a38246; }
.save-status[data-state="pending"] .status-pending { display: block; }
.save-status[data-state="error"] { color: #b34a42; }
.save-status[data-state="error"] .status-error { display: block; }
.save-spinner { display: none; flex: none; width: 16px; height: 16px; border: 1.5px solid #c4d4c9; border-top-color: #3b7450; border-radius: 50%; }
.save-status[data-state="syncing"] .save-spinner { display: block; animation: save-spin .8s linear infinite; }
@keyframes save-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .save-status[data-state="syncing"] .save-spinner { animation-duration: 2.4s; } }
.actions-menu { position: relative; flex: none; }
.theme-check { color: #3b7450; opacity: 0; }
#theme-button[aria-checked="true"] .theme-check { opacity: 1; }
.actions-popup.tab-actions-popup { position: fixed; inset-inline-end: auto; width: min(206px, calc(100vw - 20px)); z-index: 6; }
.tab-actions-title { padding: 6px 10px 8px; color: #77847b; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-bottom: 1px solid #e8ede9; margin-bottom: 3px; }
#archive-list { max-height: min(360px, 60dvh); overflow-y: auto; }
.archive-empty { padding: 12px 10px; color: #77847b; font-size: 12px; }
.archive-restore .menu-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.actions-popup { position: absolute; top: calc(100% + 9px); inset-inline-end: 0; width: min(252px, calc(100vw - 20px)); max-height: calc(var(--viewport-height, 100dvh) - 70px - env(safe-area-inset-top)); overflow-y: auto; overscroll-behavior: contain; padding: 5px; border: 1px solid #e4eae5; border-radius: 9px; background: #fff; box-shadow: 0 8px 28px #28312c0e, 0 2px 6px #28312c06; }
.menu-item { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 38px; padding: 8px 10px; border: 0; border-radius: 5px; background: transparent; text-align: start; text-decoration: none; color: #46564c; font-size: 12px; line-height: 1.7; transition: background .15s; }
.menu-item:hover, .menu-item:focus-visible { background: #f1f5f2; outline: none; }
.menu-icon { flex: none; width: 17px; height: 17px; color: #829187; }
.menu-label { flex: 1; min-width: 0; }
.menu-shortcut { flex: none; color: #8c9890; font: 10px "Segoe UI", Arial, sans-serif; }
.menu-separator { height: 1px; margin: 4px 8px; background: #edf0ed; }
.menu-item.danger, .menu-item.danger .menu-icon { color: #a3655e; }
.menu-item.danger:hover, .menu-item.danger:focus-visible { background: #fbf2f0; }
.menu-item:disabled { opacity: .5; cursor: default; }
.sections { flex: 1; min-width: 0; max-width: 100%; padding: 6px clamp(18px, 3vw, 48px) 48px; }
.note-section { position: relative; border-bottom: 1px solid #e8ede9; padding: 16px 12px 20px; scroll-margin-top: 50px; }
.note-section::before { content: ""; position: absolute; inset-inline-start: 0; top: 18px; bottom: 20px; width: 2px; border-radius: 2px; background: transparent; transition: background .15s; }
.note-section:focus-within::before { background: #91b39c; }
.section-meta { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: flex-start; gap: 4px 20px; color: #77847b; font-size: 11.5px; line-height: 1.7; font-variant-numeric: tabular-nums; margin-bottom: 10px; padding-inline-end: 32px; }
.section-created, .section-updated { min-width: 0; overflow-wrap: anywhere; }
.draft-section .section-meta { justify-content: space-between; }
.section-delete { position: absolute; top: 13px; inset-inline-end: 8px; display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 5px; background: transparent; color: #89998d; opacity: 0; pointer-events: none; transition: opacity .15s, background .15s; }
.note-section:hover > .section-delete, .note-section:focus-within > .section-delete { opacity: 1; pointer-events: auto; }
.section-delete:hover, .section-delete:focus-visible { color: #a45a52; background: #fbf1ef; outline: none; }
@media (hover: none) { .section-delete { opacity: .7; pointer-events: auto; } }
.draft-section .section-created { color: #6f8e79; }
.draft-section .editor { min-height: 104px; }
.no-sections .draft-section .editor { min-height: calc(100dvh - 140px); }

.editor {
  width: 100%;
  min-height: 56px;
  padding: 0;
  outline: none;
  background: #fff;
  font-size: 17px;
  line-height: 1.85;
  caret-color: #3b7450;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
.editor:empty::before { content: attr(data-placeholder); color: #a1afa4; pointer-events: none; }
.editor .ProseMirror { position: relative; min-height: inherit; margin: 0; outline: none; white-space: pre-wrap; }
.editor .ProseMirror.is-empty::before { content: attr(data-placeholder); position: absolute; inset-inline-start: 0; color: #a1afa4; pointer-events: none; }
.editor .list-item-content { margin: 0; }
.editor li p { margin: 0; }
.tool-button[aria-pressed="true"] { color: #326444; background: #e4eee6; }
.editor p, .editor div { margin: 0 0 .3em; }
.editor ul, .editor ol { margin: .35em 0 .6em; padding-inline-start: 1.7em; }
.editor li::marker { color: #62776a; }
.editor ul { list-style-type: disc; }
.editor ol { list-style-type: decimal; }
.editor [data-list-style="disc"] { list-style-type: disc; }
.editor [data-list-style="circle"] { list-style-type: circle; }
.editor [data-list-style="square"] { list-style-type: square; }
.editor [data-list-style="decimal"] { list-style-type: decimal; }
.editor [data-list-style="lower-alpha"] { list-style-type: lower-alpha; }
.editor [data-list-style="upper-alpha"] { list-style-type: upper-alpha; }
.editor [data-list-style="lower-roman"] { list-style-type: lower-roman; }
.editor [data-list-style="upper-roman"] { list-style-type: upper-roman; }
.editor li { padding-inline-start: .15em; }
.editor ul[data-list-style="check"] { list-style: none; padding-inline-start: 0; }
.editor ul[data-list-style="check"] > li { position: relative; padding-inline-start: 1.75em; }
.check-toggle {
  position: absolute;
  inset-inline-start: 0;
  top: .36em;
  display: grid;
  place-items: center;
  width: 21px;
  height: 21px;
  padding: 0;
  border: 1.5px solid #9aaba0;
  border-radius: 5px;
  background: #fff;
  color: #fff;
  line-height: 1;
}
.check-toggle:hover, .check-toggle:focus-visible { border-color: #3b7450; outline: none; box-shadow: 0 0 0 3px #e4efe7; }
.editor li[data-checked="true"] > .check-toggle { border-color: #3b7450; background: #3b7450; }
.editor li[data-checked="true"] > .check-toggle::after { content: "✓"; font: 700 15px Arial, sans-serif; }
.editor h1, .editor h2, .editor h3 { line-height: 1.5; margin: .8em 0 .35em; }
.editor h1 { font-size: 1.65em; }
.editor h2 { font-size: 1.35em; }
.editor h3 { font-size: 1.15em; }
.editor blockquote { margin: .5em 0; padding-inline-start: 1em; border-inline-start: 2px solid #d8dfd8; color: #66736a; }

.undo-toast {
  position: fixed;
  z-index: 30;
  bottom: calc(18px + env(safe-area-inset-bottom) + var(--keyboard-inset, 0px));
  left: 50%;
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  width: min(440px, calc(100vw - 24px));
  min-height: 92px;
  padding: 16px 18px 18px;
  overflow: hidden;
  border: 1px solid #e8cc93;
  border-radius: 16px;
  background: #fff8e9;
  color: #60430d;
  box-shadow: 0 12px 36px #593b1126, 0 2px 8px #593b1112;
  font-size: 14px;
  animation: undo-appear .18s ease-out;
}
.undo-toast[hidden] { display: none; }
.undo-accessible { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@keyframes undo-appear { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }
.undo-toast::after { content: ""; position: absolute; bottom: 0; inset-inline-start: 0; width: 100%; height: 3px; background: #c28623; transform: scaleX(var(--undo-progress, 1)); transform-origin: right; }
.undo-icon { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid #efd39d; border-radius: 12px; background: #ffefcb; color: #a36b16; }
.undo-icon svg { width: 25px; height: 25px; }
.undo-copy { min-width: 0; }
#undo-message { display: block; font-weight: 700; line-height: 1.6; }
.undo-hint { display: flex; align-items: center; gap: 6px; margin: 5px 0 0; color: #8b6b36; font-size: 12px; line-height: 1.6; }
.undo-toast button { display: flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid #875811; border-radius: 10px; padding: 10px 12px; min-height: 44px; background: #875811; color: #fff; font-size: 13px; font-weight: 700; white-space: nowrap; }
.undo-toast button:hover { border-color: #70480c; background: #70480c; }
.undo-toast button:focus-visible { outline: 3px solid #b98129; outline-offset: 3px; }
#undo-countdown { display: grid; place-items: center; flex-shrink: 0; width: 24px; height: 24px; border-radius: 7px; background: #f8e9c9; color: #73521c; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }

@media (max-width: 640px) {
  .undo-toast { grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; padding: 14px 12px 16px; min-height: 90px; bottom: calc(12px + env(safe-area-inset-bottom) + var(--keyboard-inset, 0px)); }
  .undo-icon { width: 34px; height: 38px; border-radius: 10px; }
  .undo-icon svg { width: 22px; height: 22px; }
  .undo-toast button { gap: 5px; padding: 10px; font-size: 12px; }
  .undo-hint { font-size: 11px; gap: 5px; }
  .toolbar { height: calc(46px + env(safe-area-inset-top)); gap: 4px; padding: env(safe-area-inset-top) max(6px, env(safe-area-inset-right)) 0 max(6px, env(safe-area-inset-left)); }
  .toolbar-tools { gap: 0; padding-inline: 2px; }
  .tool-button { width: 32px; height: 40px; }
  .add-tab-button { width: 30px; height: 40px; }
  .tab-list { flex: 1; max-width: calc(100% - 34px); }
  .tab-item { height: 38px; min-width: 72px; max-width: min(150px, calc(100vw - 260px)); }
  .tab-button { height: 36px; padding: 5px 8px; font-size: 11px; }
  .save-status { flex-basis: 58px; width: 58px; font-size: 9px; gap: 3px; }
  #save-status-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .save-status::after { content: "ذخیره"; }
  .save-status[data-state="syncing"]::after { content: "سینک"; }
  .save-status[data-state="pending"]::after { content: "منتظر"; }
  .save-status[data-state="pending"][data-offline="true"]::after { content: "آفلاین"; }
  .save-status[data-state="error"]::after { content: "خطا"; }
  .sections { padding: 4px max(10px, env(safe-area-inset-right)) calc(36px + env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)); }
  .note-section { padding: 14px 8px 18px; scroll-margin-top: calc(58px + env(safe-area-inset-top)); }
  .section-meta { gap: 3px 12px; padding-inline-end: 40px; font-size: 11px; }
  .section-created, .section-updated { flex-basis: 100%; }
  .draft-section .section-updated { font-size: 10px; }
  .section-delete { top: 7px; inset-inline-end: 3px; width: 36px; height: 36px; }
  .editor { font-size: 16px; line-height: 1.9; }
  .draft-section .editor { min-height: 96px; }
  .no-sections .draft-section .editor { min-height: calc(100dvh - 155px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
  .menu-item { min-height: 44px; font-size: 13px; padding: 10px; }
  .actions-popup { width: min(274px, calc(100vw - 24px)); }
  .archive-restore .menu-shortcut { font-size: 11px; }
  .editor ul[data-list-style="check"] > li { min-height: 34px; padding-inline-start: 2em; }
  .check-toggle { width: 24px; height: 24px; }
  .check-toggle::before { content: ""; position: absolute; inset: -5px; }
  .login-card { padding: 26px 22px; width: min(420px, calc(100% - 28px)); }
  .login-card h1 { font-size: 21px; }
  .login-card input { font-size: 16px; height: 46px; }
  .primary-button { height: 46px; }
}
@media (max-width: 359px) {
  .tool-button { width: 30px; }
  .save-status { flex-basis: 52px; width: 52px; }
  .tab-item { min-width: 64px; }
}
@media (prefers-reduced-motion: reduce) {
  .undo-toast { animation: none; }
  .tab-item, .tab-close, .tool-button, .menu-item, .section-delete, .note-section::before { transition: none; }
}

/* Quiet writing surfaces with a clear active section. */
:root{--note-canvas:#f6f8f7;--note-surface:#fff;--note-line:#e1e7e3;--note-muted:#6c7b70;--note-focus:#98b5a1;--note-focus-ring:#719c8012;--note-accent:#3b7450}
.note-screen{background:var(--note-canvas)}
.sections{display:flex;flex-direction:column;gap:14px;padding:22px clamp(16px,3vw,48px) 64px}
.note-section{flex:none;background:var(--note-surface);border:1px solid var(--note-line);border-radius:16px;padding:20px 24px 24px;scroll-margin-top:66px;transition:border-color .16s,box-shadow .16s}
.note-section::before{display:none}
.note-section:focus-within{border-color:var(--note-focus);box-shadow:0 0 0 3px var(--note-focus-ring)}
.section-meta{align-items:center;gap:6px 18px;font-size:12px;color:var(--note-muted);margin-bottom:14px;min-height:32px;padding-inline-end:42px}
.section-delete{top:15px;inset-inline-end:16px;width:36px;height:36px;border-radius:9px;pointer-events:auto}
.section-delete:focus-visible{outline:2px solid var(--note-focus);outline-offset:2px}
.draft-section .section-created{font-weight:700}
.draft-section .section-updated{padding:3px 8px;border:1px solid var(--note-line);border-radius:6px;font-size:10px;color:var(--note-muted)}
.editor{background:transparent;line-height:1.95}
.draft-section .editor{min-height:112px}
.no-sections .draft-section .editor{min-height:max(160px,calc(var(--viewport-height,100dvh) - 220px))}
.sections:empty{display:none}
.sections-empty{display:none;flex:1;min-height:calc(var(--viewport-height,100dvh) - 70px);align-items:center;justify-content:center;flex-direction:column;gap:18px;padding:32px;color:var(--note-muted);text-align:center}
.sections:empty+.sections-empty{display:flex}
.sections-empty>svg{color:var(--note-accent);opacity:.65}
.sections-empty h2{font-size:18px;line-height:1.8;font-weight:500;margin:0}
.sections-empty button{font:inherit;font-size:14px;min-height:44px;padding:10px 22px;border:1px solid var(--note-line);border-radius:11px;background:var(--note-surface);color:var(--note-accent)}
.sections-empty button:hover{border-color:var(--note-focus)}
.sections-empty button:focus-visible{outline:2px solid var(--note-focus);outline-offset:3px}
@media(max-width:640px){
 .sections{padding:12px 10px max(32px,env(safe-area-inset-bottom));gap:12px}
 .note-section{padding:16px 14px 20px;border-radius:14px;scroll-margin-top:74px}
 .section-meta{font-size:11px;gap:6px 12px;padding-inline-end:38px;margin-bottom:12px;min-height:36px}
 .section-delete{top:12px;inset-inline-end:8px;width:44px;height:44px;opacity:.7}
 .draft-section .section-updated{font-size:9px;padding:3px 5px}
 .sections-empty{padding:28px 16px}
}
@media(prefers-reduced-motion:reduce){.note-section{transition:none}}