@import url("../sheets/fonts/fonts.css");
:root {
  --bg: #fff9f8;
  --panel: #fff;
  --soft: #f9e8ed;
  --ink: #422d39;
  --muted: #795e6b;
  --line: #ead7df;
  --accent: #a54468;
  --shadow: 0 12px 45px #69243a0a;
  color-scheme: light;
}
[data-theme="dark"] {
  --bg: #211b24;
  --panel: #2d2531;
  --soft: #3c2c3b;
  --ink: #faeaf1;
  --muted: #ccb7c6;
  --line: #554152;
  --accent: #ed9cbd;
  --shadow: none;
  color-scheme: dark;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font:
    14px/1.75 "Be Vietnam Pro",
    sans-serif;
}
button,
input,
textarea,
select {
  font: inherit;
}
a {
  color: inherit;
}
button,
a,
input,
select,
textarea {
  touch-action: manipulation;
}
button,
a.btn {
  cursor: pointer;
}
button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
[hidden] {
  display: none !important;
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}
header.top {
  height: 84px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 5%;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
  gap: 16px;
}
.brand {
  font-size: 25px;
  letter-spacing: 3px;
  text-decoration: none;
  font-weight: 700;
}
.brand small {
  font-size: 9px;
  display: block;
  letter-spacing: 2px;
  line-height: 1.5;
}
nav,
.actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}
.btn,
button {
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink);
  padding: 10px 16px;
  border-radius: 12px;
  min-height: 44px;
  text-decoration: none;
  transition:
    transform 0.15s,
    box-shadow 0.15s;
}
.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg);
}
button:hover,
.btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}
button:active,
.btn:active {
  transform: translateY(0);
}
.quiet {
  border: 0;
  background: transparent;
}
.danger {
  color: #b63855;
}
.eyebrow {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 2px;
  color: var(--accent);
}
h1 {
  font-size: clamp(28px, 4vw, 45px);
  line-height: 1.45;
  font-weight: 600;
  letter-spacing: -1px;
  margin: 12px 0;
}
h2 {
  font-size: 23px;
  line-height: 1.6;
}
h3 {
  font-size: 16px;
}
.muted,
small {
  color: var(--muted);
}
.layout {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  max-width: 1500px;
  margin: auto;
  min-height: calc(100vh - 84px);
}
.sidebar {
  padding: 32px 20px;
  border-right: 1px solid var(--line);
}
.sidebar nav {
  display: grid;
  gap: 8px;
}
.sidebar button {
  text-align: left;
  border: 0;
  background: transparent;
}
.sidebar button.active {
  background: var(--soft);
  color: var(--accent);
  font-weight: 600;
}
.sidebar .label {
  font-size: 10px;
  letter-spacing: 2px;
  margin: 24px 12px 12px;
}
.workspace {
  padding: 36px 5%;
  min-width: 0;
}
.welcome {
  padding: 30px;
  border: 1px solid var(--line);
  background: linear-gradient(110deg, var(--soft), var(--panel));
  border-radius: 24px;
  position: relative;
  overflow: hidden;
}
.welcome p {
  max-width: 630px;
}
.welcome::after {
  content: "✧";
  position: absolute;
  right: 5%;
  top: 10px;
  font-size: 150px;
  opacity: 0.1;
  pointer-events: none;
}
.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 24px 0;
}
.stat,
.card,
.panel {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--panel);
  padding: 22px;
  box-shadow: var(--shadow);
}
.stat b {
  font-size: 27px;
  display: block;
}
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(245px, 1fr));
  gap: 18px;
}
.card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: transform 0.2s;
  overflow: hidden;
}
.card:hover {
  transform: translateY(-3px);
}
.card h3 {
  margin: 0;
  overflow-wrap: anywhere;
}
.card p {
  margin: 0;
  color: var(--muted);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.card .actions {
  margin-top: auto;
}
.toolbar {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin: 24px 0;
}
.toolbar input {
  flex: 1;
  min-width: 180px;
}
.section-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin: 26px 0 12px;
}
.section-head h2 {
  margin: 0;
}
label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  margin: 14px 0 7px;
}
input,
textarea,
select {
  width: 100%;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink);
  padding: 12px;
  border-radius: 10px;
  min-width: 0;
}
textarea {
  resize: vertical;
  line-height: 1.8;
}
.two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.auth {
  max-width: 500px;
  margin: 60px auto;
  padding: 32px;
}
.locked {
  max-width: 780px;
  text-align: center;
  margin: 75px auto;
  padding: 25px;
}
.locked .actions {
  justify-content: center;
  margin-top: 25px;
}
.lock-art {
  font-size: 78px;
  color: var(--accent);
}
.pill {
  font-size: 10px;
  border-radius: 20px;
  padding: 4px 10px;
  background: var(--soft);
  color: var(--accent);
  align-self: flex-start;
}
.empty {
  text-align: center;
  padding: 45px 20px;
  border: 1px dashed var(--line);
  border-radius: 18px;
  color: var(--muted);
  grid-column: 1/-1;
}
.error {
  color: #b63855;
  white-space: pre-wrap;
}
.notice {
  background: var(--soft);
  border-radius: 12px;
  padding: 16px;
}
.editor {
  max-width: 900px;
}
.editor textarea#body {
  min-height: 350px;
}
.editor-bar {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  position: sticky;
  top: 0;
  background: var(--bg);
  padding: 12px 0;
  z-index: 2;
}
.file {
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.file audio,
.file video,
.file img,
.file iframe {
  max-width: 100%;
  display: block;
  margin: 12px 0;
}
.file iframe {
  width: 100%;
  height: 420px;
  border: 0;
}
.file small {
  overflow-wrap: anywhere;
}
.row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.row > div {
  min-width: 0;
  overflow-wrap: anywhere;
}
dialog {
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink);
  border-radius: 22px;
  width: min(650px, 94vw);
  max-height: 85vh;
  padding: 28px;
}
dialog::backdrop {
  background: #20121e80;
}
dialog[open] {
  animation: appear 0.2s ease;
}
progress {
  width: 100%;
  accent-color: var(--accent);
}
#toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  background: var(--ink);
  color: var(--bg);
  padding: 13px 22px;
  border-radius: 14px;
  max-width: 90vw;
}
.skeleton {
  height: 140px;
  border-radius: 18px;
  background: var(--soft);
  animation: pulse 1s infinite alternate;
}
.foot {
  padding: 24px 5%;
  border-top: 1px solid var(--line);
  font-size: 12px;
  color: var(--muted);
}
@keyframes pulse {
  to {
    opacity: 0.4;
  }
}
@keyframes appear {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}
@media (max-width: 800px) {
  header.top {
    padding: 14px 18px;
    height: auto;
    align-items: flex-start;
  }
  header.top nav {
    gap: 6px;
  }
  header.top .btn {
    font-size: 11px;
    padding: 8px;
  }
  .brand {
    font-size: 20px;
  }
  .layout {
    display: block;
  }
  .sidebar {
    padding: 12px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .sidebar nav {
    display: flex;
    overflow: auto;
    flex-wrap: nowrap;
  }
  .sidebar button {
    white-space: nowrap;
  }
  .sidebar .label {
    display: none;
  }
  .workspace {
    padding: 24px 18px;
  }
  .welcome {
    padding: 24px;
  }
  .stats {
    gap: 8px;
  }
  .stat {
    padding: 13px;
  }
  .stat b {
    font-size: 22px;
  }
  .stat small {
    font-size: 10px;
  }
  .two {
    grid-template-columns: 1fr;
  }
  .auth {
    margin: 30px 16px;
    padding: 24px;
  }
  .toolbar select {
    width: 100%;
  }
  .section-head {
    flex-wrap: wrap;
  }
  .editor-bar {
    top: 0;
  }
  .grid {
    grid-template-columns: 1fr;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

#now{position:sticky;bottom:12px;z-index:5;box-shadow:0 8px 40px #63263c22}#now audio{width:100%}#queue{max-height:120px;overflow:auto}progress{accent-color:var(--accent)}

.rich-editor{min-height:320px;border:1px solid var(--line);padding:18px;border-radius:12px;white-space:pre-wrap;overflow-wrap:anywhere;background:var(--panel)}.rich-editor:focus{outline:2px solid var(--accent)}.rich-editor td,.rich-editor th{border:1px solid var(--line);padding:8px;min-width:70px}.rich-editor table{border-collapse:collapse;max-width:100%}.rich-container .actions{margin-bottom:12px}
@media print{header,footer,.sidebar,.editor-bar,.actions,#fileList,#toast,label:has(input),label:has(select),h2:has(+p){display:none!important}.layout{display:block}.workspace{width:100%;padding:0}.editor textarea,.rich-editor{border:0;width:100%;height:auto;overflow:visible}.editor>label:has(textarea){display:block}.two{display:none}body{background:white;color:black}}

.calendar-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px}.calendar-grid .card{padding:12px;overflow-wrap:anywhere}audio,video{max-width:100%}@media(max-width:900px){.calendar-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:480px){.calendar-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

body.has-player{padding-bottom:310px}#now{position:fixed;bottom:12px;left:50%;transform:translateX(-50%);width:min(1100px,calc(100% - 24px));max-height:40vh;overflow:auto;z-index:50;padding:16px 24px;border:1px solid var(--line)}#now h2{font-size:18px;margin:4px 0}#nowCover{float:left;object-fit:cover;border-radius:12px;margin-right:14px}#now.expanded{inset:12px;transform:none;width:auto;max-height:none;display:flex;flex-direction:column;justify-content:center}#now.expanded #queue{max-height:40vh}#now.expanded #nowCover{width:180px;height:180px;float:none;margin:0 auto}#now.expanded h2{text-align:center}@media(max-width:600px){#now .actions{gap:5px}#now .actions button{padding:7px 9px;font-size:12px}#now{max-height:42vh;padding:12px}}

/* MAYAR header refinement — applies across all public pages */
header.top{height:auto;min-height:80px;display:flex;flex-wrap:nowrap;gap:clamp(12px,2vw,24px);padding-block:13px}
header.top>.brand{flex:0 0 auto;white-space:nowrap;line-height:1.15;font-size:clamp(19px,2vw,25px);letter-spacing:1.1px}
header.top nav{flex:1 1 auto;min-width:0;justify-content:flex-end;gap:clamp(5px,.75vw,12px);flex-wrap:nowrap}
header.top nav a,header.top nav button{white-space:nowrap;font-size:12px}
.mayar-search-trigger{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:linear-gradient(135deg,#fbe6ef,#f5d6e3);border:1px solid #e9b8cb;color:#8d3158;border-radius:999px;padding:9px 15px;min-height:40px;font-weight:700;box-shadow:0 3px 12px #ae426715;white-space:nowrap}
.mayar-search-trigger:hover{background:#f1c8d9;transform:translateY(-1px)}
.mayar-search-trigger svg{flex:none}
#commandSearch{max-width:min(460px,calc(100vw - 32px));border:1px solid var(--line);border-radius:22px;padding:26px;background:var(--panel,var(--bg));color:var(--ink)}
#commandSearch::backdrop{background:#2c1b2a8c;backdrop-filter:blur(4px)}
#commandSearch form{display:grid;gap:12px}#commandSearch h2{margin:0 0 4px;font-size:24px}#commandSearch label{display:grid;gap:7px}#commandSearch input{width:100%;min-height:46px;border:1px solid var(--line);border-radius:12px;padding:10px 12px}#commandSearch form button{min-height:42px;border-radius:12px}#commandSearch form button:not([data-close]){background:var(--accent,#ae4267);color:white;border-color:transparent}
@media(max-width:1150px){header.top{align-items:flex-start;flex-direction:column}header.top nav{width:100%;justify-content:flex-start;flex-wrap:wrap}}
@media(max-width:650px){header.top{padding:15px 18px;gap:12px}header.top>.brand{font-size:23px}header.top nav{gap:8px}header.top nav a,header.top nav button{font-size:11px;padding:8px 11px;min-height:38px}.mayar-search-trigger{margin-left:0}}

/* MAYAR layout refinement: consistent spacing and accessible focus */
label{line-height:1.6;margin:18px 0 12px;overflow:visible}
label>input:not([type="checkbox"]):not([type="radio"]),label>textarea,label>select{display:block;margin-top:10px;margin-bottom:4px;max-width:100%;}
input:not([type="checkbox"]):not([type="radio"]),textarea,select{min-height:46px;max-width:100%;line-height:1.5;transition:border-color .15s,box-shadow .15s;}
input:focus-visible,textarea:focus-visible,select:focus-visible{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)}
button:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.panel,.auth,.workspace{min-width:0} .actions{flex-wrap:wrap;row-gap:12px}
@media(max-width:600px){label{margin:16px 0 10px}input,textarea,select{font-size:16px}}

/* MAYAR focus fix: a single, thin border INSIDE the field; no outside halo. */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):focus,
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):focus-visible,
textarea:focus,textarea:focus-visible,
select:focus,select:focus-visible {
  outline: none !important;
  outline-offset: 0 !important;
  box-shadow: none !important;
  border-color: var(--accent, #ae4267) !important;
  border-width: 1px !important;
}
/* Keep form labels clear of input borders. */
label > input:not([type="checkbox"]):not([type="radio"]),
label > textarea, label > select { margin-top: 12px; }

/* MAYAR navigation & form correction — 31 Oct 2026 */
header nav .mayar-private-menu{position:relative;display:inline-flex;align-items:center;flex:0 0 auto}
header nav .mayar-private-toggle{background:transparent;color:inherit;border:1px solid var(--line,#ead7df);border-radius:999px;padding:10px 16px;min-height:42px;white-space:nowrap;cursor:pointer}
header nav .mayar-private-panel{position:absolute;right:0;top:calc(100% + 8px);z-index:1000;min-width:210px;padding:8px;background:var(--panel,#fff);color:var(--ink,#422d39);border:1px solid var(--line,#ead7df);border-radius:14px;box-shadow:0 12px 35px #13091330;display:none;flex-direction:column;gap:2px}
header nav .mayar-private-menu:hover .mayar-private-panel,header nav .mayar-private-menu:focus-within .mayar-private-panel,header nav .mayar-private-menu.is-open .mayar-private-panel{display:flex}
header nav .mayar-private-panel a{display:block!important;color:inherit!important;text-decoration:none!important;padding:10px 12px;border-radius:9px;font-size:13px;white-space:nowrap}
header nav .mayar-private-panel a:hover,header nav .mayar-private-panel a:focus-visible{background:var(--soft,#f9e8ed)}
header nav{gap:clamp(9px,1.3vw,20px)!important}
header nav>a{white-space:nowrap}
label{line-height:1.5!important}
label>input:not([type=checkbox]):not([type=radio]),label>textarea,label>select{margin-top:14px!important}
input:not([type=checkbox]):not([type=radio]):not([type=range]):focus,input:not([type=checkbox]):not([type=radio]):not([type=range]):focus-visible,textarea:focus,textarea:focus-visible,select:focus,select:focus-visible{outline:0!important;outline-offset:0!important;box-shadow:none!important;border:1px solid var(--accent,#b64d78)!important}
@media(max-width:650px){header nav{flex-wrap:wrap!important;gap:8px!important}header nav .mayar-private-panel{right:auto;left:0;max-width:calc(100vw - 32px)}}