@font-face {
  font-family: Cairo;
  src: url("/assets/finance-fonts/Cairo-Regular.ttf") format("truetype");
  font-display: swap;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: #071b26;
  color: #f0eee9;
  font:
    15px Cairo,
    Tahoma,
    Arial,
    sans-serif;
  line-height: 1.8;
}
a {
  color: inherit;
  text-decoration: none;
}
button,
input,
select,
textarea {
  font: inherit;
}
button,
a,
input,
select,
textarea {
  outline-offset: 5px;
}
button {
  cursor: pointer;
}
button:disabled {
  opacity: 0.45;
  cursor: wait;
}
.gold,
.primary {
  background: linear-gradient(125deg, #9ce9eb, #8bb5f5);
  color: #092434 !important;
  border: 0 !important;
  font-weight: 700;
}
.shell {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  min-height: 100vh;
}
.sidebar {
  padding: 30px 20px;
  background: #0c2636aa;
  border-inline-end: 1px solid #ffffff0e;
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
}
.brand {
  font-family: Georgia, serif;
  font-size: 26px;
  line-height: 1.3;
  letter-spacing: -1px;
  color: #8ddde5;
}
.brand small {
  display: block;
  font: 10px Tahoma;
  letter-spacing: 3px;
  color: #9198a6;
}
.brand b {
  font-size: 13px;
  background: #68d4de22;
  padding: 4px 8px;
  border-radius: 6px;
  letter-spacing: 1px;
}
.nav {
  display: grid;
  gap: 5px;
  margin-top: 40px;
}
.nav a {
  padding: 10px 14px;
  border-radius: 9px;
  color: #a3abba;
  display: flex;
  gap: 12px;
  font-size: 13px;
}
.nav a.active {
  background: #7edce91a;
  color: #c8f6fc;
  border-inline-start: 2px solid #70d8e8;
}
.nav a:hover {
  background: #ffffff08;
}
.sidebar .bottom {
  margin-top: auto;
  font-size: 11px;
  color: #8690a3;
  padding-top: 20px;
}
.content {
  min-width: 0;
}
.topbar {
  height: 90px;
  padding: 20px 40px;
  border-bottom: 1px solid #ffffff0d;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.topbar .path {
  font-size: 12px;
  color: #8892a3;
}
.tools {
  display: flex;
  align-items: center;
  gap: 12px;
}
select {
  color: #d7dce4;
  background: #111a2b;
  border: 1px solid #ffffff1a;
  border-radius: 8px;
  padding: 8px;
}
.avatar {
  border: 1px solid #d1b67655;
  border-radius: 50%;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  color: #e4cb91;
}
.main {
  padding: 32px 40px 50px;
  max-width: 1600px;
  margin: auto;
}
.eyebrow {
  color: #83d9e7;
  font-size: 11px;
  letter-spacing: 2px;
}
.heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 26px;
}
.heading h1 {
  margin: 4px 0;
  font-size: 27px;
}
.muted {
  color: #949eae;
  font-size: 13px;
}
p {
  margin: 8px 0;
}
.button,
button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid #ffffff24;
  background: #182131;
  color: #e8e8e8;
  padding: 10px 18px;
  border-radius: 9px;
  font-size: 13px;
  min-height: 44px;
}
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(175px, 1fr));
  gap: 16px;
  margin: 24px 0;
}
.card {
  border: 1px solid #ffffff12;
  background: linear-gradient(140deg, #162030, #101723);
  border-radius: 14px;
  padding: 22px;
  box-shadow: 0 8px 30px #0000000a;
}
.stat-label {
  font-size: 12px;
  color: #9da7b7;
}
.stat-value {
  font: 32px Arial;
  margin: 14px 0 6px;
  color: #eefbff;
}
.stat-icon {
  float: inline-end;
  color: #83d9e7;
  font-size: 18px;
}
.grid {
  display: grid;
  grid-template-columns: 1.8fr 1fr;
  gap: 20px;
}
.section-title {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  align-items: center;
  margin-bottom: 15px;
}
.section-title h2 {
  font-size: 16px;
  margin: 0;
}
@media (max-width:1000px) {
  .word-template-row { flex-wrap:wrap; align-items:stretch; min-width:0; }
  .word-template-row > span { flex:1 1 100%; min-width:0; overflow-wrap:anywhere; }
  .word-template-row > button,.word-template-row > .button { flex:1 1 calc(50% - 8px); min-width:0; max-width:100%; white-space:normal; }
  .word-template-row > .button { position:relative; }
  .word-template-row input[type="file"] { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
  .word-template-row > .button:focus-within { outline:2px solid var(--accent); outline-offset:2px; }
  .actions > #template { flex:1 1 100%; width:100%; max-width:100%; min-width:0; text-overflow:ellipsis; }
}
.section-title a {
  font-size: 12px;
  color: #a0e4f2;
}
.trial {
  border-color: #83d9e733;
  background:
    radial-gradient(ellipse at top left, #80633322, transparent 70%), #131c2a;
}
.progress {
  height: 5px;
  background: #ffffff0b;
  border-radius: 4px;
  margin: 20px 0;
}
.progress span {
  display: block;
  height: 100%;
  background: #87dce9;
  border-radius: 4px;
  width: 0;
}
.empty {
  text-align: center;
  padding: 42px 12px;
  color: #8793a7;
}
.empty .empty-icon {
  display: block;
  font-size: 30px;
  color: #9bdce7;
  margin: 0 0 14px;
}
.table-wrap {
  overflow-x: auto;
}
table {
  border-collapse: collapse;
  width: 100%;
  font-size: 12px;
  white-space: nowrap;
}
th,
td {
  text-align: start;
  padding: 15px 10px;
  border-bottom: 1px solid #ffffff0b;
}
th {
  color: #7f8da2;
  font-weight: 400;
}
.badge {
  display: inline-block;
  border-radius: 6px;
  padding: 3px 10px;
  font-size: 11px;
  background: #7fcce91c;
  color: #c8eaff;
}
.success {
  color: #80c8ab;
}
.warning {
  background: #b8913914;
  border: 1px solid #83d9e733;
  color: #dec592;
  border-radius: 10px;
  padding: 14px 18px;
  font-size: 12px;
  margin: 16px 0;
}
.error {
  color: #f2aaaa;
  background: #ba52521a;
  border: 1px solid #ba525244;
  padding: 12px;
  border-radius: 8px;
}
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.field {
  display: grid;
  gap: 7px;
  min-width: 0;
}
.field select {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}
.field span {
  font-size: 12px;
  color: #b7c0ce;
}
input,
textarea {
  background: #0c1422;
  border: 1px solid #ffffff1e;
  border-radius: 8px;
  color: #eee;
  padding: 11px 13px;
  width: 100%;
  min-width: 0;
}
input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: #75d6e6;
}
textarea {
  min-height: 110px;
  resize: vertical;
}
.full {
  grid-column: 1/-1;
}
.check {
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: 12px;
  color: #abb5c5;
}
.auth {
  max-width: 630px;
  margin: 40px auto;
  padding: 30px;
}
.auth .brand {
  text-align: center;
  margin-bottom: 26px;
}
.auth h1 {
  font-size: 23px;
}
.auth form {
  margin-top: 25px;
}
.auth .button {
  width: 100%;
}
.landing {
  max-width: 1240px;
  margin: auto;
  padding: 28px 30px;
}
.landing header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}
.hero {
  padding: 100px 0 60px;
  text-align: center;
  max-width: 860px;
  margin: auto;
}
.hero h1 {
  font-size: clamp(32px, 5vw, 59px);
  line-height: 1.5;
  letter-spacing: -1px;
  margin: 20px 0;
}
.hero em {
  font-style: normal;
  color: #a3dce9;
}
.hero p {
  color: #9ba7b8;
  max-width: 600px;
  margin: 20px auto 30px;
}
.hero .actions {
  justify-content: center;
}
.actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}
.landing .stats {
  grid-template-columns: repeat(3, 1fr);
}
.upload {
  border: 1px dashed #bfa66f66;
  text-align: center;
  padding: 45px 20px;
  border-radius: 12px;
  background: #d5b57504;
}
.upload input {
  max-width: 420px;
  margin: 20px auto;
  display: block;
}
.editor {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.segment {
  padding: 16px;
  border: 1px solid #ffffff12;
  border-radius: 8px;
  margin: 12px 0;
}
.segment pre {
  white-space: pre-wrap;
  font: inherit;
  color: #afb9c9;
}
.segment textarea {
  min-height: 130px;
}
.footer {
  margin-top: 40px;
  padding-top: 22px;
  border-top: 1px solid #ffffff0b;
  font-size: 10px;
  color: #627087;
  display: flex;
  justify-content: space-between;
}
.mobile-menu {
  display: none;
}
#toast {
  position: fixed;
  bottom: 25px;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  background: #a4e7f3;
  color: #282319;
  border-radius: 9px;
  padding: 10px 20px;
  z-index: 99;
  display: none;
}
.statusbar {
  display: flex;
  gap: 12px;
  align-items: center;
}
.flow {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.flow .card {
  font-size: 13px;
}
.flow b {
  color: #a3dce9;
  display: block;
  font: 26px Georgia;
  margin-bottom: 8px;
}
.search {
  max-width: 300px;
}
.skeleton {
  opacity: 0.55;
}
.chart {
  display: flex;
  align-items: flex-end;
  gap: 15px;
  height: 120px;
  padding-top: 12px;
}
.chart div {
  flex: 1;
  background: #d7b97b44;
  min-height: 3px;
  border-radius: 4px 4px 0 0;
}
.activity-controls {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-block: 12px;
}
.activity-controls button[aria-pressed="true"] {
  border-color: #83d9e7;
  color: #eefbff;
}
.activity-chart {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 130px;
  border-block-end: 1px solid #ffffff33;
  margin-block: 16px;
}
.activity-bar {
  flex: 1;
  min-width: 0;
  background: linear-gradient(#8edfea, #648acb);
  border-radius: 4px 4px 0 0;
}
.mobile-backdrop {
  display: none;
}
@media (max-width: 1100px) {
  .shell {
    grid-template-columns: 210px minmax(0, 1fr);
  }
  .sidebar {
    padding: 25px 14px;
  }
  .main {
    padding: 25px;
  }
  .topbar {
    padding: 18px 25px;
  }
  .stats {
    grid-template-columns: repeat(2, 1fr);
  }
  .grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 760px) {
  .shell {
    display: block;
  }
  .sidebar {
    position: fixed;
    inset-block: 0;
    inset-inline-start: 0;
    width: 260px;
    z-index: 50;
    transform: translateX(110%);
    transition: transform 0.2s;
  }
  .shell[dir="ltr"] .sidebar {
    transform: translateX(-110%);
  }
  .shell.menu-open .sidebar {
    transform: none;
  }
  .menu-open .mobile-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: #0009;
    z-index: 49;
  }
  .mobile-menu {
    display: inline-flex;
    padding: 8px 12px;
  }
  .main {
    padding: 22px 16px;
  }
  .topbar {
    height: 74px;
    padding: 12px 16px;
  }
  .topbar .path {
    display: none;
  }
  .heading {
    align-items: flex-start;
  }
  .heading h1 {
    font-size: 22px;
  }
  .heading .button {
    padding: 8px 12px;
    font-size: 11px;
  }
  .stats {
    gap: 10px;
    margin: 20px 0;
  }
  .card {
    padding: 18px 15px;
  }
  .stat-value {
    font-size: 28px;
  }
  .form-grid,
  .editor {
    grid-template-columns: 1fr;
  }
  .auth {
    margin: 18px 14px;
    padding: 24px 18px;
  }
  .landing {
    padding: 22px 18px;
  }
  .landing .stats,
  .flow {
    grid-template-columns: 1fr;
  }
  .hero {
    padding: 65px 0 35px;
  }
  .hero h1 {
    font-size: 34px;
  }
  .tools {
    gap: 8px;
  }
  .topbar select {
    max-width: 110px;
  }
  .footer {
    gap: 20px;
  }
  .full {
    grid-column: auto;
  }
}
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
}
.button.primary,
button.primary {
  background: linear-gradient(125deg, #9ce9eb, #8bb5f5);
  border: 0;
  color: #092434;
}
.button.primary:hover,
button.primary:hover {
  filter: brightness(1.06);
}
@media (max-width: 760px) {
  .sidebar {
    visibility: hidden;
    pointer-events: none;
  }
  .menu-open .sidebar {
    visibility: visible;
    pointer-events: auto;
  }
}
.heading > div {
  min-width: 0;
}
.heading > .button {
  flex-shrink: 0;
  white-space: nowrap;
}
.replace-template {
  max-width: 150px;
  font-size: 10px;
}

/* Soft Professional — presentation-only Pro theme. */
@font-face { font-family:"Plus Jakarta Sans"; src:url("./fonts/PlusJakartaSans.woff2") format("woff2"); font-weight:200 800; font-display:swap; }
@font-face { font-family:Inter; src:url("./fonts/Inter.woff2") format("woff2"); font-weight:100 900; font-display:swap; }
@font-face { font-family:Cairo; src:url("/assets/finance-fonts/Cairo-Bold.ttf") format("truetype"); font-weight:700 900; font-display:swap; }
:root { color-scheme:light; --workspace:#f8fafc; --ink:#0f172a; --muted:#64748b; --indigo:#4f46e5; --ease:cubic-bezier(.4,0,.2,1); }
body { background:var(--workspace); color:var(--ink); font-family:Inter,Cairo,Tahoma,sans-serif; }
body::before { content:none; }
h1,h2,h3,.stat-value,.brand { font-family:"Plus Jakarta Sans",Cairo,sans-serif; }
h1,h2,h3 { font-weight:800; letter-spacing:-.02em; }
h2 { font-size:17px; }
.shell { grid-template-columns:280px minmax(0,1fr); }
.sidebar { background:#0f172a; border-color:#1e293b; padding:24px 22px; overflow-y:auto; color:#e2e8f0; }
.brand { display:flex; align-items:center; justify-content:center; gap:10px; min-height:64px; }
.brand img { width:150px; height:58px; object-fit:contain; background:#f1f5f9; border-radius:12px; padding:7px; }
.brand b { color:#fff; font:800 12px "Plus Jakarta Sans",sans-serif; letter-spacing:.1em; border:1px solid #a5b4fc60; border-radius:10px; background:#4f46e5; padding:9px; animation:pro-glow 4s ease-in-out infinite; }
@keyframes pro-glow { 50% { box-shadow:0 0 20px #818cf870; background:#6366f1; } }
.nav { gap:5px; margin-top:22px; }
.nav-label { font-size:10px; font-weight:700; letter-spacing:.08em; color:#94a3b8; padding:13px 13px 7px; }
.nav a { display:flex; align-items:center; min-height:45px; padding:10px 13px; border:1px solid transparent; border-radius:14px; color:#aebbd0; font-size:13px; }
.nav a::after { content:"›"; margin-inline-start:auto; color:#64748b; font-size:20px; transform:scaleX(-1); }
.shell[dir="ltr"] .nav a::after { transform:none; }
.nav a.active { background:#4f46e5; color:#fff; border-color:#6366f1; box-shadow:0 10px 15px -3px #4f46e54d; }
.nav a.active::after { color:#c7d2fe; }
.nav a:hover { background:#1e293b; color:#fff; transform:translateY(-2px); }
.nav a.active:hover { background:#5b52ed; }
.sidebar .bottom { margin-top:auto; color:#a3b2c8; }
.sidebar .bottom p { padding:12px; border:1px solid #334155; background:#1e293b; border-radius:16px; line-height:1.8; }
.sidebar button { color:#cbd5e1; background:#1e293b; border-color:#334155; width:100%; }
.topbar { height:80px; padding:14px 32px; position:sticky; top:0; z-index:30; background:#fffffff2; border-bottom:1px solid #e2e8f0; backdrop-filter:blur(12px); }
.topbar .tools { min-width:0; }
.header-search { display:flex; align-items:center; width:clamp(180px,25vw,400px); background:#f8fafc; border:1px solid #edf0f5; border-radius:16px; }
.header-search input { background:transparent; border:0; font-size:11px; padding:9px 4px; }
.header-search button { padding:9px 12px; background:transparent; border:0; color:#64748b; box-shadow:none; }
.topbar select { border:0; background:#f8fafc; font-size:12px; }
.account-chip { display:flex; align-items:center; gap:10px; padding:5px; border-radius:16px; max-width:240px; }
.account-name { color:#334155; font-size:12px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.account-name small { display:block; color:#64748b; font-size:10px; font-weight:400; }
.avatar { width:40px; height:40px; flex-shrink:0; border:2px solid #e0e7ff; background:#eef2ff; color:#4f46e5; font:800 17px "Plus Jakarta Sans",sans-serif; }
.sound-toggle { padding:10px; color:#64748b; background:#f8fafc; border:0; }
.sound-toggle[aria-pressed="true"] { color:#4f46e5; background:#e0e7ff; }
.ui-icon { display:inline-block; width:20px; height:20px; vertical-align:middle; flex-shrink:0; transition:transform .3s var(--ease),color .3s var(--ease); }
.main { max-width:1640px; padding:30px 32px 48px; animation:page-enter .35s var(--ease); }
@keyframes page-enter { from { opacity:.3; transform:translateY(7px); } to { opacity:1; transform:none; } }
.heading { margin-bottom:22px; }
.heading h1 { font-size:clamp(23px,2vw,32px); }
.heading p { max-width:70ch; margin-top:6px; }
.muted,.stat-label,.field span,.check { color:#64748b; }
.eyebrow { color:#4f46e5; font-size:11px; font-weight:700; }
.card { background:#fff; border:1px solid #f1f5f9; border-radius:32px; box-shadow:0 4px 6px -1px #0f172a0c; padding:24px; }
button,.button,.nav a,.quick-grid a,.kpi-card,.account-chip,summary,.filter-tabs a,.chart-legend a { transition:transform .3s var(--ease),background .3s var(--ease),color .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease); }
button,.button { background:#f8fafc; color:#334155; border:1px solid #e2e8f0; border-radius:16px; font-weight:700; min-height:44px; }
.primary,.gold,button.primary,.button.primary { background:#4f46e5; color:#fff!important; border:0; box-shadow:0 5px 12px #4f46e51c; }
button:not(:disabled):hover,.button:hover { transform:translateY(-2px); box-shadow:0 6px 14px #0f172a12; border-color:#c7d2fe; }
button.primary:not(:disabled):hover,.button.primary:hover { background:#4338ca; }
button:not(:disabled):active,.button:active,.nav a:active,.quick-grid a:active,.kpi-card:active,.account-chip:active,.filter-tabs a:active { transform:scale(.97); box-shadow:inset 0 2px 5px #0f172a13; }
button:disabled { cursor:not-allowed; }
a:hover > .ui-icon,button:hover .ui-icon,.nav a:hover .ui-icon,.quick-grid a:hover .ui-icon { transform:translateY(-2px) rotate(-7deg) scale(1.08); }
a:active .ui-icon,button:active .ui-icon { transform:scale(.88) rotate(7deg); }
:focus-visible { outline:3px solid #818cf8; outline-offset:3px; }
input,textarea,select { color:#0f172a; background:#f8fafc; border:1px solid #e2e8f0; border-radius:14px; transition:border-color .2s,box-shadow .2s; }
input:focus,textarea:focus,select:focus { border-color:#818cf8; box-shadow:0 0 0 3px #6366f111; }
input::placeholder { color:#64748b; }
select option { background:#fff; color:#0f172a; }
input[type="checkbox"] { accent-color:#4f46e5; }
.stats.kpi-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:16px; margin:24px 0; }
.kpi-card { --tone:#4f46e5; --tint:#eef2ff; padding:20px; border-radius:24px; min-width:0; display:block; position:relative; }
.kpi-card:hover { transform:translateY(-4px) scale(1.02); box-shadow:0 15px 30px -15px color-mix(in srgb,var(--tone) 40%,transparent); border-color:color-mix(in srgb,var(--tone) 25%,white); }
.tone-blue { --tone:#3b82f6; --tint:#eff6ff; }
.tone-amber { --tone:#d97706; --tint:#fffbeb; }
.tone-rose { --tone:#e11d48; --tint:#fff1f2; }
.tone-emerald { --tone:#059669; --tint:#ecfdf5; }
.kpi-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:15px; }
.stat-icon { float:none; display:grid; place-items:center; width:40px; height:40px; background:var(--tint); color:var(--tone); border-radius:12px; }
.kpi-open { color:#94a3b8; font:18px Arial; transition:transform .3s; }
.kpi-card:hover .kpi-open { transform:translate(2px,-2px); color:var(--tone); }
.stat-label { font-size:11px; font-weight:700; line-height:1.6; min-height:35px; }
.stat-value { font-size:32px; font-weight:800; line-height:1.2; color:#0f172a; margin:4px 0 12px; font-variant-numeric:tabular-nums; }
.kpi-caption { display:block; color:#64748b; font-size:9px; margin-top:9px; }
.sparkline { width:100%; height:34px; display:block; color:var(--tone); }
.metric-track { height:4px; margin:30px 0 0; background:var(--tint); overflow:hidden; border-radius:9px; }
.metric-track span { animation:metric-grow .85s var(--ease); transform-origin:right; display:block; height:100%; background:var(--tone); border-radius:9px; }
.analytics-grid { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:20px; margin:24px 0; }
.trend-panel { grid-column:span 6; border-radius:40px; }
.distribution-panel,.recent-panel { grid-column:span 3; min-width:0; }
.analytics-grid h2 { margin:0 0 12px; font-size:15px; }
.trend-chart { width:100%; height:190px; overflow:visible; }
.chart-grid { stroke:#e2e8f0; stroke-width:1; stroke-dasharray:4 6; fill:none; }
@keyframes metric-grow { from { transform:scaleX(0); } to { transform:scaleX(1); } }
.trend-line { stroke:#4f46e5; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; fill:none; }
.trend-chart circle { fill:#fff; stroke:#4f46e5; stroke-width:2; transition:r .2s,fill .2s; }
.trend-chart circle:hover,.trend-chart circle:focus { r:7; fill:#c7d2fe; }
.chart-caption { display:flex; justify-content:space-between; gap:12px; color:#64748b; font-size:10px; }
.chart-caption a,.section-title a { color:#4f46e5; }
.donut { position:relative; width:150px; max-width:100%; margin:12px auto 16px; aspect-ratio:1; }
.donut svg circle { transition:stroke-width .3s; }
.donut svg circle:hover { stroke-width:16px; }
.donut svg { width:100%; transform:rotate(-90deg); }
.donut > div { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; flex-direction:column; }
.donut strong { font:800 26px "Plus Jakarta Sans",sans-serif; }
.donut span { color:#64748b; font-size:9px; }
.chart-legend > * { display:flex; align-items:center; gap:7px; font-size:10px; padding:5px 0; }
.chart-legend > *::before { content:""; width:7px; height:7px; border-radius:50%; background:var(--legend); flex-shrink:0; }
.chart-legend b { margin-inline-start:auto; }
.chart-legend a:hover { color:#4f46e5; transform:translateY(-1px); }
.recent-timeline { list-style:none; padding:0; margin:0; }
.recent-timeline li { position:relative; padding:4px 15px 17px 0; border-inline-start:2px solid #e0e7ff; padding-inline-start:15px; }
.recent-timeline li::before { content:""; position:absolute; inset-inline-start:-5px; top:8px; width:8px; height:8px; border-radius:50%; background:#818cf8; box-shadow:0 0 0 3px #eef2ff; }
.recent-timeline a { display:block; }
.recent-timeline strong { display:block; font-size:11px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.recent-timeline small { display:block; font-size:9px; color:#64748b; margin:3px 0; }
.recent-timeline .badge { font-size:9px; padding:1px 7px; }
.utility-grid { display:grid; grid-template-columns:2fr 1fr; gap:20px; margin-top:24px; }
.promo-banner { border:0; border-radius:40px; background:linear-gradient(135deg,#4f46e5,#3730a3); color:#fff; display:flex; align-items:center; justify-content:space-between; gap:26px; padding:32px; overflow:hidden; }
.promo-banner .eyebrow { color:#e0e7ff; }
.promo-banner h2 { font-size:22px; margin:10px 0; }
.promo-banner h2 strong { font-size:32px; }
.promo-banner p { color:#e0e7ff; font-size:12px; }
.promo-banner .button { background:#fff; color:#4338ca; border:0; margin-top:14px; }
.quota-glass { flex:0 1 200px; min-width:130px; background:#ffffff13; backdrop-filter:blur(12px); border:1px solid #ffffff30; border-radius:24px; padding:24px; transform:rotate(-4deg); transition:transform .3s; }
.quota-glass:hover { transform:rotate(0deg) translateY(-3px); }
.quota-glass > span,.quota-glass > small { display:block; font-size:11px; color:#e0e7ff; }
.quota-glass strong { display:block; font-size:28px; font-family:"Plus Jakarta Sans",Cairo,sans-serif; }
.quota-glass strong small { font-size:13px; color:#c7d2fe; }
.progress { background:#ffffff25; }
.progress span { background:#a5b4fc; }
.quick-panel h2 { margin-top:0; }
.quick-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.quick-grid a { display:flex; align-items:center; justify-content:center; flex-direction:column; gap:9px; background:#f8fafc; border:1px solid #f1f5f9; border-radius:16px; padding:15px 8px; font-size:11px; font-weight:700; }
.quick-grid .ui-icon { color:#4f46e5; }
.quick-grid a:hover { background:#eef2ff; transform:translateY(-3px); }
.activity-detail { margin:24px 0; }
.activity-controls button[aria-pressed="true"] { background:#eef2ff; color:#4338ca; border-color:#a5b4fc; }
.activity-bar { background:linear-gradient(#818cf8,#4f46e5); }
.activity-chart { border-color:#e2e8f0; }
.table-wrap { border:1px solid #e2e8f0; border-radius:16px; max-height:65vh; overflow:auto; scrollbar-width:thin; scrollbar-color:#cbd5e1 transparent; }
th { position:sticky; top:0; z-index:1; background:#f8fafc; color:#475569; font-weight:700; }
th,td { border-color:#f1f5f9; padding:12px 14px; }
tbody tr { transition:background .2s; }
tbody tr:hover { background:#f8fafc; }
td:first-child a { display:block; max-width:430px; overflow:hidden; text-overflow:ellipsis; }
td a:hover { color:#4f46e5; text-decoration:underline; }
.badge { background:#eef2ff; color:#4338ca; border-radius:8px; font-weight:600; }
.warning { background:#fffbeb; border-color:#fde68a; color:#92400e; }
.error { background:#fff1f2; color:#9f1239; border-color:#fecdd3; }
.success { color:#047857; }
.empty { color:#64748b; }
.empty .empty-icon { color:#a5b4fc; }
.upload { background:#eef2ff66; border-color:#a5b4fc; }
.segment { background:#fff; border-color:#e2e8f0; border-radius:20px; }
.segment pre { color:#475569; }
.footer { color:#64748b; border-color:#e2e8f0; }
#toast { background:#312e81; color:#fff; box-shadow:0 8px 25px #312e8130; }
.hero em,.flow b { color:#4f46e5; }
.hero p { color:#64748b; }
.collection-toolbar { display:flex; align-items:end; justify-content:space-between; flex-wrap:wrap; gap:18px; margin-bottom:18px; }
.collection-toolbar form { display:flex; align-items:end; flex:1; gap:8px; flex-wrap:wrap; }
.collection-toolbar .field { flex:1; min-width:180px; }
.collection-meta { font-size:12px; color:#475569; font-variant-numeric:tabular-nums; }
.collection-meta span { display:block; color:#64748b; font-size:10px; }
.collection > .actions { padding-top:16px; justify-content:end; }
.filter-tabs { display:flex; gap:7px; flex-wrap:wrap; margin-bottom:18px; }
.filter-tabs a { padding:8px 12px; border:1px solid #e2e8f0; border-radius:12px; font-size:11px; font-weight:600; color:#64748b; }
.filter-tabs a[aria-current] { background:#eef2ff; color:#4338ca; border-color:#c7d2fe; }
.filter-tabs a:hover { background:#f1f5f9; transform:translateY(-1px); }
.policy-details,.add-entry { margin-bottom:16px; border-radius:20px; padding:15px 22px; }
summary { cursor:pointer; color:#475569; font-size:13px; }
summary:hover { color:#4f46e5; }
summary:active { transform:scale(.99); }
details[open] > summary { margin-bottom:16px; }
.policy-details .card { border:0; padding:0; box-shadow:none; }
.term-content { max-width:420px; }
.term-content summary { white-space:nowrap; text-overflow:ellipsis; overflow:hidden; max-width:360px; font-size:12px; }
.term-content summary::before { content:"+"; margin-inline-end:8px; color:#4f46e5; }
.term-content[open] summary::before { content:"−"; }
.term-content p { white-space:pre-wrap; overflow-wrap:anywhere; min-width:150px; }
@media (min-width:1500px) { .kpi-card { padding:24px; } }
@media (max-width:1250px) { .shell { grid-template-columns:240px minmax(0,1fr); } .sidebar { padding:22px 16px; } .main { padding:26px 22px; } .topbar { padding:14px 22px; } .kpi-grid.stats { gap:10px; } .kpi-card { padding:15px; } .trend-panel { grid-column:span 7; } .distribution-panel { grid-column:span 5; } .recent-panel { grid-column:span 12; } .recent-timeline { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; } .account-name { max-width:110px; } }
@media (max-width:1000px) { .stats.kpi-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } .header-search { display:none; } .utility-grid { grid-template-columns:1fr; } .quick-grid { grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media (max-width:760px) {
 .shell { display:block; } .sidebar { width:280px; background:#0f172a; z-index:50; }
 .topbar { height:auto; min-height:76px; padding:10px 12px; gap:8px; }
 .header-search { display:none; } .topbar .tools { gap:6px; } .topbar select { max-width:83px; padding:8px 4px; font-size:11px; }
 .account-chip { max-width:148px; gap:6px; padding:3px; } .account-name { font-size:10px; max-width:95px; } .account-name small { font-size:8px; } .avatar { width:30px; height:30px; font-size:14px; }
 .sound-toggle { min-width:36px; padding:8px; } .main { padding:22px 16px; } .heading h1 { font-size:22px; }
 .stats.kpi-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; } .kpi-card { padding:18px; border-radius:24px; } .stat-value { font-size:28px; }
 .analytics-grid { gap:16px; } .trend-panel,.distribution-panel,.recent-panel { grid-column:span 12; } .card { border-radius:24px; padding:20px; }
 .recent-timeline { display:block; } .promo-banner { padding:24px; border-radius:28px; gap:18px; } .quota-glass { padding:16px; min-width:110px; }
 .promo-banner h2 { font-size:17px; } .promo-banner h2 strong { font-size:27px; } .quick-grid { grid-template-columns:1fr 1fr; }
 .collection-toolbar .field { flex-basis:100%; } .term-content summary { max-width:220px; } td:first-child a { max-width:230px; }
}
@media (max-width:380px) { .account-name { max-width:66px; } .account-name small { display:none; } .promo-banner { flex-direction:column; align-items:stretch; } .quota-glass { flex-basis:auto; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { transition:none!important; animation:none!important; scroll-behavior:auto!important; } }
/* Pressed states intentionally follow hover states so a held pointer stays distinct. */
.kpi-card:active,.quick-grid a:active,.filter-tabs a:active { transform:scale(.97); box-shadow:inset 0 2px 5px #0f172a13; }
.nav a:active .ui-icon,.quick-grid a:active .ui-icon,.kpi-card:active .ui-icon,button:active .ui-icon { transform:scale(.88) rotate(7deg); }
@media (prefers-reduced-motion:reduce) { .kpi-card:hover,.kpi-card:active,.quick-grid a:hover,.quick-grid a:active,.nav a:hover,.nav a:active,button:hover,button:active,.button:hover,.button:active { transform:none; } }
/* Persistent day/night palette, including navigation, editor and utility views. */
:root { --surface:#fff; --surface-soft:#f8fafc; --surface-hover:#eef2ff; --line:#e2e8f0; --ink:#0f172a; --muted:#64748b; --accent:#4f46e5; --topbar:#ffffffed; --nav-surface:#f1f5fb; --shadow:0 4px 12px #0f172a08; }
:root[data-theme="dark"] { color-scheme:dark; --workspace:#0c1424; --surface:#152136; --surface-soft:#101b2e; --surface-hover:#253152; --line:#2b3b55; --ink:#e6edf7; --muted:#a5b6ce; --accent:#aaa5ff; --topbar:#111c2ef2; --nav-surface:#121d30; --shadow:0 8px 20px #00000018; }
body { background:var(--workspace); color:var(--ink); }
body,.sidebar,.topbar,.card,.segment,input,textarea,select,.table-wrap,th,td,.footer { transition:background-color .32s var(--ease),color .32s var(--ease),border-color .32s var(--ease),box-shadow .32s var(--ease); }
.sidebar { background:var(--nav-surface); border-color:var(--line); color:var(--ink); }
.nav-label,.nav a::after { color:var(--muted); }
.nav a { color:var(--muted); }
.nav a:hover { background:var(--surface-hover); color:var(--accent); }
.nav a:not(.active):nth-of-type(3n+1) .ui-icon { color:#6366f1; }
.nav a:not(.active):nth-of-type(3n+2) .ui-icon { color:#0891b2; }
.nav a:not(.active):nth-of-type(3n) .ui-icon { color:#a855f7; }
.nav a.active,.nav a.active:hover { background:#4f46e5; color:#fff; }
.nav a.active .ui-icon { color:#fff; }
.sidebar .bottom { color:var(--muted); }
.sidebar .bottom p { color:var(--muted); background:var(--surface); border-color:var(--line); }
.sidebar button { color:var(--ink); background:var(--surface); border-color:var(--line); }
.brand { position:relative; isolation:isolate; display:block; overflow:hidden; border-radius:18px; border:1px solid #cbd5e199; background:#f8fafc; max-width:260px; min-height:0; box-shadow:0 5px 18px #1e3a5f0d; transition:transform .3s var(--ease),box-shadow .3s var(--ease); }
.brand img { display:block; width:100%; height:auto; aspect-ratio:1778/592; object-fit:contain; padding:0; border-radius:inherit; background:transparent; }
.brand::after { content:""; position:absolute; inset:-30% auto -30% -70%; width:38%; background:linear-gradient(90deg,transparent,#ffffff70,transparent); transform:skewX(-20deg); animation:logo-sheen 9s ease-in-out infinite; pointer-events:none; }
@keyframes logo-sheen { 0%,70% { left:-70%; opacity:0; } 74% { opacity:.65; } 94%,100% { left:135%; opacity:0; } }
.brand:hover { transform:translateY(-2px); box-shadow:0 9px 25px #6366f126; }
.sidebar .brand { width:100%; margin:0 auto 6px; }
.landing header > .brand { flex:0 1 260px; }
.topbar { background:var(--topbar); border-color:var(--line); }
.header-search,.topbar select { background:var(--surface-soft); border-color:var(--line); }
.header-search button,.header-search input { color:var(--muted); }
.account-name { color:var(--ink); }
.account-name small,.muted,.stat-label,.field span,.check,.eyebrow,.collection-meta,.collection-meta span,.kpi-caption,.chart-caption,.donut span,.recent-timeline small,.footer { color:var(--muted); }
.card,.segment { background:var(--surface); border-color:var(--line); box-shadow:var(--shadow); }
.stat-value,.donut strong,.segment pre { color:var(--ink); }
button,.button { background:var(--surface-soft); color:var(--ink); border-color:var(--line); }
.primary,.gold,button.primary,.button.primary { background:#4f46e5; color:#fff!important; }
input,textarea,select,select option { background:var(--surface-soft); color:var(--ink); border-color:var(--line); }
input::placeholder { color:var(--muted); }
input:focus,textarea:focus,select:focus { border-color:var(--accent); }
.header-search input { background:transparent; border:0; }
input[type="file"]::file-selector-button { border:1px solid var(--line); background:var(--surface-hover); color:var(--ink); border-radius:9px; padding:7px 12px; font:inherit; margin-inline-end:10px; cursor:pointer; }
.table-wrap { border-color:var(--line); scrollbar-color:var(--muted) transparent; }
th { background:var(--surface-soft); color:var(--ink); }
th,td { border-color:var(--line); }
tbody tr:hover { background:var(--surface-soft); }
.filter-tabs a { border-color:var(--line); color:var(--muted); }
.filter-tabs a[aria-current],.filter-tabs a:hover,.activity-controls button[aria-pressed="true"] { background:var(--surface-hover); color:var(--accent); border-color:var(--line); }
.quick-grid a { background:var(--surface-soft); border-color:var(--line); }
.quick-grid a:hover { background:var(--surface-hover); }
.quick-grid .ui-icon,.section-title a,.chart-caption a,td a:hover,summary:hover,.chart-legend a:hover,.hero em,.flow b { color:var(--accent); }
summary,.empty,.hero p { color:var(--muted); }
.chart-grid { stroke:var(--line); }
.trend-line { stroke:var(--accent); }
.trend-chart circle { fill:var(--surface); stroke:var(--accent); }
.trend-chart circle:hover,.trend-chart circle:focus { fill:var(--surface-hover); }
.donut svg > circle:first-child { stroke:var(--line); }
.activity-chart,.footer { border-color:var(--line); }
.promo-banner { background:linear-gradient(135deg,#4f46e5,#3730a3); color:#fff; border:0; }
.promo-banner .eyebrow { color:#e0e7ff; }
.promo-banner .button { background:#fff; color:#4338ca; }
.theme-toggle,.sound-toggle { position:relative; display:grid; place-items:center; flex-shrink:0; width:44px; height:44px; padding:0; background:var(--surface-soft); color:var(--accent); border:1px solid var(--line); border-radius:15px; }
.sound-toggle[aria-pressed="true"] { background:var(--surface-hover); color:var(--accent); }
.sound-toggle[aria-pressed="false"] { color:var(--muted); }
.theme-toggle > span { grid-area:1 / 1; display:grid; place-items:center; transition:transform .45s var(--ease),opacity .3s var(--ease); }
.theme-sun { color:#d97706; transform:rotate(0) scale(1); opacity:1; }
.theme-moon { transform:rotate(-100deg) scale(.2); opacity:0; color:#c4b5fd; }
[data-theme="dark"] .theme-sun { transform:rotate(100deg) scale(.2); opacity:0; }
[data-theme="dark"] .theme-moon { transform:rotate(0) scale(1); opacity:1; }
[data-theme="dark"] .avatar { background:#292c50; border-color:#454877; color:#c7c4ff; }
[data-theme="dark"] .kpi-card { --tone:#a5a0ff; --tint:#292c50; }
[data-theme="dark"] .tone-blue { --tone:#93c5fd; --tint:#203653; }
[data-theme="dark"] .tone-amber { --tone:#fcd34d; --tint:#40351f; }
[data-theme="dark"] .tone-rose { --tone:#fda4af; --tint:#46253a; }
[data-theme="dark"] .tone-emerald { --tone:#6ee7b7; --tint:#183d36; }
[data-theme="dark"] .badge { background:#292c50; color:#c7c4ff; }
[data-theme="dark"] .warning { background:#352d1b; border-color:#6a5528; color:#fde68a; }
[data-theme="dark"] .error { background:#3e2432; border-color:#704051; color:#fecdd3; }
[data-theme="dark"] .success { color:#6ee7b7; }
[data-theme="dark"] .upload { background:#252b49; border-color:#7774bf; }
[data-theme="dark"] .recent-timeline li { border-color:#454877; }
[data-theme="dark"] .recent-timeline li::before { box-shadow:0 0 0 3px #292c50; }
[data-theme="dark"] .policy-details .card { box-shadow:none; }
[data-theme="dark"] .nav a:not(.active):nth-of-type(3n+1) .ui-icon { color:#aaa5ff; }
[data-theme="dark"] .nav a:not(.active):nth-of-type(3n+2) .ui-icon { color:#67e8f9; }
[data-theme="dark"] .nav a:not(.active):nth-of-type(3n) .ui-icon { color:#d8b4fe; }
@media (max-width:760px) {
 .sidebar { background:var(--nav-surface); }
 .topbar .tools { gap:5px; } .theme-toggle,.sound-toggle { width:36px; height:40px; min-height:40px; border-radius:12px; }
 .topbar .account-chip { max-width:128px; } .topbar .account-name { max-width:86px; }
 .landing header { flex-wrap:wrap; gap:16px; } .landing header > .brand { flex-basis:230px; }
 .landing header .tools { flex-wrap:wrap; }
}
@media (max-width:380px) { .topbar .account-name { max-width:64px; } .topbar select { max-width:72px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; } .brand:hover { transform:none; } }
.sidebar .brand { flex-shrink:0; }

/* Account menu, professional status and focused preview. */
.badge.professional-verified{display:inline-flex;align-items:center;gap:10px;padding:12px 20px;font-size:18px;font-weight:800;background:#ecfdf5;color:#047857;border:1px solid #a7f3d0;margin-block-end:18px;border-radius:16px;box-shadow:0 5px 20px #10b98112}
.professional-verified svg{width:30px;height:30px;stroke-width:2.2}
[data-theme="dark"] .badge.professional-verified{background:#073b32;color:#6ee7b7;border-color:#14634e}
.account-chip{position:relative;cursor:default}.account-popover{position:relative}.account-chip button.avatar{width:40px;height:40px;min-width:40px;min-height:40px;max-width:40px;max-height:40px;aspect-ratio:1;flex:0 0 40px;padding:0;overflow:hidden;cursor:pointer;border-radius:50%;line-height:1}.avatar img{display:block;width:100%;height:100%;aspect-ratio:1;object-fit:cover;object-position:center}
@media(max-width:480px){.topbar .account-name{display:none}.topbar .account-chip{max-width:none;flex:none}}
.account-panel{position:absolute;inset-inline-end:0;top:calc(100% + 12px);z-index:90;width:min(310px,85vw);padding:12px;border-radius:22px;background:#fff;color:#334155;border:1px solid #e2e8f0;box-shadow:0 18px 50px #0f172a24;text-align:start;animation:account-in .16s ease-out}
.account-panel[hidden]{display:none}.account-panel>a,.account-panel>button,.account-panel summary{display:flex;align-items:center;gap:10px;width:100%;padding:12px;border-radius:12px;font-size:14px;text-decoration:none;color:inherit}.account-panel svg{width:20px;height:20px}.account-panel form{display:grid;gap:10px;padding:10px}.account-panel input{max-width:100%;font-size:12px}.account-panel label{font-size:12px}.account-panel small{display:block;padding:12px;background:#eef2ff;color:#4f46e5;border-radius:12px;margin-top:8px}.account-panel p{font-size:12px;margin:0}
[data-theme="dark"] .account-panel{background:#192438;border-color:#334155;color:#e2e8f0}[data-theme="dark"] .account-panel small{background:#272850;color:#c7d2fe}
.template-preview{white-space:pre-wrap;overflow-wrap:anywhere;max-height:650px;overflow:auto}.template-preview[hidden]{display:none}
.brand{isolation:isolate;overflow:visible!important}.brand img{position:relative;z-index:1;border-radius:inherit}.brand::before{content:"";position:absolute;inset:8px;border-radius:inherit;background:#d6ae46;filter:blur(14px);opacity:.24;z-index:-1;animation:logo-gold 5s ease-in-out infinite;pointer-events:none}
@keyframes logo-gold{50%{opacity:.48;transform:scale(1.04)}}@keyframes account-in{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}
.route-loading{cursor:progress}.route-loading .main{opacity:.65;pointer-events:none}.main{transition:opacity .12s ease}
@media(prefers-reduced-motion:reduce){.brand::before,.account-panel{animation:none}.main{transition:none}}
.account-chip:active{transform:none;box-shadow:none}
@media(max-width:700px){.account-panel{position:fixed;inset-inline:12px;top:72px;width:auto;max-height:calc(100dvh - 90px);overflow:auto}}

/* Transparent logo: glow follows the PNG alpha, never the rectangular container. */
.brand,.brand:hover{background:transparent!important;border:0;box-shadow:none;border-radius:0}
.brand::before,.brand::after{content:none;animation:none}
.brand img{border-radius:0;filter:drop-shadow(0 0 1px #f6cd62) drop-shadow(0 0 3px #c99632b3);animation:logo-edge-glow 4s ease-in-out infinite}
[data-theme="dark"] .brand img{filter:drop-shadow(0 0 1px #ffe6a0) drop-shadow(0 0 4px #efb943);animation-name:logo-edge-night}
@keyframes logo-edge-glow{50%{filter:drop-shadow(0 0 1px #ffe19b) drop-shadow(0 0 4px #d6a43bd9)}}
@keyframes logo-edge-night{50%{filter:drop-shadow(0 0 2px #ffe6a0) drop-shadow(0 0 5px #efb943)}}
.route-skeleton{display:grid;gap:18px;grid-template-columns:repeat(3,minmax(0,1fr));padding-block:20px}
.route-skeleton span{height:160px;border-radius:24px;background:var(--surface);border:1px solid var(--line);animation:route-pulse 1s ease-in-out infinite alternate}
.route-loading .main{opacity:1}
@keyframes route-pulse{to{opacity:.5}}
@media(max-width:700px){.route-skeleton{grid-template-columns:1fr}.route-skeleton span{height:100px}}
@media(prefers-reduced-motion:reduce){.brand img,.route-skeleton span{animation:none}}
/* Compact document information, retaining the shared light/dark palette. */
.retention-compact.card { padding:14px 20px; border-radius:18px; margin-top:28px; font-size:.82rem; }
.retention-compact summary { display:flex; align-items:center; gap:10px; cursor:pointer; font-weight:700; }
.retention-compact summary svg { width:18px; height:18px; }
.retention-compact p { margin:10px 0; line-height:1.8; }
.retention-compact .warning { padding:10px 14px; }
.retention-dates { font-size:.75rem; padding-inline:12px; }
.document-state-row { display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; margin:22px 0 14px; }
.client-project-link { display:inline-flex; align-items:center; gap:10px; }
.client-project-link svg,.document-facts svg { width:20px; height:20px; }
.document-state { --state:#6366f1; display:flex; align-items:center; gap:12px; padding:16px 22px; border:1px solid color-mix(in srgb,var(--state) 35%,transparent); background:color-mix(in srgb,var(--state) 10%,transparent); color:var(--state); border-radius:20px; transition:transform .2s,box-shadow .2s; }
.document-state svg { width:28px;height:28px; }
.document-state .badge { color:inherit; background:transparent; font-size:1rem; padding:0; }
.document-state:hover,.document-state:focus-visible { transform:translateY(-2px); box-shadow:0 5px 18px color-mix(in srgb,var(--state) 20%,transparent); }
.document-state:active { transform:scale(.98); }
.state-completed,.state-approved { --state:#059669; }
.state-failed { --state:#f43f5e; }
.state-review_required { --state:#e11d48; }
.state-translating,.state-analyzing,.state-exporting,.state-queued { --state:#d97706; }
.document-facts { display:flex; flex-wrap:wrap; gap:12px; margin:14px 0 24px; }
.document-facts>span { display:inline-flex;align-items:center;gap:10px;padding:10px 16px;border-radius:14px;background:color-mix(in srgb,#6366f1 7%,transparent); }
.passport-upload { margin-top:18px; border:1px dashed #94a3b866; border-radius:16px; padding:14px; text-align:start; }
.passport-upload summary { display:flex;align-items:center;gap:8px;cursor:pointer;font-weight:700;font-size:.9rem; }
.passport-upload summary svg {width:20px;height:20px;}
.passport-upload .muted {font-size:.8rem;line-height:1.7;}
.passport-person {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;border:1px solid #94a3b844;border-radius:14px;padding:14px;margin:14px 0;}
.passport-person legend {font-size:.8rem;padding:0 8px;}
@media(min-width:1251px){.stats.kpi-grid{grid-template-columns:repeat(6,minmax(0,1fr));}}
@media(max-width:700px){.passport-person{grid-template-columns:1fr;}.document-state{padding:12px 16px;}.document-facts{font-size:.85rem;}}
@media(prefers-reduced-motion:reduce){.document-state{transition:none;transform:none!important;}}
.action-feedback { display:flex; align-items:center; gap:10px; flex:1 1 280px; padding:12px 16px; border-radius:14px; font-size:.9rem; line-height:1.8; background:color-mix(in srgb,#6366f1 9%,transparent); color:inherit; margin:10px 0; }
.action-feedback[hidden] { display:none; }
.action-feedback.busy:before { content:''; flex:0 0 18px; width:18px;height:18px;border:2px solid #6366f144;border-top-color:#6366f1;border-radius:50%;animation:pro-action-spin .9s linear infinite; }
.action-feedback.error { border:1px solid #f43f5e66; background:color-mix(in srgb,#f43f5e 8%,transparent); color:#be123c; }
[data-theme="dark"] .action-feedback.error { color:#fda4af; }
.action-feedback:focus { outline:2px solid #818cf8; outline-offset:3px; }
.passport-person { grid-template-columns:repeat(2,minmax(0,1fr)); }
.passport-upload .check { display:flex; align-items:center; gap:10px; }
.passport-upload .check input { width:20px; height:20px; flex:0 0 20px; }
@keyframes pro-action-spin {to{transform:rotate(360deg)}}
@media(max-width:600px){.passport-person{grid-template-columns:1fr;}}
@media(prefers-reduced-motion:reduce){.action-feedback.busy:before{animation:none;}}
.upload>.check { display:flex; align-items:center; justify-content:flex-start; gap:10px; text-align:start; margin-block:18px; }
.upload>.check input {width:20px;height:20px;flex:0 0 20px;}
.form-grid>.action-feedback {grid-column:1/-1;}

/* Document badges share the dashboard’s semantic palette. */
.badge.state-review_required,.badge.state-failed { color:#e11d48;background:#fff1f2; }
.badge.state-translating,.badge.state-analyzing,.badge.state-exporting,.badge.state-queued { color:#d97706;background:#fffbeb; }
.badge.state-completed,.badge.state-approved { color:#059669;background:#ecfdf5; }
[data-theme="dark"] .badge.state-review_required,[data-theme="dark"] .badge.state-failed { color:#fda4af;background:#3b1927; }
[data-theme="dark"] .badge.state-translating,[data-theme="dark"] .badge.state-analyzing,[data-theme="dark"] .badge.state-exporting,[data-theme="dark"] .badge.state-queued { color:#fcd34d;background:#362b17; }
[data-theme="dark"] .badge.state-completed,[data-theme="dark"] .badge.state-approved { color:#6ee7b7;background:#13352e; }

[data-theme="dark"] .document-state.state-review_required { --state:#fda4af; }
[data-theme="dark"] .document-state.state-completed,[data-theme="dark"] .document-state.state-approved { --state:#6ee7b7; }
[data-theme="dark"] .document-state.state-translating,[data-theme="dark"] .document-state.state-analyzing,[data-theme="dark"] .document-state.state-exporting,[data-theme="dark"] .document-state.state-queued { --state:#fcd34d; }

.review-notes { padding:14px 18px; margin-block:16px; text-align:start; }
.review-notes ul { margin:6px 0 0; padding-inline-start:20px; }
.review-notes li { margin-block:4px; line-height:1.6; }

/* Subscription catalog: scoped to preserve the rest of the workspace. */
.subscription-overview { margin-block:24px 36px; padding:28px; background:linear-gradient(125deg,var(--surface),var(--surface-soft)); }
.subscription-overview-top { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.subscription-overview h2 { margin:6px 0 0; font-size:28px; text-transform:capitalize; }
.subscription-facts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; padding-block:22px; margin-block:12px; border-block:1px solid var(--line); }
.subscription-facts > div { display:grid; gap:6px; min-width:0; }
.subscription-facts span { color:var(--muted); font-size:13px; }
.subscription-facts strong { font-size:18px; overflow-wrap:anywhere; }
.subscription-facts small { font-size:12px; color:var(--muted); font-weight:400; }
.subscription-overview .field { margin:0; display:flex; align-items:center; gap:12px; }
.subscription-overview input[type="checkbox"] { width:18px; min-height:18px; accent-color:var(--accent); }
.subscription-overview .muted { margin-block:8px 0; font-size:12px; }
.subscription-catalog { margin-block:36px 44px; }
.catalog-heading { display:flex; justify-content:space-between; align-items:end; gap:24px; margin-bottom:24px; }
.catalog-heading h2 { margin:8px 0 0; font-size:clamp(23px,2.2vw,30px); line-height:1.5; }
.catalog-heading p { max-width:370px; margin:0; font-size:14px; }
.plan-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; align-items:stretch; }
.plan-card { position:relative; display:flex; flex-direction:column; min-width:0; padding:26px; border:1px solid var(--line); border-radius:24px; background:var(--surface); color:var(--ink); box-shadow:var(--shadow); }
.plan-card-top { display:flex; justify-content:space-between; align-items:center; gap:8px; min-height:42px; }
.plan-symbol { display:grid; place-items:center; width:42px; height:42px; border-radius:14px; background:var(--surface-hover); color:var(--accent); font-family:Arial,sans-serif; font-size:25px; }
.plan-recommendation { display:inline-block; padding:4px 10px; border:1px solid #ffffff4d; border-radius:99px; font-size:11px; font-weight:600; }
.plan-card h3 { margin:22px 0 8px; font-size:23px; line-height:1.5; }
.plan-description { margin:0; min-height:3.6em; color:var(--muted); font-size:13px; }
.plan-price { margin:24px 0; font-size:clamp(23px,2.3vw,31px); font-weight:700; line-height:1.6; letter-spacing:-.5px; overflow-wrap:anywhere; }
.plan-benefits { display:grid; gap:14px; list-style:none; padding:20px 0; margin:0 0 24px; border-top:1px solid var(--line); font-size:13px; }
.plan-benefits li { display:flex; align-items:start; gap:10px; }
.plan-benefits li > span:first-child { display:grid; place-items:center; flex-shrink:0; width:22px; height:22px; border-radius:50%; background:var(--surface-hover); color:var(--accent); line-height:1; }
.plan-card .plan-action { display:flex; justify-content:center; align-items:center; gap:12px; width:100%; min-height:48px; margin-top:auto; padding:12px 16px; border:1px solid var(--line); border-radius:14px; background:var(--surface-soft); color:var(--ink); font-weight:600; font-size:13px; white-space:normal; }
.plan-card .plan-action:hover { background:var(--surface-hover); border-color:var(--accent); }
.plan-card.plan-featured { background:linear-gradient(150deg,#6555df,#4434ae); border-color:#6957e5; color:#fff; box-shadow:0 16px 32px #4f46e526; }
.plan-featured .plan-description { color:#e7e3ff; }
.plan-featured .plan-symbol,.plan-featured .plan-benefits li > span:first-child { background:#ffffff20; color:#fff; }
.plan-featured .plan-benefits { border-color:#ffffff36; }
.plan-featured .plan-action { background:#fff; border-color:#fff; color:#4434ae; }
.plan-featured .plan-action:hover { background:#eeeaff; border-color:#eeeaff; }
.extra-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
.extra-grid .plan-card { padding:22px; }
.extra-grid .plan-card h3 { font-size:20px; }
.extra-grid .plan-price { font-size:25px; }
@media (max-width:1200px) { .extra-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .plan-card { padding:22px; } }
@media (max-width:1000px) and (min-width:761px) { .plan-grid:not(.extra-grid) { grid-template-columns:1fr; } .plan-description { min-height:0; } }
@media (max-width:760px) { .catalog-heading { display:block; } .catalog-heading p { margin-top:10px; } .plan-grid { grid-template-columns:1fr; gap:18px; } .plan-card,.extra-grid .plan-card { padding:24px; } .plan-description { min-height:0; } .plan-price,.extra-grid .plan-price { font-size:30px; } .subscription-overview { padding:22px; } .subscription-facts { grid-template-columns:1fr; gap:18px; } }

.billing-switch{display:inline-flex;gap:4px;padding:5px;background:var(--surface-soft);border:1px solid var(--line);border-radius:16px;margin-block:8px}
.billing-switch button{min-width:90px;min-height:44px;border:0;border-radius:12px;background:transparent;color:var(--muted)}
.billing-switch button[aria-pressed="true"]{background:var(--surface);color:var(--accent);box-shadow:var(--shadow);font-weight:700}
.plan-benefits .feature-available>span:first-child{background:#15803d12;color:#15803d}
.plan-benefits .feature-unavailable>span:first-child{background:#be123c10;color:#be123c}
.plan-featured .plan-benefits .feature-available>span:first-child{background:#ffffff20;color:#bbf7d0}
.plan-featured .plan-benefits .feature-unavailable>span:first-child{background:#ffffff20;color:#fecdd3}
[data-theme="dark"] .plan-benefits .feature-available>span:first-child{color:#86efac}
[data-theme="dark"] .plan-benefits .feature-unavailable>span:first-child{color:#fda4af}
.plan-billing-note{margin:-12px 0 20px;font-size:12px;color:var(--muted)}
.plan-featured .plan-billing-note{color:#e7e3ff}

.smart-template-row{padding-block:20px;border-bottom:1px solid var(--line)}
.smart-template-row .actions{display:flex;flex-wrap:wrap;gap:10px}
#smart-detail .check{display:flex;align-items:start;gap:10px;margin-block:15px}
#smart-detail input[type="checkbox"]{flex:0 0 18px;width:18px;min-height:18px}
#smart-detail .template-preview{white-space:pre-wrap;overflow-wrap:anywhere;max-height:420px;overflow:auto}

.advanced-finding{border-block-start:1px solid var(--line);padding-block:20px}.advanced-finding dd{margin-inline:0;white-space:pre-wrap;overflow-wrap:anywhere}.advanced-finding dt{font-weight:700;color:var(--muted)}
.advanced-finding .actions{display:flex;flex-wrap:wrap;gap:10px}.advanced-finding textarea{min-height:100px;max-width:100%;width:100%}.advanced-finding{scroll-margin-top:90px}

.plan-card .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Smart uploads retain the existing card palette and controls. */
.smart-upload-zone{min-width:0;border:1px solid var(--line);border-radius:16px;padding:18px;margin:0;background:var(--surface,transparent)}
.smart-upload-zone legend{font-weight:700;padding-inline:8px}.required-tag{font-size:.8em;color:var(--muted);font-weight:400}
.smart-native-file{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.smart-upload-zone .actions,.smart-upload-item .actions{display:flex;flex-wrap:wrap;gap:8px}.smart-upload-zone [hidden],.smart-create-actions [hidden]{display:none!important}
.smart-upload-list{list-style:none;padding:0;margin:16px 0 0;display:grid;gap:12px}.smart-upload-item{display:flex;gap:12px;align-items:start;border:1px solid var(--line);padding:12px;border-radius:12px;min-width:0}
.smart-upload-thumb{inline-size:78px;block-size:88px;object-fit:contain;flex:0 0 78px;border-radius:8px;background:#ffffff0a}.smart-upload-format{display:grid;place-items:center;inline-size:78px;block-size:88px;border:1px solid var(--line);border-radius:8px}
.smart-upload-info{min-width:0;flex:1}.smart-upload-info strong,.smart-upload-info>span{display:block;overflow-wrap:anywhere;margin-block-end:8px}.smart-upload-info>span{color:var(--muted);font-size:.85em}
.smart-upload-item button{min-height:38px;font-size:.85em;padding:8px 10px}.smart-selected-file{overflow-wrap:anywhere}.smart-field-error:empty{display:none}.smart-field-error{color:var(--error,#ffb5b5);margin-block:12px 0}
.smart-create-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}.smart-create-actions #smart-upload-status{flex:1 0 100%;margin:0;overflow-wrap:anywhere;line-height:1.8}.smart-create-actions progress{max-width:100%;accent-color:var(--gold,#d4b56d)}
@media(max-width:520px){.smart-upload-zone{padding:13px}.smart-upload-item{flex-wrap:wrap}.smart-upload-info{flex-basis:60%}.smart-create-actions>[type=submit]{width:100%;min-height:46px}.smart-original-actions button{min-height:44px}.smart-upload-zone legend{font-size:.95em}}
.smart-docx-viewer{width:100%;height:650px;max-height:75vh;border:1px solid var(--line);border-radius:12px;background:#fff}.smart-field-review{margin-block:18px;border:1px solid var(--line);border-radius:12px;padding:14px}.smart-field-review input,.smart-field-review select{width:100%;box-sizing:border-box}

/* Smart-template workspace: selected task first, compact library beneath. */
.smart-library .smart-template-row{padding-block:14px}
.smart-template-row h3{margin:0 0 6px;font-size:1.05rem}
.smart-template-row p{margin:0 0 12px;font-size:.875rem;color:var(--muted)}
.smart-library.has-selection .smart-template-row:not(.is-selected){display:flex;align-items:center;justify-content:space-between;gap:16px}
.smart-library.has-selection .smart-template-row:not(.is-selected) .actions{gap:6px}
.smart-library.has-selection .smart-template-row:not(.is-selected) button{padding:8px 12px;font-size:.8rem}
.smart-template-row.is-selected{border-bottom:0}
.smart-template-row.is-selected h3{font-size:1.2rem}
.smart-workspace{padding:20px 0;border-block:1px solid var(--line);scroll-margin-top:100px}
.smart-workspace[hidden]{display:none}
.smart-new-source{padding:18px;border:1px solid var(--line);border-radius:18px;background:var(--surface-soft,#f8f9fc);margin-bottom:22px}
.smart-new-source h3{margin:0 0 10px;font-size:1.15rem}
.smart-new-source>p,.smart-workspace>p{font-size:.875rem;margin-block:8px 16px}
.smart-new-source .smart-upload-zone{padding:16px}
.smart-extract-actions{margin-block:16px;display:flex;gap:10px;flex-wrap:wrap}
#smart-values{scroll-margin-top:100px}
#smart-values .form-grid{padding:18px;border:1px solid var(--line);border-radius:16px;gap:16px;margin-block:20px}
.smart-export-actions{display:grid;gap:14px;border-top:1px solid var(--line);padding-top:18px}
.smart-export-actions button{justify-self:start}
.smart-fair-use{font-size:.8rem;line-height:1.6;margin:14px 4px}
.smart-translate-choice{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:end}
.smart-translate-choice h2{grid-column:1/-1;margin:0}
@media(max-width:700px){.smart-library.has-selection .smart-template-row:not(.is-selected){display:block}.smart-new-source{padding:12px}.smart-translate-choice{grid-template-columns:1fr}.smart-template-row .actions button{flex:1 1 auto}}

/* Compact working forms and accessible shared mode switches. */
.smart-builder{max-width:1040px;margin-inline-start:0}
.smart-builder .form-grid{gap:14px 18px;margin-top:18px}
.smart-builder .form-grid>label.full:first-child{grid-column:1/-1;max-width:480px;width:100%}
.smart-builder .smart-upload-zone{grid-column:auto;padding:16px;margin:0;min-width:0}
.smart-builder textarea{min-height:64px;height:64px}
.smart-builder .smart-create-actions{gap:10px}
.smart-library{max-width:1120px}
.smart-library>.section-title h2{font-size:1.1rem}
.smart-library .smart-template-row{padding-block:12px}
.smart-library .smart-template-row .actions{gap:7px}
.smart-library .smart-template-row button{padding:9px 13px;font-size:.85rem}
.smart-library .smart-workspace{max-width:900px}
.translate-intake{max-width:1040px}
.translate-intake .form-grid{gap:16px}
.translate-intake .upload{padding:20px}
.translate-intake .form-grid>label.full{grid-column:auto}
.document-template-choice{border:1px solid var(--line);box-shadow:none;max-width:760px;margin-top:18px;padding:16px}
.document-template-choice h3{margin:0}
.document-template-choice p{font-size:.85rem;margin-block:6px 14px}
.document-template-choice .actions{display:flex;gap:12px;align-items:end;flex-wrap:wrap}
.document-template-choice .field{flex:1;min-width:180px}
.pro-toggle-control{display:flex;align-items:center;gap:12px;flex-wrap:wrap;width:fit-content;margin-block:14px}
.pro-toggle-control>span{font-size:.9rem}
.pro-toggle{--toggle-shift:0px;direction:ltr!important;width:60px!important;height:34px!important;min-height:34px!important;min-width:60px;display:block!important;padding:3px!important;border:0!important;border-radius:24px!important;background:#94a3b8!important;box-shadow:inset 0 1px 3px #0002;flex-shrink:0}
.pro-toggle[aria-checked=true]{--toggle-shift:26px;background:#4f46e5!important}
.pro-toggle-thumb{display:block;width:28px;height:28px;background:white;border-radius:50%;transform:translateX(var(--toggle-shift));transition:transform .2s ease;box-shadow:0 1px 4px #0003}
.pro-toggle:focus-visible{outline:3px solid var(--accent);outline-offset:4px}
.pro-toggle:disabled{opacity:.45;cursor:not-allowed}
.translation-mode-control{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:18px}
.translation-mode-control p{font-size:.9rem;max-width:470px}
@media(max-width:650px){.smart-builder .smart-upload-zone,.smart-builder .form-grid>label,.translate-intake .form-grid>label.full{grid-column:1/-1}.pro-toggle-control{gap:8px}.smart-builder .form-grid{grid-template-columns:1fr}.translation-mode-control{gap:4px}}
@media(prefers-reduced-motion:reduce){.pro-toggle-thumb{transition:none}}

#smart-values .form-grid{grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr))}
#smart-values .smart-value-input{min-height:44px;height:auto;resize:vertical;line-height:1.6;padding:10px 12px}

.credit-balances{margin-block:18px;max-width:760px}.credit-balances ul{list-style:none;padding:0;margin:0}.credit-balances li{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid var(--border,#e4e8f1)}.credit-balances small{display:block;color:var(--muted,#687589)}.credit-balances p{font-size:.85rem}.co-upgrade-rule{font-size:.9rem;line-height:1.7}
@media(max-width:500px){.credit-balances li{align-items:start;flex-wrap:wrap}}

.upgrade-quote-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 20px;padding:12px 0}.upgrade-quote-grid div{min-width:0}.upgrade-quote-grid dt{font-size:.8rem;color:var(--muted,#687589)}.upgrade-quote-grid dd{margin:0;font-weight:700;overflow-wrap:anywhere}.credit-balances summary{cursor:pointer;min-height:44px;display:flex;align-items:center} @media(max-width:500px){.upgrade-quote-grid{grid-template-columns:1fr}}