/* Shared portal skin: deep space, restrained utility surfaces, readable document shell. */
:root {
  color-scheme: dark;
  --ink: #eef1f4;
  --muted: #98a6b6;
  --accent: #a4bddb;
  --accent-hover: #bfd2e8;
  --line: #d8e5f023;
  --paper: #030405;
  --nav: #050608;
  --white: #f3f5f7;
  --panel: #111419e8;
  --serif: Georgia, "Noto Serif SC", "Songti SC", serif;
  --sans: "Segoe UI", "Microsoft YaHei", sans-serif;
  color: var(--ink);
  background: var(--paper);
}

html { background: var(--paper); }
body {
  background:
    radial-gradient(ellipse 36% 42% at 78% 18%, #dceaff0c, transparent 76%),
    linear-gradient(180deg, #030405 0%, #07080a 52%, #030405 100%);
}
a:focus-visible,
button:focus-visible,
input:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.eyebrow { color: var(--accent); font-weight: 500; }
.muted { color: var(--muted); }
.primary {
  border: 1px solid #b8cee45e;
  border-radius: 3px;
  background: #a4bddb;
  color: #101820;
  box-shadow: 0 0 32px #86baf012;
}
.primary:hover:not(:disabled) { background: var(--accent-hover); }

/* Authentication and one-time setup. */
.auth-page {
  min-height: 100svh;
  padding: clamp(24px, 5svh, 54px) 16px;
  overflow-y: auto;
  background:
    radial-gradient(ellipse 42% 52% at 50% 42%, #b9d2eb0d, transparent 72%),
    #030405;
}
.auth-card {
  width: min(420px, 100%);
  max-width: none;
  margin: auto;
  padding: clamp(30px, 5vh, 44px);
  border: 1px solid #bdcfe42b;
  border-radius: 6px;
  background: linear-gradient(145deg, #bacde208, transparent 52%), #111419e8;
  box-shadow: 0 24px 90px #0008, inset 0 1px #eaf4ff0a;
}
.auth-brand {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 34px;
  color: #f2f2f0;
  font: 400 23px/1.3 Georgia, serif;
  letter-spacing: 3.5px;
}
.auth-brand span {
  padding-left: 18px;
  border-left: 1px solid var(--line);
  color: var(--muted);
  font: 9px/1.5 var(--sans);
  letter-spacing: 1.8px;
}
.auth-card h1 {
  color: #f3f2ef;
  font: 400 clamp(28px, 5vw, 34px)/1.35 var(--serif);
  letter-spacing: 1px;
}
.auth-card .muted { font-size: 12px; line-height: 1.8; }
.auth-card label { margin-top: 19px; color: #b1bdc9; }
.auth-card input {
  min-height: 44px;
  border: 1px solid #aebed13d;
  border-radius: 3px;
  background: #050709c7;
  color: var(--ink);
}
.auth-card input:hover { border-color: #a4bddb70; }
.auth-card input:read-only { background: #090c10; color: #9ca9b5; }
.field-hint { color: #8997a6 !important; }
.form-error { color: #e3a599 !important; }
.wide { margin-top: 8px; min-height: 45px; }
.auth-foot {
  margin-top: 26px;
  padding-top: 18px;
  border-color: var(--line);
  color: #8492a0;
  letter-spacing: .2px;
}
.setup-page { padding-block: 20px; }
.setup-page .auth-card { padding-block: clamp(24px, 3.5vh, 36px); }
.setup-page .auth-brand { margin-bottom: 22px; }
.setup-page .auth-card label { margin-top: 13px; }
.setup-page .auth-foot { margin-top: 18px; }

/* Private and public document readers keep their iframe security boundary intact. */
.document-page {
  height: 100svh;
  min-height: 0;
  overflow: hidden;
  background: #030405;
}
.document-toolbar {
  position: relative;
  height: 68px;
  padding: 0 clamp(16px, 3vw, 42px);
  gap: 22px;
  border-color: var(--line);
  background: #080a0dee;
  color: var(--muted);
  backdrop-filter: blur(12px);
}
.document-toolbar > a {
  flex: 0 0 auto;
  color: #a9bbcd;
  font-size: 12px;
}
.document-toolbar > a:hover { color: var(--accent); }
.document-toolbar > strong {
  position: absolute;
  left: 50%;
  max-width: min(36vw, 560px);
  overflow: hidden;
  color: #edf0f2;
  font: 400 15px/1.4 var(--serif);
  letter-spacing: .8px;
  text-overflow: ellipsis;
  white-space: nowrap;
  transform: translateX(-50%);
}
.document-actions { margin-left: auto; }
.sharing-status { color: #8f9ead; }
.sharing-status.error { color: #e3a599; }
.document-toolbar .publish-choice {
  margin: 0;
  color: #b6c1cc;
}
.publish-choice input { accent-color: var(--accent); }
.public-document-link { color: var(--accent); }
.private-label {
  display: inline-flex;
  border-color: #a4bddb52;
  border-radius: 999px;
  color: #b9cce0;
  letter-spacing: 1px;
}
.document-page > .document-frame {
  display: block;
  width: calc(100% - 24px);
  height: calc(100svh - 80px);
  margin: 12px auto 0;
  border: 1px solid #bdcfe421;
  border-radius: 4px 4px 0 0;
  background: white;
}

/* Public document unavailable state. */
.unavailable-shell {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 24px;
}
.public-library .public-main.unavailable-page {
  width: min(560px, 100%);
  max-width: none;
  margin: 0;
  padding: clamp(32px, 6vw, 54px);
  border: 1px solid #bdcfe42b;
  border-radius: 6px;
  background: linear-gradient(145deg, #bacde208, transparent 52%), #111419e8;
  box-shadow: 0 24px 90px #0007;
}
.unavailable-page h1 {
  color: #f3f2ef;
  font: 400 clamp(29px, 5vw, 39px)/1.35 var(--serif);
  letter-spacing: 1px;
}
.unavailable-page .primary { margin-top: 28px; }

@media (max-width: 760px) {
  .auth-page { align-items: flex-start; }
  .auth-card { padding: 30px 26px; }
  .auth-brand span { display: none; }
  .document-toolbar { height: auto; min-height: 76px; padding: 10px 14px; align-content: center; }
  .document-toolbar > strong { position: static; max-width: 42vw; transform: none; }
  .owner-document .document-toolbar { height: auto; min-height: 108px; padding: 10px 14px; }
  .owner-document .document-actions { gap: 10px; }
  .document-actions .private-label { display: inline-flex; }
  .document-page > .document-frame { width: 100%; height: calc(100svh - 88px); margin-top: 0; border-inline: 0; }
  .owner-document > .document-frame { height: calc(100svh - 108px); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}