/* =========================================================
   Text to Handwriting — interface styles
   ========================================================= */

:root {
  --bg: #f4f2ee;              /* app background (warm paper grey) */
  --desk: #e7e3db;            /* preview area */
  --panel: #fbfaf8;           /* settings column */
  --card: #ffffff;
  --text: #1c2330;
  --muted: #6b7280;
  --faint: #9aa1ad;
  --border: #e5e1d8;
  --border-strong: #d3cec3;
  --accent: #2f4ac0;          /* ink blue */
  --accent-hover: #263d9e;
  --accent-soft: #eaeefc;
  --danger: #c62828;
  --radius: 12px;
  --radius-sm: 8px;
  --shadow-sm: 0 1px 2px rgba(28, 35, 48, .06);
  --shadow-md: 0 4px 14px rgba(28, 35, 48, .08);
  --shadow-lg: 0 18px 50px rgba(28, 35, 48, .22);
  --topbar-h: 64px;
  --ease: cubic-bezier(.2, .7, .3, 1);
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }

body {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 14px;
  line-height: 1.45;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  height: 100vh;
}

::selection { background: #c9d4fb; }

/* thin, quiet scrollbars */
* { scrollbar-width: thin; scrollbar-color: #cfc9bd transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: #d6d0c4; border-radius: 10px; border: 3px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background-color: #bdb6a8; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- top bar ---------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  min-height: var(--topbar-h);
  padding: 10px 20px;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}
.brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.logo {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  flex: none;
  font-size: 20px;
  border-radius: 11px;
  background: linear-gradient(135deg, #3c5bd8, #22357f);
  box-shadow: 0 4px 12px rgba(47, 74, 192, .35), inset 0 1px 0 rgba(255, 255, 255, .25);
}
a.btn { text-decoration: none; }
.logo-img { background: none; box-shadow: none; border-radius: 10px; }
.brand-name { font-family: "Plus Jakarta Sans", "Inter", sans-serif; font-size: 20px; font-weight: 800; letter-spacing: -.035em; line-height: 1.1; color: #1b2130; }
.brand-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }

.actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.btn-group { display: flex; gap: 2px; padding: 2px; border: 1px solid var(--border); border-radius: 10px; background: #f7f6f3; }
.btn-group .btn { border-color: transparent; padding: 6px 10px; }
.btn-group .btn:hover { background: #fff; border-color: var(--border); }

.pill {
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: 999px;
  white-space: nowrap;
}
.pill:empty { display: none; }

.zoom {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #f7f6f3;
}
.zoom span { min-width: 44px; text-align: center; font-size: 12px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.icon-btn {
  width: 28px; height: 28px;
  font: 600 16px/1 "Inter", sans-serif;
  color: var(--text);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
}
.icon-btn:hover { background: #fff; border-color: var(--border); }

.muted { color: var(--muted); font-size: 13px; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font: inherit;
  font-weight: 500;
  line-height: 1.2;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: var(--card);
  color: var(--text);
  cursor: pointer;
  transition: background .15s, border-color .15s, box-shadow .15s, transform .08s;
}
.btn:hover { border-color: var(--accent); color: var(--accent); }
.btn:active { transform: translateY(1px); }
.btn.primary {
  background: linear-gradient(180deg, #3955cf, var(--accent));
  border-color: var(--accent);
  color: #fff;
  box-shadow: 0 2px 8px rgba(47, 74, 192, .3);
}
.btn.primary:hover { background: var(--accent-hover); color: #fff; }
.btn.ghost { background: transparent; border-color: var(--border); }
.btn.ghost:hover { background: #fff; }
.btn.full { width: 100%; margin-top: 4px; }
.btn.danger { color: var(--danger); }
.btn.danger:hover { border-color: var(--danger); }
.link-btn {
  padding: 0;
  font: 500 12px "Inter", sans-serif;
  color: var(--accent);
  background: none;
  border: none;
  cursor: pointer;
}
.link-btn:hover { text-decoration: underline; }

/* ---------- layout ---------- */
.layout {
  display: grid;
  grid-template-columns: 380px 1fr;
  flex: 1;
  min-height: 0; /* the panel and preview scroll, not the page */
}

.panel {
  overflow-y: auto;
  padding: 0 14px 20px;
  background: var(--panel);
  border-right: 1px solid var(--border);
}
.panel-top {
  position: sticky;
  top: 0;
  z-index: 5;
  margin: 0 -14px 12px;
  padding: 12px 14px 10px;
  background: linear-gradient(var(--panel) 85%, rgba(251, 250, 248, 0));
}
.panel-top input[type="search"] { margin: 0; padding: 9px 12px; border-radius: 10px; background: #fff; }
.panel-top-btns { display: flex; justify-content: flex-end; gap: 14px; margin-top: 6px; }

/* ---------- collapsible setting cards ---------- */
.group {
  margin-bottom: 10px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: box-shadow .2s var(--ease), border-color .2s;
}
.group[open] { box-shadow: var(--shadow-md); border-color: var(--border-strong); }
.group > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  list-style: none;
  user-select: none;
  border-radius: var(--radius);
}
.group > summary::-webkit-details-marker { display: none; }
.group > summary:hover { background: #faf9f7; }
.group > summary::after {
  content: "";
  margin-left: auto;
  width: 8px; height: 8px;
  border-right: 2px solid var(--faint);
  border-bottom: 2px solid var(--faint);
  transform: rotate(45deg) translateY(-2px);
  transition: transform .2s var(--ease);
}
.group[open] > summary::after { transform: rotate(225deg) translateY(-2px); }
.group[open] > summary { border-bottom: 1px solid var(--border); border-radius: var(--radius) var(--radius) 0 0; }
.sec-icon {
  display: grid;
  place-items: center;
  width: 28px; height: 28px;
  font-size: 15px;
  background: var(--accent-soft);
  border-radius: 8px;
}
.group-body { padding: 14px; }
.search-hide { display: none !important; }

/* ---------- form controls ---------- */
label {
  display: block;
  margin-bottom: 12px;
  font-size: 13px;
  font-weight: 500;
  color: #2b3240;
}
label output {
  float: right;
  min-width: 28px;
  padding: 0 6px;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: 6px;
  font-variant-numeric: tabular-nums;
}

input[type="text"], input[type="password"], input[type="email"], input[type="url"], input[type="search"], input[type="number"], textarea, select {
  display: block;
  width: 100%;
  margin-top: 5px;
  padding: 8px 10px;
  font: inherit;
  font-weight: 400;
  color: var(--text);
  background: #fff;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  transition: border-color .15s, box-shadow .15s;
}
input[type="text"]:hover, input[type="number"]:hover, textarea:hover, select:hover { border-color: #bfb8aa; }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(47, 74, 192, .15); }
textarea { resize: vertical; min-height: 170px; line-height: 1.55; }
select {
  appearance: none;
  padding-right: 32px;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%236b7280' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
}

/* sliders */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 18px;
  margin: 6px 0 0;
  background: transparent;
  cursor: pointer;
}
input[type="range"]::-webkit-slider-runnable-track { height: 4px; border-radius: 4px; background: #e2ddd3; }
input[type="range"]::-moz-range-track { height: 4px; border-radius: 4px; background: #e2ddd3; }
input[type="range"]::-moz-range-progress { height: 4px; border-radius: 4px; background: var(--accent); }
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px; height: 16px;
  margin-top: -6px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--accent);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .18);
  transition: transform .1s;
}
input[type="range"]::-moz-range-thumb {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--accent);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .18);
}
input[type="range"]:hover::-webkit-slider-thumb { transform: scale(1.15); }
input[type="range"]:focus { box-shadow: none; }

/* colour pickers */
input[type="color"] {
  display: block;
  width: 100%;
  height: 36px;
  margin-top: 5px;
  padding: 3px;
  background: #fff;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
input[type="color"]::-webkit-color-swatch { border: none; border-radius: 5px; }
input[type="color"]::-moz-color-swatch { border: none; border-radius: 5px; }

/* checkboxes look like switches */
label.check {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 400;
  cursor: pointer;
}
label.check input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  flex: none;
  width: 34px; height: 20px;
  margin: 0;
  background: #d8d3c9;
  border-radius: 999px;
  cursor: pointer;
  transition: background .2s var(--ease);
}
label.check input[type="checkbox"]::after {
  content: "";
  position: absolute;
  top: 2px; left: 2px;
  width: 16px; height: 16px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
  transition: transform .2s var(--ease);
}
label.check input[type="checkbox"]:checked { background: var(--accent); }
label.check input[type="checkbox"]:checked::after { transform: translateX(14px); }
label.check input[type="checkbox"]:focus { box-shadow: 0 0 0 3px rgba(47, 74, 192, .2); }

/* file pickers */
label.file input {
  margin-top: 6px;
  width: 100%;
  font-size: 12px;
  color: var(--muted);
}
label.file input::file-selector-button {
  margin-right: 10px;
  padding: 6px 12px;
  font: 500 12px "Inter", sans-serif;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid #d3dcfa;
  border-radius: 7px;
  cursor: pointer;
}
label.file input::file-selector-button:hover { background: #dfe5fb; }

.presets { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 14px; }
.presets .btn { padding: 8px; font-size: 13px; background: #faf9f7; }
.presets .btn:hover { background: var(--accent-soft); }

.row { display: flex; gap: 10px; align-items: flex-end; }
.row > label { flex: 1; min-width: 0; }

.swatches { display: flex; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; }
.swatch {
  width: 24px; height: 24px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px var(--border-strong);
  cursor: pointer;
  transition: transform .1s;
}
.swatch:hover { transform: scale(1.12); }
.swatch.active { box-shadow: 0 0 0 2px var(--accent); }

.hint { margin: 0 0 12px; font-size: 12px; color: var(--muted); line-height: 1.55; }
.hint code { background: #f1efea; color: #3a4252; padding: 1px 5px; border-radius: 4px; font-size: 11.5px; }

.sub-head {
  margin: 14px 0 8px;
  padding-top: 12px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--accent);
  border-top: 1px dashed var(--border);
}
.group-body > .sub-head:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.sub-head .muted { font-weight: 400; font-size: 11px; text-transform: none; letter-spacing: 0; }

/* ---------- preview (desk) ---------- */
.preview {
  --page-w: 794px;
  overflow-y: auto;
  padding: 28px 24px 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  background:
    radial-gradient(circle at 1px 1px, rgba(120, 110, 95, .13) 1px, transparent 0) 0 0 / 18px 18px,
    var(--desk);
}
.page-wrap { width: 100%; max-width: var(--page-w); transition: max-width .2s var(--ease); }
.page-stage { position: relative; }
.page-stage canvas { cursor: text; touch-action: pan-y; }
.page-frame { position: absolute; transform-origin: 50% 50%; pointer-events: none; }
.page-frame .sel-toolbar, .page-frame .note-input { pointer-events: auto; }
.page-overlay { position: absolute; inset: 0; pointer-events: none; }
.sel-box { position: absolute; background: rgba(47, 74, 192, .2); border-radius: 3px; }
.note-input {
  position: absolute;
  z-index: 2;
  padding: 0 4px;
  font-family: "Caveat", cursive;
  color: #1a3b8f;
  background: rgba(255, 255, 255, .96);
  border: 1.5px solid var(--accent);
  border-radius: 5px;
  outline: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .12);
}

.page-wrap canvas {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 3px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 14px 34px rgba(60, 45, 25, .16);
}
.page-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
  font-size: 12px;
  color: var(--muted);
}
.page-label span { padding: 3px 10px; background: rgba(255, 255, 255, .7); border-radius: 999px; font-weight: 500; }
.page-label button {
  padding: 4px 10px;
  font: 500 12px "Inter", sans-serif;
  color: var(--accent);
  background: rgba(255, 255, 255, .7);
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
}
.page-label button:hover { background: #fff; border-color: #d3dcfa; }

/* ---------- selection toolbar ---------- */
.sel-toolbar {
  position: fixed;              /* floats above the pages; placed next to the selection by JS */
  z-index: 30;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  max-width: min(420px, calc(100vw - 16px));
  max-height: calc(100vh - 16px);
  overflow-y: auto;
  padding: 10px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  font-family: "Inter", sans-serif;
  animation: pop .14s var(--ease);
}
@keyframes pop { from { opacity: 0; transform: translateY(4px) scale(.98); } }
.tb-group { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.tb-group + .tb-group { padding-left: 8px; border-left: 1px solid var(--border); }
.tb-label { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--faint); margin-right: 2px; }
.sel-toolbar button { cursor: pointer; font: 500 12px "Inter", sans-serif; }
.tb-text { padding: 5px 9px; border: 1px solid var(--border); border-radius: 7px; background: #faf9f7; color: var(--text); }
.tb-text:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.tb-swatch { width: 20px; height: 20px; padding: 0; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 0 0 1px var(--border-strong); }
.tb-swatch.tb-hl { border-radius: 5px; }
.tb-swatch:hover { box-shadow: 0 0 0 2px var(--accent); }
.tb-icon { width: 22px; height: 22px; padding: 0; border: 1px solid var(--border); border-radius: 6px; background: #fff; color: var(--muted); }
.tb-icon:hover { color: var(--accent); border-color: var(--accent); }
.sel-toolbar input.tb-picker {
  display: inline-block;
  flex: none;
  width: 24px; height: 22px;
  margin: 0; padding: 0;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
}
.tb-swatch, .tb-icon { flex: none; }

/* ---------- subtitle & table lists ---------- */
.sub-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 6px; }
.sub-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: #faf9f7;
}
.sub-item.is-title { border-color: #f1c4c4; background: #fff7f7; }
.sub-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.seg { display: flex; flex-shrink: 0; border: 1px solid var(--border-strong); border-radius: 7px; overflow: hidden; background: #fff; }
.seg button {
  width: 26px; height: 24px;
  font: 600 12px "Inter", sans-serif;
  color: var(--muted);
  background: #fff;
  border: none;
  border-left: 1px solid var(--border);
  cursor: pointer;
  transition: background .12s, color .12s;
}
.seg button:first-child { border-left: none; }
.seg button:hover { color: var(--accent); background: var(--accent-soft); }
.seg button.on { background: var(--accent); color: #fff; }

.table-item { padding: 8px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: #faf9f7; }
.table-item .sub-item { padding: 0 0 6px; border: none; background: none; }
.tbl-width { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
.tbl-width input { flex: 1; margin: 0; }
.tbl-width output { min-width: 34px; text-align: right; color: var(--text); font-weight: 600; }
.tbl-width .seg { margin-left: auto; }
.tbl-width .tbl-auto { padding: 2px 8px; font-size: 12px; }
.tbl-width .tbl-auto.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.table-item .tbl-width + .tbl-width { margin-top: 6px; }

/* ---------- two pens ---------- */
.pen-box {
  margin-bottom: 12px;
  padding: 12px 12px 2px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: linear-gradient(180deg, #fbfaf8, #fff 40px);
}
.pen-title { font-weight: 600; margin-bottom: 8px; }
.pen-title .muted { font-weight: 400; font-size: 12px; }

/* ---------- insert table ---------- */
.table-row { margin-bottom: 8px; }
.table-row label { margin-bottom: 0; }
.table-row input { width: 100%; }
.table-row .btn { white-space: nowrap; flex: 1.4; }

/* ---------- handwriting studio & gallery ---------- */
.studio-open { margin-bottom: 12px; }
.gallery-open { margin-bottom: 8px; }

.gallery { width: min(1100px, calc(100vw - 32px)); }
.gallery-tools { display: flex; gap: 10px; padding: 14px 22px 0; }
.gallery-tools input { margin: 0; }
.gallery-tools #gallerySearch { max-width: 260px; }
.gallery-body { padding: 8px 22px 22px; max-height: calc(100vh - 210px); overflow-y: auto; }
.gallery-body h4 { margin: 18px 0 8px; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--accent); }
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.font-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  text-align: left;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s, transform .15s;
  /* ruled-paper look */
  background-image: repeating-linear-gradient(to bottom, transparent 0 27px, #dbe7f5 27px 28px);
  background-position: 0 6px;
}
.font-card:hover { border-color: var(--accent); box-shadow: 0 6px 18px rgba(47, 74, 192, .14); transform: translateY(-1px); }
.font-card.active { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.font-card .fc-name { font: 600 12px "Inter", sans-serif; color: var(--muted); }
.font-card .fc-sample { color: #1a3b8f; line-height: 28px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

.studio {
  width: min(960px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  padding: 0;
  border: none;
  border-radius: 16px;
  color: var(--text);
  box-shadow: var(--shadow-lg);
}
.studio[open] { animation: pop .18s var(--ease); }
.studio::backdrop { background: rgba(20, 26, 40, .45); backdrop-filter: blur(2px); }

.studio-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding: 18px 22px;
  border-bottom: 1px solid var(--border);
}
.studio-head h2 { margin: 0 0 4px; font-size: 18px; }
.studio-head p { margin: 0; }

.studio-body { display: grid; grid-template-columns: 340px 1fr; gap: 20px; padding: 16px 22px 22px; }
.studio-current { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.studio-current strong { font-size: 22px; color: var(--accent); margin-left: 4px; }

#drawPad {
  display: block;
  width: 100%;
  max-width: 340px;
  aspect-ratio: 1;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
  touch-action: none;
  cursor: crosshair;
}

.studio-tools { display: flex; gap: 16px; align-items: center; margin-top: 10px; }
.studio-tools > label:first-child { flex: 1; margin-bottom: 0; }
.studio-tools label.check { margin-bottom: 0; white-space: nowrap; }

.studio-buttons { display: flex; gap: 8px; margin-top: 10px; }
.studio-buttons .btn.primary { flex: 1; }
.studio-buttons.wrap { flex-wrap: wrap; }
.studio-buttons.wrap .btn { flex: 1 1 45%; text-align: center; }
.file-btn { display: inline-flex; margin: 0; font-size: 14px; }

.variants { display: flex; gap: 8px; margin-top: 12px; min-height: 64px; }
.variant { position: relative; width: 64px; height: 64px; border: 1px solid var(--border); border-radius: 8px; background: #fff; }
.variant canvas { width: 100%; height: 100%; }
.variant button {
  position: absolute; top: -7px; right: -7px;
  width: 20px; height: 20px;
  border-radius: 50%;
  border: none;
  background: var(--danger);
  color: #fff;
  font-size: 11px;
  line-height: 20px;
  cursor: pointer;
}

.studio-progress { font-size: 13px; color: var(--muted); margin-bottom: 8px; }
.glyph-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(38px, 1fr));
  gap: 6px;
  max-height: 360px;
  overflow-y: auto;
  padding: 2px;
}
.glyph-cell {
  position: relative;
  height: 38px;
  font: 500 16px "Inter", sans-serif;
  color: var(--muted);
  background: #f6f5f2;
  border: 1px solid var(--border);
  border-radius: 7px;
  cursor: pointer;
}
.glyph-cell.done { background: var(--accent-soft); color: var(--accent); border-color: #c4cffb; }
.glyph-cell.current { outline: 2px solid var(--accent); }
.glyph-cell sup { position: absolute; top: 1px; right: 3px; font-size: 9px; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .brand-sub { display: none; }
  .btn-group .btn { font-size: 13px; }
}
@media (max-width: 860px) {
  :root { --topbar-h: auto; }
  .topbar { position: static; padding: 10px 16px; }
  .actions { width: 100%; }
  body { display: block; height: auto; }
  .layout { grid-template-columns: 1fr; height: auto; }
  .panel { border-right: none; border-bottom: 1px solid var(--border); overflow: visible; }
  .preview { overflow: visible; padding: 20px 12px 60px; }
  .studio-body { grid-template-columns: 1fr; }
}

/* ---------- print ---------- */
#printPages { display: none; }
@media print {
  @page { margin: 0; }
  body { display: block; height: auto; background: #fff; }
  body > *:not(#printPages) { display: none !important; }   /* full-quality copies made for printing */
  #printPages { display: block; }
  #printPages img { display: block; width: 100%; page-break-after: always; break-after: page; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* page waiting to be drawn (long texts draw the visible pages first) */
.page-wrap canvas.page-pending {
  background: linear-gradient(100deg, #fdfcfa 30%, #f1eee8 50%, #fdfcfa 70%) 0 0 / 300% 100%;
  animation: pending 1.2s linear infinite;
}
@keyframes pending { to { background-position: -150% 0; } }

/* pages scrolled out of view are not painted (big win for long assignments) */
/* flex-shrink: 0 keeps skipped pages at their placeholder height (the column would shrink them to 0) */
.page-wrap { content-visibility: auto; contain-intrinsic-size: auto 1150px; flex-shrink: 0; }
.tb-size { min-width: 38px; text-align: center; font: 600 11.5px "Inter", sans-serif; color: var(--accent); font-variant-numeric: tabular-nums; }
.tb-bullet { width: 26px; height: 26px; padding: 0; font: 600 14px "Inter", "Segoe UI Symbol", sans-serif; color: var(--text); background: #faf9f7; border: 1px solid var(--border); border-radius: 7px; }
.tb-bullet:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }

/* "Mixed handwriting" font slots */
.mix-slots { display: grid; gap: 6px; }
.mix-slots select { width: 100%; font-size: 16px; }
.mix-box[hidden] { display: none; }

/* letter checker */
.checker { width: min(1180px, calc(100vw - 32px)); }
.checker-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 22px 0; }
.checker-fonts { display: flex; flex-wrap: wrap; gap: 6px 14px; flex: 1; font-size: 13px; color: var(--muted); }
.checker-fonts b { color: var(--accent); }
.checker-body { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 6px 18px; padding: 12px 22px 22px; max-height: calc(100vh - 220px); overflow-y: auto; }
.check-row { display: flex; align-items: center; gap: 4px; }
.check-char { width: 26px; font: 600 16px "Inter", sans-serif; text-align: center; color: var(--text); }
.check-cell { position: relative; padding: 0; border: 1px solid var(--border); border-radius: 6px; background: #fff; cursor: pointer; line-height: 0; }
.check-cell canvas { width: 58px; height: 70px; }
.check-cell:hover { border-color: var(--accent); }
.check-cell.off canvas { opacity: .25; }
.check-cell.off::after { content: "✕"; position: absolute; top: 2px; right: 4px; font: 700 13px "Inter", sans-serif; color: #d33; line-height: 1; }
.check-cell.na { cursor: default; background: repeating-linear-gradient(135deg, #f6f6f6 0 6px, #fff 6px 12px); }
.check-cell.na canvas { opacity: 0; }
.check-group { grid-column: 1 / -1; margin: 14px 0 2px; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--accent); }

/* ---------- line icons (SVG sprite in index.html) ---------- */
.icon { width: 16px; height: 16px; flex: none; vertical-align: -3px; }
.logo { color: #fff; }
.logo .icon { width: 20px; height: 20px; }
.sec-icon { color: var(--accent); }
.sec-icon .icon { width: 15px; height: 15px; }
.tb-icon .icon { width: 14px; height: 14px; }
.tb-text .icon { width: 14px; height: 14px; margin-right: 3px; }
.search-wrap { position: relative; }
.search-wrap > .icon { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.panel-top .search-wrap input[type="search"] { padding-left: 34px; width: 100%; }

/* signature pad */
.sign-dialog { max-width: 680px; }
#signPad { display: block; width: 100%; height: auto; margin: 12px 0; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-sm); touch-action: none; cursor: crosshair; }

/* AI answers */
.ai-box label { margin-bottom: 8px; }
.ai-box [hidden] { display: none; }
.ai-box .hint { margin: 8px 0 0; }
.ai-box .hint.error { color: var(--danger); }
.ai-box .btn[disabled] { opacity: .6; cursor: progress; }


/* ---------- tools: start screen, then one tool at a time ---------- */
body:not(.mode-home) #home,
body:not(.mode-hand) #handLayout,
body:not(.mode-lab) #labWorkspace { display: none !important; }
body:not(.mode-hand) .hand-only { display: none !important; }
body:not(.mode-lab) .lab-only { display: none !important; }
body.mode-home .home-btn { display: none; }
.brand[role="button"] { cursor: pointer; border-radius: 10px; }

.home {
  flex: 1;
  overflow-y: auto;
  padding: 64px 24px 48px;
  background: #f6f3ec;
}
.home-inner { max-width: 960px; margin: 0 auto; }
.home-foot { max-width: 960px; margin: 48px auto 0; padding-top: 18px; border-top: 1px solid #e2dccf; display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 13px; color: #6b7280; }
.home-foot a { color: #6b7280; text-decoration: none; }
.home-foot a:hover { color: var(--accent); text-decoration: underline; }
.home-head { margin-bottom: 32px; }
.home h1 { margin: 0; font-family: "Plus Jakarta Sans", "Inter", sans-serif; font-size: clamp(34px, 4.5vw, 48px); font-weight: 800; letter-spacing: -.04em; line-height: 1.1; color: #0f172a; }
.home-head p { margin: 10px 0 0; color: #485164; font-size: 17px; }
.home-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.home-card {
  display: flex; flex-direction: column; padding: 0; overflow: hidden;
  text-align: left; font: inherit; color: var(--text);
  background: #fffdf9; border: 1px solid #e2dccf; border-radius: 16px;
  cursor: pointer; transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.home-card:hover { border-color: #b9c3ea; box-shadow: 0 1px 2px rgba(27, 33, 48, .06), 0 12px 28px -16px rgba(27, 33, 48, .28); }
.home-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.home-preview { display: block; height: 132px; padding: 20px 24px 0; background: #eee9de; border-bottom: 1px solid #e2dccf; overflow: hidden; }
.hp-sheet {
  position: relative; display: flex; flex-direction: column; height: 100%; padding: 14px 18px 0 52px; border-radius: 6px 6px 0 0;
  background: #fffefa repeating-linear-gradient(to bottom, transparent 0 25px, #d3dbf0 25px 26px); background-position: 0 12px;
  font: 21px/26px "Caveat", cursive; color: #2342b5; box-shadow: 0 1px 3px rgba(27, 33, 48, .1);
}
.hp-sheet::before { content: ""; position: absolute; top: 0; bottom: 0; left: 40px; width: 1.5px; background: #e07a6c; opacity: .7; }
.hp-q { position: absolute; left: 10px; top: 14px; font-weight: 600; }
.hp-sheet > span { white-space: nowrap; }
.hp-h { font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
.hp-term { display: block; height: 100%; padding: 16px 18px 0; border-radius: 8px 8px 0 0; background: #161a23; color: #d6dae3; font: 13px/1.7 ui-monospace, "Cascadia Code", Consolas, monospace; }
.hp-dim { color: #7f8aa3; }
.hp-ok { color: #8fd19e; }
.home-body { display: flex; flex-direction: column; gap: 12px; flex: 1; padding: 22px 24px; }
.home-title-row { display: flex; align-items: center; gap: 12px; }
.home-icon { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 9px; background: var(--accent-soft); color: var(--accent); }
.home-icon .icon { width: 18px; height: 18px; }
.home-title { font-family: "Plus Jakarta Sans", "Inter", sans-serif; font-size: 22px; font-weight: 750; letter-spacing: -.03em; color: #0f172a; }
.home-text { color: #485164; line-height: 1.55; }
.home-points { display: grid; gap: 6px; font-size: 14px; color: #485164; }
.home-points span { display: flex; align-items: center; gap: 8px; }
.home-points svg { width: 16px; height: 16px; flex: none; fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.home-open { margin-top: auto; padding-top: 6px; color: var(--accent); font-weight: 600; }
.home-open span { display: inline-block; transition: transform .15s var(--ease); }
.home-card:hover .home-open span, .home-row:hover .home-open span { transform: translateX(3px); }
.home-row {
  display: flex; align-items: center; gap: 14px; width: 100%; margin-top: 20px; padding: 16px 20px;
  text-align: left; font: inherit; color: var(--text); background: #fffdf9; border: 1px solid #e2dccf; border-radius: 14px; cursor: pointer;
}
.home-row:hover { border-color: #b9c3ea; }
.home-row > span:nth-child(2) { flex: 1; display: grid; gap: 2px; }
.home-row b { font-weight: 600; }
.home-row > span:nth-child(2) span { color: #485164; font-size: 14px; }
.home-row .home-open { margin: 0; padding: 0; }
.home-soon { display: flex; align-items: center; gap: 8px; margin: 28px 0 0; color: #6b7280; font-size: 14px; }
.home-soon .icon { width: 16px; height: 16px; }
@media (max-width: 760px) { .home { padding: 36px 16px 32px; } .home-cards { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .home-card, .home-open span { transition: none !important; } }

/* lab file workspace: settings on the left, the typed document on the right */
.lab-intro { padding: 18px 0 6px; }
.lab-intro h2 { margin: 0 0 6px; font-size: 18px; }
.lab-intro p { margin: 0; line-height: 1.5; }
.lab-box { padding: 10px 0 0; }
.lab-box label { margin-bottom: 10px; }
.lab-main { display: flex; flex-direction: column; min-height: 0; background: var(--desk); }
.lab-doc-tools { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 18px; background: var(--panel); border-bottom: 1px solid var(--border); }
.lab-main iframe, .lab-main textarea { flex: 1; width: 100%; min-height: 0; margin: 0; border: 0; border-radius: 0; }
.lab-main iframe { background: #e8e6e1; }
.lab-main textarea { padding: 18px 22px; font: 13px/1.5 Consolas, "Courier New", monospace; resize: none; }
.lab-main [hidden] { display: none; }
@media (max-width: 860px) {
  .home { padding: 28px 16px 40px; }
  .home h1 { font-size: 34px; }
  .lab-main iframe, .lab-main textarea { flex: none; height: 80vh; }
}

/* lab file: the cover page details */
.lab-cover { margin: 0 0 12px; padding: 4px 12px 2px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); }
.lab-cover > summary { cursor: pointer; padding: 8px 0; font-weight: 600; }
.lab-cover[open] > summary { margin-bottom: 4px; }
.lab-sub { margin: 4px 0 6px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.lab-logo { margin-bottom: 10px; }
.lab-logo-label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 500; color: #2b3240; }
.lab-logo-row { display: flex; gap: 6px; align-items: center; }
.lab-logo-row input { flex: 1; min-width: 0; margin: 0; }
.lab-logo-row .btn { flex: none; }
.lab-logo-row img { width: 38px; height: 38px; object-fit: contain; border: 1px solid var(--border); border-radius: 6px; background: #fff; }
.lab-logo-row [hidden] { display: none; }
.row3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 10px; }
.row3 input { margin: 0; min-width: 0; }
.seg { display: flex; gap: 14px; align-items: center; margin-top: 8px; font-size: 13px; }
.seg label { display: inline-flex; gap: 5px; align-items: center; margin: 0; font-weight: 400; cursor: pointer; }
.size-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-bottom: 10px; }
.size-grid label { margin: 0; font-size: 11px; color: var(--muted); }
.size-grid input { margin-top: 3px; padding-left: 6px; padding-right: 2px; }
.size-grid { grid-template-columns: repeat(3, 1fr); }

/* "page not found" screen inside the app (#something that is not a tool) */
.notfound { max-width: 520px; padding-top: 40px; text-align: center; }
.nf-code { font-size: 72px; font-weight: 700; line-height: 1; color: var(--accent); letter-spacing: 2px; }
.notfound h1 { margin: 10px 0 8px; }
.notfound > .muted { margin: 0 0 22px; }

/* ---------- accounts: top bar, sign-in window, buying credits ---------- */
.account-area { display: flex; align-items: center; gap: 8px; }
.credits-pill { display: inline-flex; align-items: baseline; gap: 4px; padding: 6px 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--accent-soft); color: var(--accent); font: inherit; font-weight: 700; cursor: pointer; }
.credits-pill span { font-weight: 500; font-size: 12px; }
.credits-pill.low { background: #fdecec; color: var(--danger); border-color: #f5c2c2; }
.pro-badge { display:inline-flex; align-items:center; justify-content:center; padding:3px 7px; border-radius:999px; background:linear-gradient(135deg,#6d45ff,#9b5cff); color:#fff; font-size:10px; font-weight:800; letter-spacing:.06em; line-height:1; }
.pack-price small { margin-left:2px; font-size:11px; font-weight:500; color:var(--muted); }
.acc-menu-wrap { position: relative; }
.acc-avatar { width: 36px; height: 36px; border-radius: 50%; border: none; background: var(--accent); color: #fff; font: inherit; font-weight: 700; cursor: pointer; }
.acc-menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 50; min-width: 240px; padding: 6px; background: var(--card); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-lg); }
.acc-menu[hidden] { display: none; }
.acc-menu button { display: block; width: 100%; padding: 9px 12px; border: none; background: none; text-align: left; font: inherit; border-radius: 8px; cursor: pointer; color: var(--text); }
.acc-menu button:hover { background: var(--accent-soft); }
.acc-menu button.danger { color: var(--danger); }
.acc-who { display: flex; flex-direction: column; gap: 2px; padding: 8px 12px 10px; margin-bottom: 4px; border-bottom: 1px solid var(--border); }
.acc-who span { color: var(--muted); font-size: 12px; word-break: break-all; }
.acc-who em { color: var(--danger); font-size: 12px; font-style: normal; }

.auth-dialog { width: min(440px, calc(100vw - 32px)); }
.auth-body { padding: 18px 22px 22px; }
.auth-body label { margin-bottom: 12px; }
.auth-body input[type="email"], .auth-body input[type="password"] { width: 100%; }
.auth-msg { min-height: 1.2em; margin: 4px 0 10px; color: var(--danger); font-size: 13px; }
.auth-msg.ok { color: #1b7a3a; }
.auth-links { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 14px 0 0; font-size: 13px; }
.auth-links a { color: var(--accent); }
.auth-row { display: flex; gap: 8px; justify-content: flex-end; }
.auth-sub { margin: 16px 0 8px; font-size: 14px; }
.small { font-size: 12px; }
.google-btn { display: flex; justify-content: center; gap: 10px; width: 100%; text-decoration: none; color: var(--text); background: #fff; }
.or { display: flex; align-items: center; gap: 10px; margin: 14px 0; color: var(--muted); font-size: 12px; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.packs { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 10px; margin-bottom: 8px; }
.pack { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 16px 10px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--card); font: inherit; color: var(--text); cursor: pointer; }
.pack:hover:not(:disabled) { border-color: var(--accent); box-shadow: var(--shadow-md); }
.pack.best { border-color: var(--accent); }
.pack-tag { position: absolute; top: -9px; padding: 1px 8px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 11px; font-weight: 600; }
.pack-name { font-weight: 600; }
.pack-credits { color: var(--muted); font-size: 13px; }
.pack-price { font-size: 22px; font-weight: 700; color: var(--accent); }
.pack-each { color: var(--muted); font-size: 11px; }
table.mini { width: 100%; border-collapse: collapse; font-size: 12px; margin-bottom: 8px; }
table.mini th, table.mini td { padding: 5px 6px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
#toast { position: fixed; left: 50%; bottom: 24px; z-index: 100; max-width: min(520px, calc(100vw - 32px)); padding: 12px 18px; border-radius: 12px; background: #1c2330; color: #fff; box-shadow: var(--shadow-lg); transform: translate(-50%, 160%); transition: transform .25s var(--ease); }
#toast.show { transform: translate(-50%, 0); }
#toast.bad { background: var(--danger); }

/* ---------- admin dashboard ---------- */
body:not(.mode-admin) #adminPage { display: none; }
.admin-page { flex: 1; overflow-y: auto; background: var(--bg); }
.admin-inner { max-width: 1180px; margin: 0 auto; padding: 28px 24px 60px; }
.admin-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 18px; }
.admin-head h1 { margin: 0 0 4px; font-size: 24px; }
.admin-head p { margin: 0; }
.admin-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 16px; }
.stat { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; background: var(--card); border: 1px solid var(--border); border-radius: 12px; }
.stat-label { color: var(--muted); font-size: 12px; }
.stat-value { font-size: 24px; font-weight: 700; }
.stat-sub { color: var(--muted); font-size: 12px; }
.admin-setup:empty { display: none; }
.admin-setup { margin-bottom: 16px; padding: 14px 18px; border: 1px solid #f0d58a; background: #fff8e6; border-radius: 12px; }
.admin-setup h3 { margin: 0 0 8px; font-size: 14px; }
.admin-setup ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; font-size: 13px; }
.admin-setup li.ok b { color: #1b7a3a; }
.admin-setup li.todo b { color: #b06d00; }
.admin-tabs { display: flex; gap: 4px; margin-bottom: 12px; border-bottom: 1px solid var(--border); }
.admin-tabs button { padding: 10px 16px; border: none; background: none; font: inherit; font-weight: 600; color: var(--muted); border-bottom: 2px solid transparent; cursor: pointer; }
.admin-tabs button[aria-selected="true"] { color: var(--accent); border-bottom-color: var(--accent); }
.admin-tools { display: flex; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.admin-tools input { flex: 1; min-width: 200px; margin: 0; }
.admin-tools select { width: auto; margin: 0; }
.table-wrap { overflow-x: auto; background: var(--card); border: 1px solid var(--border); border-radius: 12px; }
.admin-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.admin-table th { background: #f7f6f3; text-align: left; font-weight: 600; color: var(--muted); }
.admin-table th, .admin-table td { padding: 10px 12px; border-bottom: 1px solid var(--border); vertical-align: top; }
.admin-table tr[data-user] { cursor: pointer; }
.admin-table tr[data-user]:hover td, .admin-table tr[data-user]:focus td { background: var(--accent-soft); }
.admin-table .mono { font-family: Consolas, monospace; font-size: 12px; }
.badge { display: inline-block; margin: 0 4px 3px 0; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; background: #eef0f3; color: #4b5260; }
.badge.ok { background: #e3f4e8; color: #1b7a3a; }
.badge.warn { background: #fff1d6; color: #9a5b00; }
.badge.bad { background: #fde3e3; color: var(--danger); }
.badge.admin { background: var(--accent-soft); color: var(--accent); }
.admin-pager { display: flex; justify-content: center; align-items: center; gap: 12px; margin: 14px 0; color: var(--muted); font-size: 13px; }
.admin-drawer { position: fixed; top: var(--topbar-h); right: 0; bottom: 0; z-index: 40; width: min(480px, 100vw); overflow-y: auto; background: var(--card); border-left: 1px solid var(--border); box-shadow: var(--shadow-lg); }
.admin-drawer[hidden] { display: none; }
.drawer-head { display: flex; justify-content: space-between; gap: 10px; padding: 18px 20px 12px; border-bottom: 1px solid var(--border); }
.drawer-head h2 { margin: 0 0 2px; font-size: 18px; word-break: break-all; }
.drawer-head p { margin: 0; font-size: 12px; word-break: break-all; }
.drawer-body { padding: 16px 20px 30px; }
.drawer-body h3 { margin: 18px 0 8px; font-size: 14px; }
.facts { display: grid; grid-template-columns: 110px 1fr; gap: 6px 10px; margin: 0 0 14px; font-size: 13px; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; }
.bad-text { color: var(--danger); }
.drawer-credits { display: flex; gap: 6px; margin-bottom: 10px; }
.drawer-credits input { flex: 1; margin: 0; }
.drawer-actions { display: flex; flex-wrap: wrap; gap: 6px; }
@media (max-width: 860px) {
  .account-area .credits-pill span { display: none; }
  .admin-inner { padding: 20px 14px 40px; }
}

/* ---------- My Projects drawer & shared-assignment preview banner ---------- */
.side-drawer { position: fixed; top: var(--topbar-h); right: 0; bottom: 0; z-index: 40; width: min(480px, 100vw); overflow-y: auto; background: var(--card); border-left: 1px solid var(--border); box-shadow: var(--shadow-lg); }
.side-drawer[hidden] { display: none; }
.project-list { display: flex; flex-direction: column; gap: 10px; }
.project-card { padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg); }
.project-card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.project-card-head b { word-break: break-word; }
.project-card-head span { color: var(--muted); font-size: 12px; white-space: nowrap; }
.project-card-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.project-card-actions .btn { padding: 5px 10px; font-size: 12px; }
.project-empty { color: var(--muted); text-align: center; padding: 30px 10px; }
.share-preview-banner { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; padding: 10px 16px; background: var(--accent-soft); color: var(--accent); border-bottom: 1px solid var(--border); text-align: center; font-size: 13px; }
.share-preview-banner .btn { font-size: 12px; padding: 6px 12px; }

/* ---------- Templates: a full page under the topbar, not a narrow side panel ---------- */
.full-page { position: fixed; top: var(--topbar-h); left: 0; right: 0; bottom: 0; z-index: 45; overflow-y: auto; background: var(--bg); }
.full-page[hidden] { display: none; }
.full-page-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; max-width: 1180px; margin: 0 auto; padding: 28px 24px 8px; }
.full-page-head h1 { margin: 0 0 4px; font-size: 26px; }
.full-page-head p { margin: 0; color: var(--muted); }
.full-page-body { max-width: 1180px; margin: 0 auto; padding: 10px 24px 60px; }
.template-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.template-card { display: flex; flex-direction: column; gap: 10px; padding: 18px; border: 1px solid var(--border); border-radius: 14px; background: var(--card); }
.template-card-icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; background: var(--accent-soft); color: var(--accent); }
.template-card h3 { margin: 0; font-size: 16px; }
.template-card p { margin: 0; color: var(--muted); font-size: 13px; flex: 1; }
@media (max-width: 860px) { .full-page-head, .full-page-body { padding-left: 16px; padding-right: 16px; } }

/* =========================================================
   Studio UI 2027 — complete product interface redesign
   ========================================================= */
:root {
  --bg: #eef1f7;
  --desk: #e6eaf2;
  --panel: #f8f9fc;
  --card: #ffffff;
  --text: #15182a;
  --muted: #687086;
  --faint: #98a0b4;
  --border: #e2e5ee;
  --border-strong: #cfd4e2;
  --accent: #6d4aff;
  --accent-hover: #5938e8;
  --accent-soft: #f0edff;
  --accent-2: #2878ff;
  --danger: #d73555;
  --radius: 16px;
  --radius-sm: 11px;
  --shadow-sm: 0 1px 2px rgba(19, 24, 48, .04), 0 4px 14px rgba(19, 24, 48, .04);
  --shadow-md: 0 12px 36px rgba(29, 33, 64, .09);
  --shadow-lg: 0 24px 70px rgba(15, 20, 45, .2);
  --topbar-h: 76px;
  --ease: cubic-bezier(.22, 1, .36, 1);
}

body {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  letter-spacing: -.008em;
  background: var(--bg);
}

::selection { color: #fff; background: #7657ff; }
* { scrollbar-color: #aeb5c6 transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: #aeb5c6; border: 2px solid transparent; background-clip: content-box; }
:focus-visible { outline: 3px solid rgba(109, 74, 255, .35); outline-offset: 2px; }

/* Command header */
.topbar {
  min-height: var(--topbar-h);
  padding: 12px 18px;
  flex-wrap: nowrap;
  gap: 18px;
  color: #f7f8ff;
  background: #131528;
  border: 0;
  box-shadow: 0 10px 32px rgba(14, 17, 38, .18);
  backdrop-filter: none;
}
.brand { gap: 11px; padding: 4px 8px 4px 4px; color: #fff; }
.brand:hover { background: rgba(255,255,255,.06); }
.logo { width: 42px; height: 42px; border-radius: 12px; box-shadow: 0 7px 18px rgba(82, 53, 222, .35); }
.brand-name { color: #fff; font: 700 17px/1.15 Inter, sans-serif; letter-spacing: -.03em; }
.brand-sub { color: #aeb5d1; font-size: 11px; letter-spacing: 0; }
.actions { min-width: 0; margin-left: auto; flex-wrap: nowrap; gap: 7px; }
.topbar .btn, .topbar .icon-btn {
  min-height: 38px;
  color: #e9ebf8;
  border-color: #343850;
  background: #20233a;
  box-shadow: none;
}
.topbar .btn { padding: 9px 12px; font-size: 12px; white-space: nowrap; }
.topbar .btn:hover, .topbar .icon-btn:hover { color: #fff; border-color: #5a607f; background: #2a2e49; }
.topbar .btn.primary {
  color: #fff;
  border-color: #7657ff;
  background: #7657ff;
  box-shadow: 0 7px 20px rgba(109, 74, 255, .3);
}
.topbar .btn.primary:hover { background: #866cff; border-color: #866cff; transform: translateY(-1px); }
.topbar .btn-group, .topbar .zoom { padding: 3px; border-color: #343850; background: #0e1020; }
.topbar .btn-group .btn { min-height: 30px; padding-block: 6px; background: transparent; border-color: transparent; }
.topbar .zoom span { color: #c1c6db; }
.topbar .pill { color: #ddd6ff; background: rgba(118,87,255,.2); }
.topbar .credits-pill { border-color: #424764; background: #20233a; color: #d9d3ff; }
.topbar .acc-avatar { background: linear-gradient(135deg, #7c5cff, #3483ff); box-shadow: 0 0 0 3px rgba(255,255,255,.08); }
.workspace-only { display: inline-flex; }
body.mode-home .workspace-only, body.mode-admin .workspace-only { display: none; }
.panel-toggle[aria-pressed="true"] { color: #fff; background: #5938e8; border-color: #7657ff; }

/* Workspace structure */
.layout { grid-template-columns: 368px minmax(0, 1fr); background: var(--bg); }
.panel {
  padding: 0 14px 28px;
  background: var(--panel);
  border-right: 1px solid var(--border);
  box-shadow: 8px 0 26px rgba(26, 31, 57, .035);
}
body.panel-collapsed .layout { grid-template-columns: 0 minmax(0, 1fr); }
body.panel-collapsed .panel { padding-inline: 0; border: 0; overflow: hidden; opacity: 0; pointer-events: none; }
.layout, .panel { transition: grid-template-columns .32s var(--ease), opacity .2s ease; }
.panel-top {
  margin: 0 -14px 16px;
  padding: 15px 14px 13px;
  background: rgba(248,249,252,.92);
  border-bottom: 1px solid rgba(226,229,238,.8);
  backdrop-filter: blur(16px);
}
.search-wrap > .icon { left: 14px; color: #838aa0; }
.panel-top .search-wrap input[type="search"] {
  height: 42px;
  padding-left: 40px;
  border: 1px solid #dde1eb;
  border-radius: 13px;
  background: #fff;
  box-shadow: 0 3px 12px rgba(23, 28, 52, .04);
}
.panel-top-btns { justify-content: flex-start; gap: 18px; margin: 8px 4px 0; }
.link-btn { color: #6d4aff; font-size: 11px; font-weight: 650; text-decoration: none; }

/* Settings cards */
.group {
  margin-bottom: 10px;
  border-color: #e1e4ed;
  border-radius: 15px;
  box-shadow: 0 2px 8px rgba(22, 27, 52, .025);
  overflow: clip;
}
.group:hover { border-color: #d1d5e2; box-shadow: 0 7px 22px rgba(27, 31, 58, .055); }
.group[open] { border-color: #d8d4f4; box-shadow: 0 10px 28px rgba(42, 34, 93, .075); }
.group > summary { min-height: 54px; padding: 11px 13px; font-size: 13px; font-weight: 650; letter-spacing: -.01em; }
.group > summary:hover { background: #fafaff; }
.group[open] > summary { color: #4e35ba; background: #fbfaff; border-bottom-color: #ebe8f8; }
.group > summary::after { width: 7px; height: 7px; border-color: #8990a5; }
.sec-icon { width: 31px; height: 31px; color: #6849e8; background: #efecff; border-radius: 9px; }
.group-body { padding: 16px; }

/* Forms */
label { margin-bottom: 13px; color: #363b50; font-size: 12px; font-weight: 600; }
label output { color: #6547e8; background: #efecff; }
input[type="text"], input[type="password"], input[type="email"], input[type="url"], input[type="search"], input[type="number"], textarea, select {
  min-height: 42px;
  margin-top: 6px;
  padding: 10px 12px;
  color: #1e2236;
  border: 1px solid #dce0ea;
  border-radius: 11px;
  background: #fbfcfe;
  box-shadow: inset 0 1px 2px rgba(20, 24, 44, .025);
  transition: border-color .16s, box-shadow .16s, background .16s;
}
textarea { min-height: 88px; line-height: 1.5; }
input:hover, textarea:hover, select:hover { border-color: #c2c8d8; background: #fff; }
input:focus, textarea:focus, select:focus {
  border-color: #7b5cff;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(109,74,255,.1);
  outline: none;
}
select {
  background-image: linear-gradient(45deg, transparent 50%, #70778b 50%), linear-gradient(135deg, #70778b 50%, transparent 50%);
  background-position: calc(100% - 17px) 18px, calc(100% - 12px) 18px;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.row, .row3 { gap: 10px; }
.hint { color: #737b90; font-size: 11.5px; line-height: 1.55; }
.sub-head, .lab-sub { color: #777f94; letter-spacing: .09em; }

/* Controls and buttons */
.btn {
  min-height: 40px;
  padding: 9px 14px;
  font-weight: 650;
  border-color: #d8dce8;
  border-radius: 11px;
  box-shadow: 0 1px 2px rgba(19,24,48,.025);
  transition: transform .16s var(--ease), box-shadow .16s, background .16s, border-color .16s, color .16s;
}
.btn:hover { color: #5838d5; border-color: #a99cf0; background: #fbfaff; box-shadow: 0 7px 18px rgba(45, 38, 92, .08); transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(.985); }
.btn.primary { background: #6d4aff; border-color: #6d4aff; box-shadow: 0 7px 18px rgba(109,74,255,.22); }
.btn.primary:hover { color: #fff; background: #5b3cde; border-color: #5b3cde; }
.btn.ghost { background: #fff; }
.file-btn { border-style: dashed; border-color: #bcb4eb; color: #5e43ce; background: #faf9ff; }
.file-btn:hover { border-color: #7657ff; background: #f3f0ff; }
input[type="checkbox"] { accent-color: #6d4aff; }
input[type="range"] { accent-color: #6d4aff; }

/* Preview desk */
.preview, .lab-main {
  position: relative;
  background-color: #dfe4ee;
  background-image: radial-gradient(circle at 1px 1px, rgba(66,74,101,.11) 1px, transparent 0);
  background-size: 22px 22px;
}
.page-wrap { filter: drop-shadow(0 22px 30px rgba(38,43,67,.16)); transition: transform .24s var(--ease), filter .24s; }
.page-wrap:hover { filter: drop-shadow(0 28px 38px rgba(38,43,67,.21)); }
.lab-doc-tools {
  min-height: 62px;
  align-items: center;
  padding: 10px 16px;
  background: rgba(248,249,252,.93);
  border-bottom-color: #d9dde8;
  backdrop-filter: blur(15px);
}
.lab-main iframe { margin: 0; background: transparent; }
.lab-intro { padding: 22px 4px 10px; }
.lab-intro h2 { color: #171b2e; font-size: 22px; letter-spacing: -.035em; }
.lab-cover { border-color: #e1e4ed; border-radius: 14px; box-shadow: var(--shadow-sm); }
.lab-cover > summary { padding: 11px 2px; color: #2d3248; }
.size-grid { gap: 8px; }

/* Lab workspace — shares the Assignment editor's hierarchy and design language */
.lab-title-icon, .lab-workspace-icon {
  display: grid; place-items: center; flex: none; width: 30px; height: 30px;
  border-radius: 8px; color: #6d4aff; background: #eee9ff;
}
.lab-title-copy { display: grid; min-width: 0; line-height: 1.15; }
.lab-title-copy b { color: #fff; font-size: 12px; font-weight: 700; }
.lab-title-copy small { margin-top: 2px; overflow: hidden; color: #aaa2c6; font-size: 8.5px; text-overflow: ellipsis; white-space: nowrap; }
.lab-layout {
  grid-template-columns: 385px minmax(0, 1fr);
  grid-template-rows: 48px minmax(0, 1fr);
  background: #eeecf5;
}
.lab-workspace-bar {
  grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 7px 16px; border-bottom: 1px solid #ddd8e9; background: #faf9fd; box-shadow: 0 2px 7px rgba(34,24,70,.04); z-index: 3;
}
.lab-workspace-heading { display: flex; align-items: center; gap: 9px; min-width: 0; }
.lab-workspace-heading > span:last-child { display: grid; min-width: 0; }
.lab-workspace-heading b { color: #211b38; font-size: 12px; }
.lab-workspace-heading small { margin-top: 1px; color: #817992; font-size: 8.5px; }
.lab-workspace-state { display: inline-flex; align-items: center; gap: 6px; color: #6d6580; font-size: 9px; white-space: nowrap; }
.lab-workspace-state .badge-dot { width: 6px; height: 6px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,.11); }
.lab-panel { grid-column: 1; grid-row: 2; padding: 0 14px 24px; background: #fbfaff; border-right-color: #ddd8e9; scrollbar-gutter: stable; }
.lab-main { grid-column: 2; grid-row: 2; overflow: hidden; }
.lab-intro { padding: 18px 5px 9px; }
.lab-intro h2 { font-size: 20px; }
.lab-intro p { font-size: 11px; }
.lab-workflow { display: flex; align-items: center; margin: 0 0 14px; padding: 9px 10px; border: 1px solid #e2dcf0; border-radius: 12px; background: #fff; box-shadow: 0 3px 10px rgba(42,31,83,.04); }
.lab-workflow span { display: flex; align-items: center; gap: 5px; color: #655d78; }
.lab-workflow b { display: grid; place-items: center; width: 19px; height: 19px; border-radius: 50%; background: #6d4aff; color: #fff; font-size: 9px; }
.lab-workflow small { font-size: 8.5px; font-weight: 700; }
.lab-workflow i { flex: 1; height: 1px; margin: 0 7px; background: #dcd5ec; }
.lab-box { padding-top: 0; }
.lab-cover { overflow: clip; margin-bottom: 10px; border-color: #e1dbea; border-radius: 12px; box-shadow: none; }
.lab-cover > summary { position: relative; padding: 11px 24px 11px 2px; font-size: 11px; }
.lab-cover > summary::after { content: '›'; position: absolute; right: 3px; top: 8px; color: #8a819f; font-size: 18px; transform: rotate(90deg); transition: transform .16s; }
.lab-cover[open] > summary::after { transform: rotate(-90deg); }
.lab-panel input, .lab-panel textarea, .lab-panel select { border-radius: 9px; font-size: 11px; }
.lab-panel label { color: #3b344e; font-size: 10.5px; font-weight: 650; }
.lab-panel .row { align-items: start; }
#btnLabWrite { position: sticky; bottom: 8px; z-index: 5; min-height: 44px; box-shadow: 0 9px 24px rgba(89,56,232,.28); }
.lab-doc-tools { gap: 6px; min-height: 54px; padding: 7px 12px; background: rgba(250,249,253,.96); }
.lab-doc-tools .btn { min-height: 34px; padding: 7px 10px; border-radius: 8px; font-size: 9.5px; }
.lab-main iframe, .lab-main textarea { margin: 14px auto; width: calc(100% - 28px); border: 1px solid #d8d3e2; border-radius: 8px; background: #fff; box-shadow: 0 16px 36px rgba(38,31,61,.15); }
.lab-main textarea { padding: 20px 24px; }
@media (max-width: 980px) {
  .lab-layout { grid-template-columns: 340px minmax(0, 1fr); }
  .lab-title-copy small { display: none; }
}
@media (max-width: 760px) {
  .lab-layout { display: block; height: auto; overflow-y: auto; }
  .lab-workspace-bar { position: sticky; top: 0; }
  .lab-panel { width: 100%; border-right: 0; border-bottom: 1px solid #ddd8e9; }
  .lab-main { min-height: 78vh; }
  .lab-workspace-state { display: none; }
}

/* Home / tool chooser */
.home {
  padding: 76px 28px 48px;
  background:
    radial-gradient(circle at 16% 12%, rgba(112,82,255,.13), transparent 28%),
    radial-gradient(circle at 84% 78%, rgba(39,126,255,.1), transparent 28%),
    #f4f6fb;
}
.home-inner { max-width: 1100px; }
.home-head { max-width: 760px; margin-bottom: 40px; }
.home h1 { color: #15182a; font: 750 clamp(38px, 5vw, 58px)/1.02 Inter, sans-serif; letter-spacing: -.055em; }
.home-head p { max-width: 650px; margin-top: 16px; color: #626a80; font-size: 18px; }
.home-cards { gap: 24px; }
.home-card {
  position: relative;
  border: 1px solid rgba(216,220,233,.95);
  border-radius: 22px;
  background: rgba(255,255,255,.9);
  box-shadow: 0 16px 50px rgba(33,39,70,.075);
  transition: transform .3s var(--ease), box-shadow .3s, border-color .3s;
}
.home-card:hover { transform: translateY(-7px); border-color: #b8acef; box-shadow: 0 25px 65px rgba(42,38,83,.15); }
.home-preview { height: 168px; padding: 25px 30px 0; background: linear-gradient(145deg, #ebe9f8, #e3e8f3); border-bottom-color: #e0e3ed; }
.home-card:first-child .home-preview { background: linear-gradient(145deg, #e5e2fa, #e7ebf5); }
.home-card:nth-child(2) .home-preview { background: linear-gradient(145deg, #dde7f6, #e8e8f5); }
.home-body { gap: 14px; padding: 27px 29px 30px; }
.home-icon { width: 42px; height: 42px; color: #fff; background: linear-gradient(135deg, #7657ff, #4f7dff); border-radius: 12px; box-shadow: 0 8px 18px rgba(96,67,221,.22); }
.home-title { color: #191c2f; font: 720 23px/1.2 Inter, sans-serif; letter-spacing: -.035em; }
.home-text, .home-points { color: #656d82; }
.home-open { color: #6343df; }
.home-foot { max-width: 1100px; border-top-color: #dce0ea; }
.home-row { border-radius: 16px; background: rgba(255,255,255,.82); box-shadow: var(--shadow-sm); }

/* Dialogs, account menus and tables */
.studio { border: 1px solid #e2e5ee; border-radius: 20px; box-shadow: var(--shadow-lg); }
.studio::backdrop { background: rgba(12,14,30,.62); backdrop-filter: blur(8px); }
.studio-head { background: #f8f9fc; border-bottom-color: #e4e7ef; }
.acc-menu { border-color: #e0e3ed; border-radius: 15px; box-shadow: 0 22px 60px rgba(13,17,38,.24); }
.pack, .stat, .table-wrap { border-radius: 15px; }
.admin-page { background: #f1f3f8; }
.admin-head h1 { font-size: 30px; letter-spacing: -.04em; }
.admin-table th { background: #f5f6fa; }
.badge { padding: 3px 9px; }
#toast { border-radius: 13px; background: #16192d; }

/* Desktop command-bar overflow is deliberate and tidy */
@media (max-width: 1320px) {
  .topbar { flex-wrap: wrap; height: auto; padding-bottom: 9px; }
  .topbar .brand { flex: 1; }
  .actions { width: 100%; margin: 0; padding: 4px 0 2px; overflow-x: auto; scrollbar-width: none; }
  .actions::-webkit-scrollbar { display: none; }
  :root { --topbar-h: 127px; }
}

@media (max-width: 900px) {
  :root { --topbar-h: 118px; }
  .topbar { padding: 10px 12px 8px; gap: 8px; }
  .brand-sub { display: none; }
  .actions { gap: 6px; }
  .layout { display: block; overflow-y: auto; }
  .panel { overflow: visible; width: 100%; padding: 0 12px 24px; border-right: 0; }
  .panel-top { position: relative; margin-inline: -12px; }
  .preview { min-height: 70vh; padding: 28px 10px 60px; }
  body.panel-collapsed .panel { display: none; }
  .lab-main iframe, .lab-main textarea { height: 76vh; }
  .studio-body { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  :root { --topbar-h: 111px; }
  .logo { width: 36px; height: 36px; }
  .brand-name { font-size: 15px; }
  .account-area .btn { padding-inline: 10px; }
  .topbar .btn { min-height: 34px; padding: 7px 10px; }
  .home { padding: 46px 15px 32px; }
  .home h1 { font-size: 38px; }
  .home-head p { font-size: 16px; }
  .home-cards { grid-template-columns: 1fr; }
  .home-preview { height: 144px; padding-inline: 18px; }
  .home-body { padding: 22px; }
  .row, .row3 { grid-template-columns: 1fr; }
  .size-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .home-card, .page-wrap, .layout, .panel, .btn { transition: none !important; }
}

/* Final command-bar refinements after the shared button layer. */
.topbar .btn.ghost, .topbar a.btn { color: #e9ebf8; border-color: #343850; background: #20233a; }
.topbar .btn.ghost:hover, .topbar a.btn:hover { color: #fff; border-color: #5a607f; background: #2a2e49; }
.topbar .btn.primary, .topbar a.btn.primary { color: #fff; border-color: #7657ff; background: #7657ff; }


/* =========================================================
   Assignment Studio 2026 Redesign (Pixel-Matched)
   ========================================================= */

:root {
  --studio-purple: #6d4aff;
  --studio-purple-hover: #5936eb;
  --studio-purple-tint: #ece8ff;
  --studio-dark-nav: #121528;
  --studio-bg: #f3f4fa;
  --studio-card: #ffffff;
  --studio-border: #e6e9f2;
  --studio-border-light: #edf0f7;
  --studio-text: #121528;
  --studio-muted: #64748b;
}

/* ---------- Studio Topbar ---------- */
.studio-topbar {
  background: var(--studio-dark-nav) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  min-height: 60px;
  height: 60px;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
  z-index: 50;
}

.studio-topbar .brand {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  user-select: none;
}

.studio-squircle-logo {
  width: 38px;
  height: 38px;
  background: var(--studio-purple);
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(109, 74, 255, 0.35);
  flex-shrink: 0;
}
.studio-squircle-logo svg {
  width: 20px;
  height: 20px;
  stroke: #ffffff;
}

.studio-topbar .brand-name {
  color: #ffffff !important;
  font-family: "Plus Jakarta Sans", "Inter", sans-serif;
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.studio-topbar .brand-sub {
  color: #8f97bb !important;
  font-size: 11.5px;
  margin-top: 2px;
}

/* Center Navigation Tabs */
.topbar-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  padding: 4px;
}

.topbar-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: transparent;
  border: none;
  color: #a5accb;
  font-family: "Inter", sans-serif;
  font-size: 13px;
  font-weight: 500;
  padding: 7px 16px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.topbar-tab:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.07);
}

.topbar-tab.active {
  background: var(--studio-purple);
  color: #ffffff;
  font-weight: 600;
  box-shadow: 0 2px 10px rgba(109, 74, 255, 0.4);
}

.topbar-tab svg {
  width: 15px;
  height: 15px;
}

/* Right Topbar Controls */
.topbar-right {
  display: flex;
  align-items: center;
  gap: 14px;
}

.topbar-bell-btn {
  position: relative;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #c5cae9;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
}

.topbar-bell-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
}

.topbar-bell-btn svg {
  width: 18px;
  height: 18px;
}

.bell-badge-dot {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 7px;
  height: 7px;
  background: #ef4444;
  border-radius: 50%;
  border: 1.5px solid var(--studio-dark-nav);
}

.account-area {
  display: flex;
  align-items: center;
  gap: 10px;
}

.acc-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #5b3bd9;
  color: #ffffff;
  font-family: "Plus Jakarta Sans", "Inter", sans-serif;
  font-weight: 700;
  font-size: 15px;
  border: 2px solid rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* ---------- 3-Column Studio Layout ---------- */
.studio-layout {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr) 300px;
  height: calc(100vh - 60px);
  min-height: 0;
  background: var(--studio-bg);
  overflow: hidden;
}

/* ---------- Left Sidebar: Settings Cards ---------- */
.studio-sidebar-left {
  width: 100%;
  background: var(--studio-bg);
  border-right: 1px solid #e2e6f0;
  overflow-y: auto;
  padding: 16px 14px 40px;
  display: block; /* Normal block flow - prevents flex squashing */
  box-sizing: border-box;
}

.btn-new-assignment {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--studio-purple);
  color: #ffffff;
  border: none;
  border-radius: 12px;
  padding: 13px 16px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 4px 14px rgba(109, 74, 255, 0.28);
  cursor: pointer;
  transition: all 0.15s ease;
  margin-bottom: 12px;
  box-sizing: border-box;
}

.btn-new-assignment:hover {
  background: var(--studio-purple-hover);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(109, 74, 255, 0.36);
}

.btn-new-assignment svg {
  width: 16px;
  height: 16px;
}

.studio-sidebar-left .panel-top {
  position: relative;
  background: transparent;
  margin: 0 0 12px;
  padding: 0;
}

.studio-sidebar-left .search-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.studio-sidebar-left .search-wrap svg {
  position: absolute;
  left: 12px;
  width: 15px;
  height: 15px;
  color: #94a3b8;
  pointer-events: none;
}

.studio-sidebar-left .search-wrap input[type="search"] {
  width: 100%;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 9px 12px 9px 34px;
  font-size: 12.5px;
  color: #1e293b;
  margin: 0;
  outline: none;
  transition: all 0.15s ease;
  box-sizing: border-box;
}

.studio-sidebar-left .search-wrap input[type="search"]:focus {
  border-color: var(--studio-purple);
  box-shadow: 0 0 0 3px rgba(109, 74, 255, 0.12);
}

.studio-sidebar-left .panel-top-btns {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 6px;
  padding: 0 2px;
}

.studio-sidebar-left .link-btn {
  font-size: 11px;
  font-weight: 600;
  color: #64748b;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.studio-sidebar-left .link-btn:hover {
  color: var(--studio-purple);
}

.studio-sidebar-left #btnReset {
  width: 100%;
  margin-top: 14px;
  padding: 11px 16px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #ffffff;
  color: #64748b;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.studio-sidebar-left #btnReset:hover {
  border-color: #cbd5e1;
  color: #1e293b;
  background: #f8fafc;
}

/* Left Sidebar Accordion Cards */
.studio-sidebar-left .group {
  display: block;
  margin: 0 0 10px 0;
  background: #ffffff;
  border: 1px solid #edf0f7;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(18, 21, 40, 0.03);
  transition: all 0.15s ease;
  overflow: hidden;
  box-sizing: border-box;
}

.studio-sidebar-left .group:hover {
  border-color: #dce1f0;
  box-shadow: 0 3px 8px rgba(18, 21, 40, 0.05);
}

.studio-sidebar-left .group[open] {
  border-color: #d4daf0;
  box-shadow: 0 4px 14px rgba(18, 21, 40, 0.08);
}

.studio-sidebar-left .group > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  height: 48px;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 600;
  color: #121528;
  cursor: pointer;
  list-style: none;
  user-select: none;
  background: #ffffff;
  transition: background 0.12s ease;
  box-sizing: border-box;
  white-space: nowrap;
}

.studio-sidebar-left .group > summary::-webkit-details-marker { display: none; }

.studio-sidebar-left .group > summary:hover {
  background: #fafbfe;
}

.studio-sidebar-left .group > summary .sec-icon {
  width: 20px;
  height: 20px;
  background: transparent;
  color: var(--studio-purple);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.studio-sidebar-left .group > summary .sec-icon svg {
  width: 18px;
  height: 18px;
  stroke: var(--studio-purple);
}

.studio-sidebar-left .group > summary::after {
  content: "";
  margin-left: auto;
  width: 6.5px;
  height: 6.5px;
  border-right: 2px solid #94a3b8;
  border-bottom: 2px solid #94a3b8;
  transform: rotate(-45deg);
  transition: transform 0.2s cubic-bezier(0.2, 0.7, 0.3, 1);
  flex-shrink: 0;
}

.studio-sidebar-left .group[open] > summary::after {
  transform: rotate(45deg);
}

.studio-sidebar-left .group[open] > summary {
  border-bottom: 1px solid #f0f3fa;
}

.studio-sidebar-left .group-body {
  padding: 14px;
  background: #ffffff;
}

/* ---------- Center Stage ---------- */
.center-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100%;
  background: var(--studio-bg);
  overflow: hidden;
}

.stage-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 24px;
  flex-shrink: 0;
  z-index: 10;
}

.stage-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #ffffff;
  border: 1px solid #e2e6f0;
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 12.5px;
  font-weight: 600;
  color: #121528;
  box-shadow: 0 1px 4px rgba(18, 21, 40, 0.04);
}

.live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.25);
}

.stage-pagination {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #ffffff;
  border: 1px solid #e2e6f0;
  border-radius: 999px;
  padding: 3px 8px;
  box-shadow: 0 1px 4px rgba(18, 21, 40, 0.04);
}

.stage-nav-arrow {
  background: transparent;
  border: none;
  font-size: 18px;
  line-height: 1;
  color: #64748b;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.12s ease;
}

.stage-nav-arrow:hover {
  background: #f1f5f9;
  color: #0f172a;
}

.stage-page-select {
  font-size: 13px;
  font-weight: 600;
  color: #121528;
  padding: 2px 8px;
  cursor: pointer;
  user-select: none;
}

.stage-view-tools {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.stage-tool-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #ffffff;
  border: 1px solid #e2e6f0;
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 12.5px;
  font-weight: 600;
  color: #1e293b;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(18, 21, 40, 0.04);
  transition: all 0.12s ease;
}

.stage-tool-pill:hover {
  border-color: #cbd5e1;
  background: #f8fafc;
}

.stage-tool-pill svg {
  width: 14px;
  height: 14px;
  color: #64748b;
}

.stage-tool-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: #ffffff;
  border: 1px solid #e2e6f0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1e293b;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(18, 21, 40, 0.04);
  transition: all 0.12s ease;
}

.stage-tool-icon:hover {
  border-color: #cbd5e1;
  background: #f8fafc;
}

.stage-tool-icon svg {
  width: 16px;
  height: 16px;
}

.stage-viewport {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
}

/* Floating Vertical Toolbar */
.floating-palette {
  position: absolute;
  top: 60px;
  left: 20px;
  z-index: 25;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: #ffffff;
  border: 1px solid #e2e6f0;
  border-radius: 16px;
  padding: 6px;
  box-shadow: 0 6px 20px rgba(18, 21, 40, 0.08);
}

.fp-btn {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: transparent;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #475569;
  cursor: pointer;
  transition: all 0.15s ease;
}

.fp-btn:hover {
  background: #f1f5f9;
  color: #0f172a;
}

.fp-btn.active {
  background: var(--studio-purple);
  color: #ffffff;
  box-shadow: 0 3px 10px rgba(109, 74, 255, 0.35);
}

.fp-btn svg {
  width: 18px;
  height: 18px;
}

/* Canvas Desk & Wooden Clipboard */
.preview-desk-wrap {
  flex: 1;
  height: 100%;
  overflow-y: auto;
  padding: 16px 30px 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.preview {
  --page-w: 635px; /* 80% default to fit beautifully */
  width: 100%;
  max-width: 100%;
  background: transparent !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0;
  margin: 0;
  overflow: visible;
}

.preview::before {
  display: none !important;
  content: none !important;
}

/* Clean Document Sheet Display (pure paper, no clipboard frame) */
.page-wrap {
  position: relative;
  width: 100%;
  max-width: var(--page-w);
  margin: 8px auto 36px;
  padding: 0;
  background: transparent !important;
  border-radius: 0;
  box-shadow: none !important;
  border: none !important;
  transition: transform 0.2s ease, max-width 0.2s ease;
  box-sizing: border-box;
}

.page-wrap::before,
.page-wrap::after {
  display: none !important;
  content: none !important;
}

.page-wrap canvas {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 3px;
  background: #ffffff;
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.08),
    0 10px 28px rgba(15, 23, 42, 0.12);
}

.page-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
  font-size: 11.5px;
  color: #64748b;
  padding: 0 2px;
}

.page-label span {
  padding: 3px 10px;
  background: rgba(255, 255, 255, 0.9);
  color: #475569;
  border: 1px solid #dcd8e8;
  border-radius: 999px;
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.page-label button {
  padding: 3px 12px;
  font: 500 11.5px "Inter", sans-serif;
  color: #6d4aff;
  background: #ffffff;
  border: 1px solid #dcd8e8;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.15s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.page-label button:hover {
  background: #6d4aff;
  color: #ffffff;
  border-color: #6d4aff;
}

/* ---------- Right Sidebar: Quick Tools & AI Assist ---------- */
.studio-sidebar-right {
  width: 100%;
  background: var(--studio-bg);
  border-left: 1px solid #e2e6f0;
  overflow-y: auto;
  padding: 14px 16px 40px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.right-tabs {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 4px;
  background: #e4e7f2;
  border-radius: 12px;
  padding: 4px;
}

.right-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: transparent;
  border: none;
  border-radius: 9px;
  padding: 8px 12px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 500;
  color: #64748b;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.right-tab.active {
  background: var(--studio-purple);
  color: #ffffff;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(109, 74, 255, 0.28);
}

.right-tab svg {
  width: 15px;
  height: 15px;
}

.studio-sidebar-right .studio-card {
  background: #ffffff;
  border: 1px solid #edf0f7;
  border-radius: 14px;
  padding: 16px;
  box-shadow: 0 1px 4px rgba(18, 21, 40, 0.03);
}

.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.card-title-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.card-icon-purple {
  color: var(--studio-purple);
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-icon-purple svg {
  width: 18px;
  height: 18px;
  stroke: var(--studio-purple);
}

.card-title {
  font-size: 14px;
  font-weight: 700;
  color: #121528;
}

.card-chevron {
  width: 16px;
  height: 16px;
  color: #94a3b8;
}

.card-sub {
  font-size: 12px;
  color: #64748b;
  line-height: 1.45;
  margin: 6px 0 12px;
}

/* AI Assist Input Box */
.ai-assist-input-wrap {
  display: flex;
  align-items: center;
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  padding: 4px 6px 4px 12px;
  transition: all 0.15s ease;
}

.ai-assist-input-wrap:focus-within {
  border-color: var(--studio-purple);
  box-shadow: 0 0 0 3px rgba(109, 74, 255, 0.12);
}

.ai-assist-input-wrap input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 13px;
  color: #1e293b;
  outline: none;
  padding: 6px 0;
  margin: 0;
}

.btn-send-purple {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--studio-purple);
  color: #ffffff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.15s ease;
}

.btn-send-purple:hover {
  background: var(--studio-purple-hover);
  transform: scale(1.04);
}

.btn-send-purple svg {
  width: 16px;
  height: 16px;
}

/* Quick Tools 3x2 Grid */
.quick-tools-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 12px;
}

.qt-btn {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 12px 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 600;
  color: #1e293b;
}

.qt-btn:hover {
  border-color: var(--studio-purple);
  background: #f9f8ff;
  transform: translateY(-1px);
}

.qt-btn svg {
  width: 16px;
  height: 16px;
  color: #475569;
}

.qt-btn.qt-danger {
  color: #ef4444;
}

.qt-btn.qt-danger svg {
  color: #ef4444;
}

.qt-btn.qt-danger:hover {
  border-color: #ef4444;
  background: #fef2f2;
}

/* Page Actions */
.page-actions-stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}

.pa-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #ffffff;
  border: 1px solid #e2e6f0;
  border-radius: 10px;
  padding: 10px 16px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: #1e293b;
  cursor: pointer;
  transition: all 0.15s ease;
}

.pa-btn:hover {
  border-color: var(--studio-purple);
  color: var(--studio-purple);
  background: #f9f8ff;
  transform: translateY(-1px);
}

.pa-btn svg {
  width: 16px;
  height: 16px;
}

.pa-btn.primary {
  background: var(--studio-purple);
  color: #ffffff;
  border-color: var(--studio-purple);
  padding: 12px 16px;
  font-size: 13.5px;
  box-shadow: 0 4px 12px rgba(109, 74, 255, 0.28);
}

.pa-btn.primary:hover {
  background: var(--studio-purple-hover);
  color: #ffffff;
  box-shadow: 0 6px 16px rgba(109, 74, 255, 0.36);
}

/* Focus preview collapse */
body.panel-collapsed .studio-layout {
  grid-template-columns: 0 minmax(0, 1fr) 0;
}
body.panel-collapsed .studio-sidebar-left,
body.panel-collapsed .studio-sidebar-right {
  display: none;
}

/* Responsive queries */
@media (max-width: 1280px) {
  .studio-layout {
    grid-template-columns: 260px minmax(0, 1fr) 280px;
  }
}

@media (max-width: 1080px) {
  .studio-layout {
    grid-template-columns: 260px minmax(0, 1fr);
  }
  .studio-sidebar-right {
    display: none;
  }
}

@media (max-width: 768px) {
  .studio-topbar .topbar-nav {
    display: none;
  }
  .studio-layout {
    grid-template-columns: 1fr;
  }
  .studio-sidebar-left {
    display: none;
  }
  .floating-palette {
    left: 8px;
    top: 55px;
  }
}



/* =========================================================
   MS Word Ribbon & 3-Column Fluent Workspace (2026 Edition)
   Pixel-Matched to user reference (f4cb89f1)
   ========================================================= */

/* Topbar in Word Mode */
.word-titlebar {
  background: #1d163a !important;
  min-height: 50px !important;
  height: 50px !important;
  padding: 0 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25) !important;
  /* Keep account/profile popovers above the ribbon's own stacking context. */
  z-index: 2000 !important;
  position: relative;
}

.word-titlebar .account-area,
.word-titlebar .acc-menu-wrap {
  position: relative;
  z-index: 2;
}

.word-titlebar .acc-menu {
  z-index: 2100 !important;
}

.word-titlebar-left {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}

.word-titlebar .brand {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
}

.word-titlebar .studio-squircle-logo {
  width: 30px;
  height: 30px;
  background: #6d4aff;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(109, 74, 255, 0.4);
  flex-shrink: 0;
}
.word-titlebar .studio-squircle-logo svg {
  width: 16px;
  height: 16px;
  stroke: #ffffff;
}

.word-brand-name {
  color: #ffffff !important;
  font-family: "Plus Jakarta Sans", "Inter", sans-serif;
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.word-doc-title-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  padding: 3px 10px;
  transition: all 0.15s ease;
}
.word-doc-title-wrap:focus-within {
  background: rgba(255, 255, 255, 0.12);
  border-color: #6d4aff;
  box-shadow: 0 0 0 2px rgba(109, 74, 255, 0.3);
}

.word-doc-title-input {
  background: transparent;
  border: none;
  color: #ffffff;
  font-family: "Plus Jakarta Sans", "Inter", sans-serif;
  font-size: 13px;
  font-weight: 600;
  width: 320px;
  max-width: 35vw;
  outline: none;
}
.word-title-pen {
  font-size: 13px;
  cursor: pointer;
  user-select: none;
  opacity: 0.8;
}
.word-title-pen:hover {
  opacity: 1;
}

.word-cloud-status {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #a5accb;
  font-size: 12px;
  white-space: nowrap;
}
.cloud-check-icon {
  width: 14px;
  height: 14px;
}
.cloud-icon {
  width: 14px;
  height: 14px;
}

.word-titlebar-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.word-share-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #6d4aff;
  color: #ffffff;
  border: none;
  border-radius: 999px;
  padding: 5px 14px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(109, 74, 255, 0.35);
  transition: all 0.15s ease;
}
.word-share-btn:hover {
  background: #5936eb;
}
.word-share-btn svg {
  width: 14px;
  height: 14px;
}

.topbar-help-btn, .topbar-settings-btn {
  position: relative;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #c5cae9;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
}
.topbar-help-btn:hover, .topbar-settings-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
}
.topbar-settings-btn svg {
  width: 16px;
  height: 16px;
}

/* Word Mode layout container */
body.mode-hand {
  overflow: hidden;
}

.word-layout {
  display: flex !important;
  flex-direction: column !important;
  height: calc(100vh - 50px) !important;
  overflow: hidden !important;
  background: #ece9f5 !important;
  padding: 0 !important;
  margin: 0 !important;
  grid-template-columns: none !important;
  position: relative !important;
}

/* ---------- MS Word Ribbon Bar ---------- */
.word-ribbon {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border-bottom: 1px solid #dcd8e8;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
  z-index: 1000 !important;
  position: relative !important;
  overflow: visible !important;
  flex-shrink: 0;
}

.word-ribbon-tabs-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #f8f7fc;
  border-bottom: 1px solid #e7e5f0;
  padding: 0 12px;
  height: 36px;
}

.word-ribbon-tabs-left {
  display: flex;
  align-items: center;
  gap: 4px;
}

.ribbon-file-btn {
  background: #6d4aff;
  color: #ffffff;
  border: none;
  font-family: "Inter", sans-serif;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 14px;
  border-radius: 999px;
  cursor: pointer;
  margin-right: 4px;
  box-shadow: 0 2px 6px rgba(109, 74, 255, 0.25);
  transition: background 0.15s ease;
}
.ribbon-file-btn:hover {
  background: #5936eb;
}

.ribbon-tabs-list {
  display: flex;
  align-items: center;
  overflow-x: auto;
  scrollbar-width: none;
  white-space: nowrap;
}
.ribbon-tabs-list::-webkit-scrollbar {
  display: none;
}

.ribbon-tab {
  background: transparent;
  border: none;
  color: #4a4560;
  font-family: "Inter", sans-serif;
  font-size: 12.5px;
  font-weight: 500;
  padding: 8px 12px;
  cursor: pointer;
  position: relative;
  transition: color 0.15s ease;
}
.ribbon-tab:hover {
  color: #1d163a;
}
.ribbon-tab.active {
  color: #1d163a;
  font-weight: 700;
}
.ribbon-tab.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 10px;
  right: 10px;
  height: 2.5px;
  background: #6d4aff;
  border-radius: 2px;
}

.ribbon-tab-more-wrap {
  position: relative;
}
.ribbon-tab-more {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 8px 10px;
}
.ribbon-tab-more-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  background: #ffffff;
  border: 1px solid #dedae8;
  border-radius: 10px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.14);
  z-index: 100;
  min-width: 160px;
  padding: 6px;
}
.ribbon-tab-more-menu[hidden] {
  display: none;
}
.ribbon-tab-more-menu button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 12px;
  background: transparent;
  border: none;
  border-radius: 6px;
  font-size: 12.5px;
  font-family: "Inter", sans-serif;
  color: #2d264b;
  cursor: pointer;
  transition: all 0.15s ease;
}
.ribbon-tab-more-menu button:hover {
  background: #f1edfe;
  color: #6d4aff;
}
.ribbon-tab-more-menu button.active {
  background: #ede8fa;
  color: #6d4aff;
  font-weight: 700;
}

.word-ribbon-tabs-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ribbon-action-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  background: transparent;
  border: none;
  color: #4a4560;
  font-size: 12px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
}
.ribbon-action-btn:hover {
  background: #ece9f5;
  color: #1d163a;
}
.ribbon-action-btn svg {
  width: 14px;
  height: 14px;
}

.ribbon-export-dropdown-wrap {
  position: relative;
}

.ribbon-export-btn {
  background: #6d4aff;
  color: #ffffff;
  border: none;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 2px 6px rgba(109, 74, 255, 0.3);
  transition: background 0.15s ease;
}
.ribbon-export-btn:hover {
  background: #5936eb;
}
.ribbon-export-btn svg {
  width: 14px;
  height: 14px;
}

.ribbon-export-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  background: #ffffff;
  border: 1px solid #dedae8;
  border-radius: 10px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.14);
  z-index: 100;
  min-width: 200px;
  padding: 6px;
}
.ribbon-export-menu button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: left;
  padding: 8px 12px;
  background: transparent;
  border: none;
  border-radius: 6px;
  font-size: 12.5px;
  color: #2d264b;
  cursor: pointer;
  transition: all 0.15s ease;
}
.ribbon-export-menu button svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  stroke: #6d4aff;
}
.ribbon-export-menu button:hover {
  background: #f1edfe;
  color: #6d4aff;
}

/* Ribbon Content Area */
.word-ribbon-content {
  background: #faf9fd;
  height: 108px;
  flex-shrink: 0;
  padding: 6px 14px;
  display: flex;
  align-items: stretch;
  overflow: visible !important;
}

.ribbon-panel {
  display: none;
  align-items: stretch;
  gap: 8px;
  height: 100%;
}
.ribbon-panel.active {
  display: flex;
}

.ribbon-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 0 6px;
}

.ribbon-group-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
}

.ribbon-sep {
  width: 1px;
  background: #e4e1ee;
  margin: 4px 6px;
  flex-shrink: 0;
}

.ribbon-group-title {
  font-size: 10.5px;
  color: #858097;
  margin-top: 4px;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.ribbon-tool-big {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
  font-size: 11.5px;
  color: #2d264b;
  transition: all 0.15s ease;
}
.ribbon-tool-big:hover {
  background: #ede8fa;
  border-color: #d9d2f5;
}
.ribbon-tool-big .icon-big {
  width: 22px;
  height: 22px;
}

.ribbon-tool-stack {
  display: flex;
  flex-direction: column;
  gap: 2px;
  justify-content: center;
}

.ribbon-tool-mini {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  border-radius: 4px;
  border: none;
  background: transparent;
  font-size: 11px;
  color: #3c345a;
  cursor: pointer;
  transition: background 0.15s ease;
}
.ribbon-tool-mini:hover {
  background: #ede8fa;
}
.ribbon-tool-mini svg {
  width: 13px;
  height: 13px;
}

.ribbon-controls-grid {
  display: flex;
  flex-direction: column;
  gap: 4px;
  justify-content: center;
}

.ribbon-row {
  display: flex;
  align-items: center;
  gap: 3px;
}

.ribbon-select {
  background: #ffffff;
  border: 1px solid #dcd8e8;
  border-radius: 4px;
  height: 26px;
  padding: 0 6px;
  font-size: 12px;
  color: #2d264b;
  outline: none;
}
.ribbon-font-select {
  width: 140px;
}
.ribbon-size-select {
  width: 48px;
}

.ribbon-icon-btn {
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
  font-size: 12px;
  color: #3c345a;
  transition: all 0.15s ease;
  position: relative;
}
.ribbon-icon-btn:hover {
  background: #ede8fa;
  border-color: #d9d2f5;
}
.ribbon-icon-btn.active {
  background: #e4dcfa;
  border-color: #6d4aff;
  color: #6d4aff;
}
.ribbon-icon-btn svg {
  width: 14px;
  height: 14px;
}

.ribbon-color-bar {
  position: absolute;
  bottom: 3px;
  left: 4px;
  right: 4px;
  height: 3px;
  border-radius: 1px;
}
.highlight-bar {
  background: #facc15;
}
.font-bar {
  background: #dc2626;
}
.font-color-letter {
  margin-top: -3px;
  font-weight: 700;
}

.ribbon-styles-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.ribbon-style-card {
  border: 1px solid #dcd8e8;
  background: #ffffff;
  border-radius: 6px;
  padding: 6px 12px;
  min-width: 65px;
  text-align: center;
  cursor: pointer;
  transition: all 0.15s ease;
}
.ribbon-style-card .style-name {
  font-size: 11.5px;
  font-weight: 600;
  color: #2d264b;
}
.ribbon-style-card:hover {
  border-color: #bba9ff;
  background: #faf8ff;
}
.ribbon-style-card.active {
  border-color: #6d4aff;
  background: #f3effe;
  box-shadow: 0 0 0 1px #6d4aff;
}
.ribbon-style-card.active .style-name {
  color: #6d4aff;
}

.ribbon-pill-btn {
  background: #ffffff;
  border: 1px solid #dcd8e8;
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 11.5px;
  font-weight: 600;
  color: #3c345a;
  cursor: pointer;
  transition: all 0.15s ease;
}
.ribbon-pill-btn:hover {
  border-color: #6d4aff;
  color: #6d4aff;
  background: #f8f6fe;
}
.ribbon-pill-btn.active {
  background: #6d4aff;
  color: #ffffff;
  border-color: #6d4aff;
}

.ribbon-ai-writer-btn {
  background: linear-gradient(135deg, #f4effe, #e8e0ff) !important;
  border: 1px solid #c8b7ff !important;
  color: #6d4aff !important;
  font-weight: 700 !important;
}
.ribbon-ai-writer-btn:hover {
  background: linear-gradient(135deg, #eee6fd, #dfd5ff) !important;
  box-shadow: 0 2px 8px rgba(109, 74, 255, 0.25) !important;
}

/* ---------- 3-Column Workspace Body ---------- */
.word-workspace-body {
  display: flex !important;
  flex: 1 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  background: #ece9f5 !important;
}

/* Left Pages Sidebar (125px) */
.word-pages-sidebar {
  width: 125px !important;
  flex-shrink: 0 !important;
  background: #faf9fd !important;
  border-right: 1px solid #dedae8 !important;
  display: flex !important;
  flex-direction: column !important;
  z-index: 10 !important;
  box-shadow: 2px 0 6px rgba(0, 0, 0, 0.02) !important;
}

.word-pages-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  border-bottom: 1px solid #dedae8;
}

.word-pages-title {
  font-size: 13px;
  font-weight: 700;
  color: #1d163a;
}

.word-pages-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.wp-head-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 13px;
  color: #6d4aff;
  width: 22px;
  height: 22px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
}
.wp-head-btn:hover {
  background: #ede8fa;
}
.wp-head-del {
  color: #ef4444 !important;
}
.wp-head-del:hover {
  background: #fee2e2 !important;
}

.word-pages-list {
  flex: 1;
  overflow-y: auto;
  padding: 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: center;
}
.word-pages-list[hidden] {
  display: none;
}

.wp-card {
  width: 92px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  transition: transform 0.15s ease;
}
.wp-card:hover {
  transform: translateY(-2px);
}

.wp-card-preview {
  width: 88px;
  height: 118px;
  background-color: #ffffff;
  background-image: repeating-linear-gradient(to bottom, transparent, transparent 11px, #e2e8f0 11px, #e2e8f0 12px);
  background-position: 0 16px;
  border: 1.5px solid #dcd8e8;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  padding: 8px 6px;
  position: relative;
  overflow: hidden;
  transition: all 0.15s ease;
}
.wp-card-preview::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 18px;
  width: 1px;
  background: #fca5a5;
  z-index: 1;
}

.wp-card.active .wp-card-preview {
  border: 2px solid #6d4aff;
  box-shadow: 0 0 0 3px rgba(109, 74, 255, 0.22);
}

.wp-card-lines {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding-left: 18px;
  padding-top: 10px;
  position: relative;
  z-index: 2;
}

.wp-card-text-line {
  height: 4px;
  background: #cbd5e1;
  border-radius: 2px;
  opacity: 0.85;
}
.wp-card-text-line:nth-child(1) { width: 85%; }
.wp-card-text-line:nth-child(2) { width: 95%; }
.wp-card-text-line:nth-child(3) { width: 70%; }
.wp-card-text-line:nth-child(4) { width: 90%; }
.wp-card-text-line:nth-child(5) { width: 75%; }
.wp-card-text-line:nth-child(6) { width: 60%; }

.wp-card.active .wp-card-text-line {
  background: #818cf8;
}

/* real page picture, once the page has been drawn (the lines above are only a placeholder) */
.wp-card-canvas {
  display: none;
}
.wp-card-preview.has-render {
  padding: 0;
  background: #ffffff;
}
.wp-card-preview.has-render::before,
.wp-card-preview.has-render .wp-card-lines {
  display: none;
}
.wp-card-preview.has-render .wp-card-canvas {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.cover-card-canvas {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 3px;
}

.wp-add-tile {
  width: 88px;
  height: 118px;
  flex-shrink: 0;
  background: transparent;
  border: 1.5px dashed #c5c0d6;
  border-radius: 6px;
  color: #9992b3;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}
.wp-add-tile svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
}
.wp-add-tile:hover {
  border-color: #6d4aff;
  color: #6d4aff;
  background: #f8f6fe;
}

.wp-card-badge {
  background: #6d4aff;
  color: #ffffff;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  padding: 1px 8px;
  min-width: 20px;
  text-align: center;
}
.wp-card:not(.active) .wp-card-badge {
  background: #e2dfec;
  color: #4a4560;
}

/* Center Stage */
.word-center-stage {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
  background: #ece9f5 !important;
  overflow: hidden !important;
  position: relative !important;
}
.word-center-stage.flash-preview::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 3px solid #6d4aff;
  border-radius: 8px;
  pointer-events: none;
  animation: flashPreviewPulse 0.9s ease;
  z-index: 50;
}
@keyframes flashPreviewPulse {
  0% { opacity: 0; }
  30% { opacity: 1; }
  100% { opacity: 0; }
}

/* Compact page toolbar (replaces the horizontal/vertical rulers) */
.word-page-toolbar {
  height: 36px;
  flex-shrink: 0;
  background: #ffffff;
  border-bottom: 1px solid #dedae8;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  z-index: 5;
}
.wpt-nav-btn {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  color: #4a4560;
  cursor: pointer;
}
.wpt-nav-btn:hover {
  background: #ede8fa;
  border-color: #d9d2f5;
}
.wpt-nav-btn svg {
  width: 13px;
  height: 13px;
}
.wpt-prev svg {
  transform: rotate(180deg);
}
.wpt-page-label {
  font-size: 12px;
  font-weight: 600;
  color: #3c345a;
  white-space: nowrap;
  padding: 0 2px;
}
.wpt-sep {
  width: 1px;
  height: 18px;
  background: #e4e1ee;
  margin: 0 4px;
}
.wpt-pill {
  display: flex;
  align-items: center;
  gap: 4px;
  background: #f0edf8;
  border: none;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 11.5px;
  font-weight: 600;
  color: #3c345a;
  cursor: pointer;
}
.wpt-pill:hover {
  background: #e4dcfa;
  color: #6d4aff;
}
.wpt-pill svg {
  width: 10px;
  height: 10px;
}
.wpt-zoom-btn {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid #dcd8e8;
  border-radius: 6px;
  color: #3c345a;
  font-size: 13px;
  cursor: pointer;
}
.wpt-zoom-btn:hover {
  background: #ede8fa;
  border-color: #6d4aff;
  color: #6d4aff;
}
.wpt-zoom-val {
  font-size: 11.5px;
  font-weight: 600;
  color: #6d6682;
  min-width: 34px;
  text-align: center;
}

/* Canvas Wrapper with Preview Desk */
.word-canvas-wrapper {
  flex: 1;
  display: flex;
  min-height: 0;
  overflow: hidden;
  position: relative;
}

.word-canvas-wrapper .preview-desk-wrap {
  flex: 1 1 0% !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: auto !important;
  padding: 24px 20px 100px !important;
  background: #ece9f5 !important;
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  box-sizing: border-box !important;
}

.word-canvas-wrapper .preview {
  margin: 0 auto !important;
  width: max-content !important;
  min-width: 100% !important;
  max-width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  overflow: visible !important;
}

.word-canvas-wrapper .page-wrap {
  width: 100% !important;
  max-width: var(--page-w) !important;
  margin: 0 auto 36px !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  box-sizing: border-box !important;
  flex-shrink: 0 !important;
}

.word-canvas-wrapper .page-wrap:last-child {
  margin-bottom: 24px !important;
}

/* =========================================================
   Right AI Assistant Sidebar (Modern Chatbot Experience)
   ========================================================= */
.word-ai-sidebar {
  width: 350px !important;
  min-width: 320px !important;
  max-width: 420px !important;
  height: 100% !important;
  flex-shrink: 0 !important;
  background: #ffffff !important;
  border-left: 1px solid #dedae8 !important;
  display: flex !important;
  flex-direction: column !important;
  z-index: 10 !important;
  padding: 0 !important;
  overflow: hidden !important;
  gap: 0 !important;
  box-shadow: -3px 0 12px rgba(109, 74, 255, 0.04) !important;
  box-sizing: border-box !important;
}

/* Chat view wrapper: fills 100% height */
.word-ai-chat-view {
  position: relative !important;
  flex: 1 1 0% !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  background: #ffffff !important;
}
.ai-history-panel {
  flex: 0 1 56%;
  min-height: 120px;
  overflow: hidden;
  border-bottom: 1px solid #e6e0f2;
  background: #fff;
  box-shadow: 0 8px 22px rgba(37, 25, 78, .10);
  z-index: 4;
}
.ai-history-panel[hidden] { display: none !important; }
.ai-history-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px 7px; color: #302650; }
.ai-history-head strong { font-size: 12px; }
.ai-history-head button { border: 0; background: transparent; color: #82799a; font-size: 17px; cursor: pointer; }
.ai-history-new { display: flex; align-items: center; justify-content: center; gap: 5px; width: calc(100% - 16px); margin: 0 8px 6px; padding: 7px 9px; border: 1px solid #7657ff; border-radius: 8px; background: #6d4aff; color: #fff; font-size: 10.5px; font-weight: 700; cursor: pointer; }
.ai-history-new:hover { background: #5935ea; }
.ai-history-list { height: calc(100% - 72px); padding: 0 8px 9px; overflow-y: auto; }
.ai-history-empty { padding: 22px 10px; color: #8a819e; font-size: 10.5px; text-align: center; }
.ai-history-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 7px; width: 100%; margin: 4px 0; padding: 8px 9px; border: 1px solid #e5dff1; border-radius: 9px; background: #fff; color: #332852; text-align: left; cursor: pointer; }
.ai-history-item:hover, .ai-history-item.active { border-color: #7657ff; background: #f5f1ff; }
.ai-history-title { overflow: hidden; font-size: 10.5px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.ai-history-date { color: #8a819e; font-size: 8.5px; }
.ai-history-preview { grid-column: 1; overflow: hidden; color: #81789a; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.ai-history-delete { grid-column: 2; grid-row: 1 / 3; align-self: center; padding: 4px; border: 0; background: transparent; color: #a099b1; cursor: pointer; }
.ai-history-delete:hover { color: #ef4444; }
.ai-attachment-preview { position: absolute; inset: 58px 8px 78px; display: flex; flex-direction: column; overflow: hidden; border: 1px solid #d9d0f1; border-radius: 12px; background: #fff; box-shadow: 0 14px 38px rgba(30, 20, 65, .22); z-index: 12; }
.ai-attachment-preview[hidden] { display: none !important; }
.ai-attachment-preview-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 11px; border-bottom: 1px solid #ece7f5; color: #302650; }
.ai-attachment-preview-head strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.ai-attachment-preview-head button { border: 0; background: transparent; color: #81789a; font-size: 18px; cursor: pointer; }
.ai-attachment-preview-body { flex: 1; min-height: 0; overflow: auto; background: #f5f3f8; }
.ai-attachment-preview-body img { display: block; max-width: 100%; max-height: 100%; margin: auto; object-fit: contain; }
.ai-attachment-preview-body iframe { width: 100%; height: 100%; border: 0; background: #fff; }
.ai-attachment-preview-body pre { margin: 0; padding: 14px; color: #342d45; font: 10px/1.55 ui-monospace, SFMono-Regular, Consolas, monospace; white-space: pre-wrap; word-break: break-word; }
.ai-attachment-preview-note { padding: 24px 14px; color: #81789a; font-size: 10.5px; line-height: 1.5; text-align: center; }
.ai-chat-attachment[data-attachment-id] { cursor: pointer; }
.ai-chat-attachment[data-attachment-id]:hover { outline: 1px solid rgba(109, 74, 255, .5); }
.word-ai-chat-view[hidden] {
  display: none !important;
}

.ai-slash-menu {
  max-height: 230px;
  margin: 0 8px 7px;
  overflow-y: auto;
  border: 1px solid #ddd6f2;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 -8px 24px rgba(37, 25, 78, .12);
}
.ai-slash-menu[hidden] { display: none !important; }
.ai-slash-menu button {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 7px 9px;
  border: 0;
  background: transparent;
  color: #332852;
  text-align: left;
  cursor: pointer;
}
.ai-slash-menu button:hover { background: #f2edff; }
.ai-slash-menu b { min-width: 78px; color: #6947e8; font-size: 11px; }
.ai-slash-menu span { color: #81789a; font-size: 10px; }
.ai-chat-popover {
  max-height: min(360px, 55vh);
  margin: 0 8px 7px;
  padding: 10px;
  overflow-y: auto;
  border: 1px solid #d9d0f1;
  border-radius: 12px;
  background: #fff;
  color: #302650;
  box-shadow: 0 -10px 28px rgba(37, 25, 78, .15);
}
.ai-chat-popover[hidden] { display: none !important; }
.ai-pop-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.ai-pop-head strong { font-size: 12px; }
.ai-pop-close { border: 0; background: transparent; color: #82799a; cursor: pointer; font-size: 16px; }
.ai-model-section + .ai-model-section { margin-top: 10px; }
.ai-model-provider { margin: 0 0 5px; color: #81789a; font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.ai-model-choice {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 8px;
  width: 100%;
  margin-top: 4px;
  padding: 8px;
  border: 1px solid #e4def2;
  border-radius: 8px;
  background: #fff;
  color: #332852;
  text-align: left;
  cursor: pointer;
}
.ai-model-choice:hover, .ai-model-choice.active { border-color: #7657ff; background: #f4f0ff; }
.ai-model-choice b { font-size: 10.5px; }
.ai-model-choice small { grid-column: 1 / -1; color: #81789a; font-size: 9px; }
.ai-model-check { color: #6947e8; }
.ai-usage-grid { display: grid; grid-template-columns: 1fr auto; gap: 7px 12px; font-size: 10.5px; }
.ai-usage-grid span { color: #81789a; }
.ai-usage-note { margin: 9px 0 0; color: #81789a; font-size: 9.5px; line-height: 1.4; }
.word-ai-model-btn {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  flex: 0 1 82px;
  min-width: 48px;
  max-width: 82px;
  height: 28px;
  padding: 0 6px;
  overflow: hidden;
  border: 1px solid #ddd5f2;
  border-radius: 7px;
  background: #f7f4ff;
  color: #6547d8;
  font: 700 9px/1 "Plus Jakarta Sans", "Inter", sans-serif;
  cursor: pointer;
  order: 2;
  margin-left: auto;
}
.word-ai-model-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.word-ai-model-btn svg { flex: none; }

/* Header */
.word-ai-head {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 12px 14px !important;
  background: #faf8ff !important;
  border-bottom: 1px solid #eae5f6 !important;
  flex-shrink: 0 !important;
}
.word-ai-head-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1 1 auto;
}
.word-ai-head-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: linear-gradient(135deg, #efeaff, #ded4ff);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6d4aff;
  box-shadow: 0 1px 3px rgba(109, 74, 255, 0.15);
}
.word-ai-head-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.word-ai-title {
  font-family: "Plus Jakarta Sans", "Inter", sans-serif;
  font-size: 13.5px;
  font-weight: 700;
  color: #1f1738;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.word-ai-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 600;
  color: #10b981;
}
.badge-dot {
  width: 5.5px;
  height: 5.5px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2);
}
.word-ai-head-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
}
.word-ai-icon-btn {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  border: 1px solid transparent;
  background: transparent;
  color: #7b7396;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
  font-size: 13px;
}
.word-ai-icon-btn:hover {
  background: #ece7f8;
  color: #4a3e74;
  border-color: #ded6f2;
}
.word-ai-close:hover {
  background: #fee2e2 !important;
  color: #ef4444 !important;
  border-color: #fca5a5 !important;
}

/* Chat Message Stream */
.word-ai-chat-messages {
  flex: 1 1 0% !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  padding: 14px 12px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  background: #fbfaff !important;
}
.word-ai-chat-messages::-webkit-scrollbar {
  width: 5px;
}
.word-ai-chat-messages::-webkit-scrollbar-thumb {
  background: #d8d2ea;
  border-radius: 10px;
}
.word-ai-chat-messages::-webkit-scrollbar-thumb:hover {
  background: #b8afdc;
}

/* Empty State / Welcome Screen */
.ai-chat-empty {
  margin: auto 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 10px 4px;
}
.ai-empty-hero {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 6px 10px;
}
.ai-empty-icon-wrap {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  background: linear-gradient(135deg, #f0ebff, #e0d5ff);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
  box-shadow: 0 4px 12px rgba(109, 74, 255, 0.12);
}
.ai-empty-title {
  font-family: "Plus Jakarta Sans", "Inter", sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: #1e1738;
  margin: 0 0 4px;
}
.ai-empty-desc {
  font-size: 12px;
  line-height: 1.45;
  color: #797193;
  margin: 0;
  max-width: 260px;
}
.ai-empty-prompts-label {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #938cae;
  padding: 0 4px;
}
.ai-prompt-chips {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.ai-prompt-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #ffffff;
  border: 1px solid #e5e0f2;
  border-radius: 10px;
  padding: 8px 10px;
  text-align: left;
  cursor: pointer;
  transition: all 0.16s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}
.ai-prompt-chip:hover {
  background: #ffffff;
  border-color: #6d4aff;
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(109, 74, 255, 0.12);
}
.chip-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: #f1ecfe;
  color: #6d4aff;
  flex-shrink: 0;
}
.chip-icon svg {
  width: 13px;
  height: 13px;
  stroke: #6d4aff;
}
.chip-text {
  font-size: 12px;
  font-weight: 600;
  color: #2e264d;
  line-height: 1.3;
}

/* Chat Messages */
.ai-chat-msg {
  display: flex;
  flex-direction: column;
  max-width: 90%;
  gap: 4px;
}
.ai-chat-msg-user {
  align-self: flex-end;
  align-items: flex-end;
}
.ai-chat-msg-ai {
  align-self: flex-start;
  align-items: flex-start;
  width: 100%;
  max-width: 96%;
}

.ai-chat-bubble {
  font-size: 12.5px;
  line-height: 1.5;
  padding: 9px 12px;
  border-radius: 14px;
  white-space: pre-wrap;
  word-break: break-word;
}
.ai-chat-msg-user .ai-chat-bubble {
  background: linear-gradient(135deg, #7451ff, #5e35f0);
  color: #ffffff;
  border-bottom-right-radius: 3px;
  box-shadow: 0 2px 6px rgba(109, 74, 255, 0.25);
}
.ai-chat-msg-ai .ai-chat-bubble {
  background: #ffffff;
  color: #1f1839;
  border: 1px solid #e7e2f5;
  border-bottom-left-radius: 3px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
  width: 100%;
}
.ai-chat-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 4px;
}
.ai-chat-time {
  font-size: 10px;
  color: #a49cb8;
}

/* Thinking Indicator */
.ai-chat-thinking {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: #6d4aff;
  font-weight: 600;
}
.ai-dot-pulse {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #6d4aff;
  box-shadow: 0 0 0 rgba(109, 74, 255, 0.4);
  animation: pulseDot 1.4s infinite cubic-bezier(0.66, 0, 0, 1);
}
@keyframes pulseDot {
  0% { transform: scale(0.9); box-shadow: 0 0 0 0 rgba(109, 74, 255, 0.6); }
  70% { transform: scale(1); box-shadow: 0 0 0 8px rgba(109, 74, 255, 0); }
  100% { transform: scale(0.9); box-shadow: 0 0 0 0 rgba(109, 74, 255, 0); }
}

/* Attachment inside chat */
.ai-chat-attachment {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #ffffff;
  border: 1px solid #e4e1ee;
  border-radius: 10px;
  padding: 7px 10px;
  margin-bottom: 3px;
  max-width: 240px;
}
.ai-chat-msg-user .ai-chat-attachment {
  background: #f4f0ff;
  border-color: #d9ceff;
  box-shadow: 0 2px 7px rgba(84, 55, 180, .10);
}
.ai-chat-attachment-icon {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: #ef4444;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ai-chat-attachment-info {
  min-width: 0;
}
.ai-chat-attachment-name {
  font-size: 11.5px;
  font-weight: 600;
  color: #2d264b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ai-chat-msg-user .ai-chat-attachment-name {
  color: #2d2253;
}
.ai-chat-attachment-meta {
  font-size: 10px;
  color: #8a7ab8;
}
.ai-chat-msg-user .ai-chat-attachment-meta {
  color: #756a92;
}
.ai-chat-msg-user .ai-chat-attachment[data-attachment-id]:hover {
  border-color: #7657ff;
  background: #ece6ff;
  outline: none;
}

/* AI Action Buttons: Copy & Insert into Assignment */
.ai-chat-reply-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}
.ai-act-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #ffffff;
  border: 1px solid #dedae8;
  border-radius: 7px;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 600;
  color: #433966;
  cursor: pointer;
  transition: all 0.15s ease;
}
.ai-act-btn:hover {
  background: #f4efff;
  border-color: #6d4aff;
  color: #6d4aff;
}
.ai-act-insert {
  background: #fbf9ff;
  border-color: #d7cdfa;
  color: #6d4aff;
}
.ai-act-insert:hover {
  background: #6d4aff;
  border-color: #6d4aff;
  color: #ffffff;
}

/* Bottom Input Dock - Ultra Compact Chatbot Style */
.word-ai-footer {
  padding: 8px 10px !important;
  background: #ffffff !important;
  border-top: 1px solid #eae5f6 !important;
  flex-shrink: 0 !important;
}

/* Unified Input Bar: Sleek Chatbot Style */
.word-ai-input-bar {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: flex-end !important;
  gap: 6px !important;
  background: #fbfaff !important;
  border: 1.5px solid #dedae8 !important;
  border-radius: 16px !important;
  padding: 7px !important;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s !important;
  min-height: 96px !important;
  max-height: 248px !important;
  box-sizing: border-box !important;
}
.word-ai-input-bar:focus-within {
  border-color: #6d4aff !important;
  background: #ffffff !important;
  box-shadow: 0 0 0 2px rgba(109, 74, 255, 0.12) !important;
}
.ai-pending-attachment { order: 0; flex: 1 1 100%; display: flex; align-items: center; gap: 8px; min-width: 0; padding: 7px 8px; border: 1px solid #d9ceff; border-radius: 10px; background: #f4f0ff; color: #302650; }
.ai-pending-attachment[hidden] { display: none !important; }
.ai-pending-thumb { width: 30px; height: 30px; flex: none; display: grid; place-items: center; overflow: hidden; border-radius: 7px; background: #e4dcff; color: #6749d7; font-size: 9px; font-weight: 800; }
.ai-pending-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ai-pending-info { display: block; min-width: 0; max-width: calc(100% - 68px); flex: 1 1 0; overflow: hidden; cursor: pointer; }
.ai-pending-name { display: block; width: 100%; overflow: hidden; font-size: 10.5px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.ai-pending-meta { display: block; width: 100%; margin-top: 2px; overflow: hidden; color: #796f91; font-size: 8.5px; text-overflow: ellipsis; white-space: nowrap; }
.ai-pending-remove { flex: 0 0 22px; width: 22px; height: 22px; margin-left: auto; padding: 0; border: 0; border-radius: 50%; background: #fff; color: #766d89; cursor: pointer; }
.ai-pending-remove:hover { color: #ef4444; }

/* [+] Attachment Button on Left */
.word-ai-attach-btn {
  order: 2;
  width: 25px !important;
  height: 25px !important;
  border-radius: 50% !important;
  border: 1px solid #ddd7ed !important;
  background: #ffffff !important;
  color: #6d4aff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  padding: 0 !important;
  transition: all 0.15s ease !important;
}
.word-ai-attach-btn:hover {
  background: #f1ecff !important;
  border-color: #6d4aff !important;
  transform: scale(1.06) !important;
}
.word-ai-attach-btn svg {
  width: 13px !important;
  height: 13px !important;
  stroke: #6d4aff !important;
}

/* Prompt Textarea */
.word-ai-input-bar textarea {
  order: 1;
  flex: 1 1 100% !important;
  width: 100% !important;
  min-width: 0 !important;
  border: none !important;
  outline: none !important;
  background: transparent !important;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 12px !important;
  line-height: 20px !important;
  color: #1f1738 !important;
  resize: none !important;
  padding: 6px 8px !important;
  margin: 0 !important;
  height: 52px;
  min-height: 52px !important;
  max-height: 200px !important;
  overflow-y: hidden;
  box-sizing: border-box !important;
}
.word-ai-input-bar textarea::-webkit-scrollbar { width: 6px; }
.word-ai-input-bar textarea::-webkit-scrollbar-thumb { background: #c9bee8; border-radius: 999px; }
.word-ai-input-bar textarea::-webkit-scrollbar-track { background: transparent; }
.word-ai-input-bar textarea::placeholder {
  color: #9d96b5 !important;
}

/* Send Arrow Button on Right */
.word-ai-send-btn {
  order: 2;
  width: 25px !important;
  height: 25px !important;
  border-radius: 50% !important;
  background: #6d4aff !important;
  color: #ffffff !important;
  border: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  padding: 0 !important;
  box-shadow: 0 1px 3px rgba(109, 74, 255, 0.35) !important;
  transition: all 0.15s ease !important;
}
.word-ai-send-btn:hover {
  background: #5935ea !important;
  transform: scale(1.06) !important;
  box-shadow: 0 2px 5px rgba(109, 74, 255, 0.45) !important;
}
.word-ai-send-btn:active {
  transform: scale(0.96) !important;
}
.word-ai-send-btn svg {
  width: 11px !important;
  height: 11px !important;
  stroke: #ffffff !important;
}

/* Helper Hint - hidden to keep section compact */
.word-ai-hint {
  display: none !important;
}

/* ---------- Bottom Word Status Bar ---------- */
.word-status-bar {
  height: 32px;
  background: #ece9f5;
  border-top: 1px solid #dedae8;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 16px;
  font-size: 11.5px;
  color: #5c5674;
  z-index: 20;
  flex-shrink: 0;
}

.status-bar-left {
  display: flex;
  align-items: center;
  gap: 10px;
}
.status-sep {
  color: #c5c0d6;
}
.status-lang {
  display: flex;
  align-items: center;
  gap: 4px;
}
.status-lang-icon {
  width: 13px;
  height: 13px;
}

.status-bar-right {
  display: flex;
  align-items: center;
  gap: 14px;
}

.status-view-modes {
  display: flex;
  align-items: center;
  gap: 4px;
}
.status-view-btn {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  color: #7a7490;
}
.status-view-btn:hover {
  background: #e2dfec;
  color: #1d163a;
}
.status-view-btn.active {
  background: #dedae8;
  color: #1d163a;
}
.status-view-btn svg {
  width: 14px;
  height: 14px;
}

.status-zoom-group {
  display: flex;
  align-items: center;
  gap: 6px;
}
.status-zoom-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 13px;
  color: #4a4460;
  padding: 0 2px;
}
.status-zoom-btn:hover {
  color: #6d4aff;
}
.status-zoom-slider {
  width: 80px;
  height: 4px;
  accent-color: #6d4aff;
  cursor: pointer;
}
.status-zoom-val {
  font-weight: 600;
  min-width: 32px;
  text-align: right;
}

/* ---------- Full Settings Drawer (13 Sections) ---------- */
.settings-drawer {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 440px !important;
  max-width: 90vw !important;
  background: #faf9fd !important;
  border-left: 1px solid #dcd8e8 !important;
  box-shadow: -8px 0 35px rgba(0, 0, 0, 0.18) !important;
  z-index: 1000 !important;
  overflow-y: auto !important;
  transform: translateX(100%) !important;
  transition: transform 0.28s cubic-bezier(0.2, 0.7, 0.3, 1) !important;
  padding: 20px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}
.settings-drawer.open {
  transform: translateX(0) !important;
}

.settings-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 12, 28, 0.45);
  backdrop-filter: blur(4px);
  z-index: 999;
}

.settings-drawer-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 12px;
  border-bottom: 1px solid #e4e1ee;
}
.settings-drawer-head h3 {
  margin: 0;
  font-family: "Plus Jakarta Sans", "Inter", sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #1d163a;
}
.settings-drawer-head p {
  margin: 2px 0 0;
  font-size: 12px;
  color: #64748b;
}

/* =========================================================
   4-Column Workspace: Content | Pages | Paper | AI
   Content and Pages are always-visible fixed columns. Every
   other settings section (Paper, Cover, Realism, etc.) opens
   as a flyout popover under the ribbon instead of using a column.
   ========================================================= */

/* Content column (always visible, left-most) */
.word-content-sidebar {
  width: 360px !important;
  min-width: 320px !important;
  flex-shrink: 0 !important;
  background: #faf9fd !important;
  border-right: 1px solid #dedae8 !important;
  display: flex !important;
  flex-direction: column !important;
  z-index: 10 !important;
  box-shadow: 2px 0 6px rgba(0, 0, 0, 0.02) !important;
}

/* Left Sidebar Header Tabs: Content, Cover, Titles, Tables, Diagrams */
.word-content-head-tabs {
  display: flex !important;
  align-items: center !important;
  background: #f1ecfa !important;
  padding: 4px 6px !important;
  border-bottom: 1px solid #dedae8 !important;
  flex-shrink: 0 !important;
  gap: 3px !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
}
.word-content-head-tabs::-webkit-scrollbar {
  display: none !important;
}

.wct-tab {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  padding: 5px 6px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: #635b7b !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  user-select: none !important;
  white-space: nowrap !important;
}

.wct-tab span {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.wct-tab svg {
  flex-shrink: 0 !important;
}

.wct-tab:hover {
  background: #e7e0f5 !important;
  color: #3b3158 !important;
}

.wct-tab.active {
  background: #ffffff !important;
  color: #6d4aff !important;
  border-color: #d6cee8 !important;
  box-shadow: 0 1px 4px rgba(109, 74, 255, 0.09) !important;
  font-weight: 700 !important;
}

/* Panes: Content, Cover, Titles, Tables, Diagrams */
.word-content-pane,
.word-cover-pane,
.word-titles-pane,
.word-tables-pane,
.word-diagrams-pane {
  flex: 1 1 0% !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  height: 100% !important;
  overflow: hidden !important;
  background: #faf9fd !important;
}
.word-content-pane[hidden],
.word-cover-pane[hidden],
.word-titles-pane[hidden],
.word-tables-pane[hidden],
.word-diagrams-pane[hidden] {
  display: none !important;
}

.word-cover-pane-inner,
.word-titles-pane-inner,
.word-tables-pane-inner,
.word-diagrams-pane-inner {
  flex: 1 1 0% !important;
  overflow-y: auto !important;
  padding: 8px 12px 6px 12px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 5px !important;
}

.word-cover-pane-inner label,
.word-titles-pane-inner label,
.word-tables-pane-inner label,
.word-diagrams-pane-inner label {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #3d3558 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  margin: 0 !important;
  padding: 0 !important;
}

.word-cover-pane-inner .row,
.word-titles-pane-inner .row,
.word-tables-pane-inner .row,
.word-diagrams-pane-inner .row {
  display: flex !important;
  gap: 6px !important;
  margin: 0 !important;
  align-items: flex-start !important;
}
.word-cover-pane-inner .row > label,
.word-titles-pane-inner .row > label,
.word-tables-pane-inner .row > label,
.word-diagrams-pane-inner .row > label {
  flex: 1 1 0% !important;
  min-width: 0 !important;
}

.word-cover-pane-inner input[type="text"],
.word-cover-pane-inner input[type="number"],
.word-cover-pane-inner select,
.word-cover-pane-inner textarea,
.word-titles-pane-inner input[type="text"],
.word-titles-pane-inner input[type="number"],
.word-titles-pane-inner select,
.word-titles-pane-inner textarea,
.word-tables-pane-inner input[type="text"],
.word-tables-pane-inner input[type="number"],
.word-tables-pane-inner select,
.word-tables-pane-inner textarea,
.word-diagrams-pane-inner input[type="text"],
.word-diagrams-pane-inner input[type="number"],
.word-diagrams-pane-inner select,
.word-diagrams-pane-inner textarea {
  width: 100% !important;
  box-sizing: border-box !important;
  border: 1px solid #dcd8e8 !important;
  border-radius: 6px !important;
  background: #ffffff !important;
  padding: 3px 8px !important;
  height: 27px !important;
  font-size: 11.5px !important;
  color: #1e1b4b !important;
  font-family: inherit !important;
  outline: none !important;
  margin-top: 1px !important;
  margin-bottom: 0 !important;
  transition: border-color 0.15s, box-shadow 0.15s !important;
}

.word-cover-pane-inner input[type="color"],
.word-titles-pane-inner input[type="color"] {
  height: 27px !important;
  padding: 1px 2px !important;
  border: 1px solid #dcd8e8 !important;
  border-radius: 6px !important;
  background: #ffffff !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
  width: 100% !important;
}

.word-cover-pane-inner textarea {
  height: auto !important;
  min-height: 40px !important;
  padding: 4px 8px !important;
  resize: vertical !important;
  line-height: 1.4 !important;
}

.word-cover-pane-inner input:focus,
.word-cover-pane-inner select:focus,
.word-cover-pane-inner textarea:focus,
.word-titles-pane-inner input:focus,
.word-titles-pane-inner select:focus,
.word-tables-pane-inner input:focus,
.word-tables-pane-inner select:focus,
.word-diagrams-pane-inner input:focus,
.word-diagrams-pane-inner select:focus {
  border-color: #6d4aff !important;
  box-shadow: 0 0 0 2px rgba(109, 74, 255, 0.14) !important;
}

.word-cover-pane-inner .sub-head,
.word-titles-pane-inner .sub-head,
.word-tables-pane-inner .sub-head,
.word-diagrams-pane-inner .sub-head {
  margin: 6px 0 2px !important;
  padding-top: 4px !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  color: #6d4aff !important;
  border-top: 1px solid #eae5f6 !important;
}

.word-titles-pane-inner .sub-list,
.word-tables-pane-inner .sub-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  margin-top: 3px !important;
  margin-bottom: 3px !important;
}

.word-titles-pane-inner .sub-item,
.word-tables-pane-inner .sub-item {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 4px 6px !important;
  background: #ffffff !important;
  border: 1px solid #e0dbe8 !important;
  border-radius: 6px !important;
}

.word-titles-pane-inner .sub-name,
.word-tables-pane-inner .sub-name {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: #2e2646 !important;
  flex: 1 !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.word-tables-pane-inner .table-item {
  padding: 6px !important;
  background: #ffffff !important;
  border: 1px solid #e0dbe8 !important;
  border-radius: 6px !important;
  margin-bottom: 4px !important;
}

.word-tables-pane-inner .tbl-width {
  font-size: 10.5px !important;
  margin-top: 3px !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.req-star {
  color: #ef4444 !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  line-height: 1 !important;
  margin-left: 2px !important;
  display: inline !important;
}

.word-cover-actions,
.word-titles-actions,
.word-tables-actions,
.word-diagrams-actions {
  padding: 6px 12px !important;
  background: #ffffff !important;
  border-top: 1px solid #eae5f6 !important;
  flex-shrink: 0 !important;
}

.word-content-sidebar-body {
  flex: 1 1 0% !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 12px 14px 6px 14px !important;
  overflow: hidden !important;
  min-height: 0 !important;
  height: 100% !important;
  box-sizing: border-box !important;
}

.word-content-sidebar-body input[data-key="title"] {
  display: none !important;
}

.word-content-sidebar-body textarea[data-key="text"] {
  display: block !important;
  width: 100% !important;
  flex: 1 1 0% !important;
  height: 100% !important;
  min-height: 0 !important;
  box-sizing: border-box !important;
  background: #ffffff !important;
  border: 1.5px solid #dcd8e8 !important;
  border-radius: 12px !important;
  padding: 14px 14px !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
  font-size: 13px !important;
  line-height: 1.65 !important;
  color: #1e1b4b !important;
  resize: none !important;
  box-shadow: 0 1px 4px rgba(22, 27, 52, 0.04) !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

.word-content-sidebar-body textarea[data-key="text"]::placeholder {
  color: #7b7393 !important;
  font-size: 11.5px !important;
  line-height: 1.6 !important;
  white-space: pre-wrap !important;
  opacity: 0.92 !important;
}

.word-content-sidebar-body textarea[data-key="text"]:focus {
  border-color: #6d4aff !important;
  box-shadow: 0 0 0 3px rgba(109, 74, 255, 0.14) !important;
  outline: none !important;
}

/* Fallback reset if details element is present inside body */
.word-content-sidebar-body details.sidebar-content-pinned,
.word-content-sidebar-body details.sidebar-content-pinned .group-body {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 0% !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}
.word-content-sidebar-body details.sidebar-content-pinned > summary {
  display: none !important;
}

.word-content-actions {
  display: flex !important;
  gap: 8px !important;
  padding: 10px 14px 14px !important;
  border-top: 1px solid #dedae8 !important;
  flex-shrink: 0 !important;
  background: #faf9fd !important;
}
.wca-btn {
  flex: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  background: #ffffff !important;
  border: 1px solid #dcd8e8 !important;
  border-radius: 8px !important;
  padding: 8px 6px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: #3c345a !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}
.wca-btn svg {
  width: 12px;
  height: 12px;
}
.wca-btn:hover {
  border-color: #6d4aff !important;
  color: #6d4aff !important;
  background: #f8f6fe !important;
}
.wca-btn.wca-primary {
  background: #6d4aff !important;
  border-color: #6d4aff !important;
  color: #ffffff !important;
}
.wca-btn.wca-primary:hover {
  background: #5936eb !important;
}

.word-content-sidebar.expanded {
  position: fixed !important;
  inset: 60px 16px 16px 16px !important;
  width: auto !important;
  z-index: 500 !important;
  border-radius: 14px !important;
  box-shadow: 0 30px 70px rgba(15, 10, 35, 0.35) !important;
}
.word-content-sidebar.expanded .word-content-sidebar-body {
  flex: 1;
}

/* AI column settings view (Papers/Insert/Effects/Layout/References/Review/AI Tools
   swap the AI column from chat into this, in place) */
.word-ai-settings-view {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.word-ai-settings-view[hidden] {
  display: none;
}
.wrp-back {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid #dcd8e8;
  border-radius: 6px;
  color: #6d4aff;
  cursor: pointer;
}
.wrp-back svg {
  width: 12px;
  height: 12px;
  transform: rotate(180deg);
}
.wrp-back:hover {
  background: #ede8fa;
  border-color: #6d4aff;
}
.word-ai-settings-body {
  flex: 1;
  overflow-y: auto;
  padding: 2px 14px 18px;
}

/* The reparented #settingsDrawer, stripped of its overlay chrome */
.settings-drawer.embedded {
  position: static !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  background: transparent !important;
  border-left: none !important;
  box-shadow: none !important;
  z-index: auto !important;
  overflow-y: visible !important;
  transform: none !important;
  transition: none !important;
  padding: 0 12px !important;
  gap: 0 !important;
}
.settings-drawer.embedded .settings-drawer-head,
.settings-drawer.embedded .btn-new-assignment,
.settings-drawer.embedded .panel-top {
  display: none !important;
}
.settings-drawer.embedded details.group {
  display: none;
}
.settings-drawer.embedded details.group.sidebar-active {
  display: block;
}
.settings-drawer.embedded details.group > summary {
  display: none;
}
.settings-drawer.embedded .group-body {
  padding: 10px 0 !important;
}

/* Paper picker: current selection + left-to-right swatch strip */
.sidebar-paper-current {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  margin-bottom: 10px;
  background: #ffffff;
  border: 1px solid #dcd8e8;
  border-radius: 10px;
}
.sidebar-paper-current-swatch {
  width: 40px;
  height: 52px;
  flex-shrink: 0;
  border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}
.sidebar-paper-current-name {
  font-size: 12.5px;
  font-weight: 700;
  color: #1d163a;
  line-height: 1.3;
}
.sidebar-paper-current-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #858097;
  font-weight: 600;
}

.sidebar-paper-swatches {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 2px 2px 10px;
  margin-bottom: 4px;
}
.paper-swatch {
  flex-shrink: 0;
  width: 46px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
}
.paper-swatch-chip {
  width: 40px;
  height: 52px;
  border-radius: 4px;
  border: 1.5px solid #dcd8e8;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  transition: all 0.15s ease;
}
.paper-swatch:hover .paper-swatch-chip {
  border-color: #bba9ff;
  transform: translateY(-1px);
}
.paper-swatch.active .paper-swatch-chip {
  border-color: #6d4aff;
  box-shadow: 0 0 0 2px #e4dcfa;
}
.paper-swatch-label {
  font-size: 9px;
  color: #6d6682;
  text-align: center;
  line-height: 1.2;
  max-width: 48px;
}
.paper-swatch.active .paper-swatch-label {
  color: #6d4aff;
  font-weight: 700;
}
#paperSelect.paper-select-hidden {
  display: none !important;
}

/* Responsive adjustments */
@media (max-width: 1600px) {
  .word-content-sidebar {
    width: 320px !important;
    min-width: 280px !important;
  }
  .word-pages-sidebar {
    width: 110px !important;
  }
  .word-ai-sidebar {
    width: 300px !important;
    min-width: 280px !important;
  }
  .word-ai-head {
    padding-inline: 10px !important;
  }
}
@media (max-width: 1080px) {
  .word-ai-sidebar {
    display: none !important;
  }
}
@media (max-width: 800px) {
  .word-pages-sidebar,
  .word-content-sidebar {
    display: none !important;
  }
  .word-doc-title-input {
    width: 180px;
  }
}

/* =========================================================
   Ribbon Top Settings (Assignment Rules & Table Tools)
   ========================================================= */
.ribbon-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #ffffff;
  border: 1px solid #dcd8e8;
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 11.5px;
  font-weight: 600;
  color: #3c345a;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
}

.ribbon-toggle-btn:hover {
  background: #f8f6fe;
  border-color: #bba9ff;
  color: #6d4aff;
}

.ribbon-toggle-btn.active {
  background: #f3effe;
  border-color: #6d4aff;
  color: #6d4aff;
  box-shadow: 0 0 0 1px #6d4aff inset;
}

.ribbon-toggle-btn .toggle-icon {
  font-weight: 700;
  font-size: 11px;
}

.pen2-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #dc2626;
  display: inline-block;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
  flex-shrink: 0;
}

.ribbon-pen-effect {
  width: 102px;
  height: 24px;
  font-size: 11px;
}

.ribbon-pen-row {
  display: flex;
  align-items: center;
  gap: 5px;
}

.ribbon-pen-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 5px;
  border-radius: 4px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  user-select: none;
  flex-shrink: 0;
  line-height: 1.2;
}

.ribbon-pen-tag.pen1-tag {
  background: #eff6ff;
  color: #1d4ed8;
  border: 1px solid #bfdbfe;
}

.ribbon-pen-tag.pen2-tag {
  background: #fef2f2;
  color: #b91c1c;
  border: 1px solid #fecaca;
}

.ribbon-pen2-apply {
  padding: 2px 6px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  gap: 3px !important;
  height: 24px;
}

.ribbon-color-bar.pen2-bar {
  background: #1b1b1f;
}

/* Table Controls in Ribbon */
.ribbon-table-row {
  display: flex;
  align-items: center;
  gap: 4px;
}

.ribbon-mini-group {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.ribbon-mini-label {
  font-size: 10.5px;
  color: #64748b;
  font-weight: 600;
  user-select: none;
}

.ribbon-mini-num {
  width: 38px;
  height: 24px;
  background: #ffffff;
  border: 1px solid #dcd8e8;
  border-radius: 4px;
  text-align: center;
  font-size: 11.5px;
  font-weight: 600;
  color: #2d264b;
  outline: none;
}

.ribbon-mini-num:focus {
  border-color: #6d4aff;
}

.ribbon-btn-action {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #ffffff;
  border: 1px solid #dcd8e8;
  border-radius: 6px;
  padding: 4px 9px;
  font-size: 11.5px;
  font-weight: 600;
  color: #2d264b;
  cursor: pointer;
  transition: all 0.15s ease;
}

.ribbon-btn-action:hover {
  background: #f8f6fe;
  border-color: #6d4aff;
  color: #6d4aff;
}

.ribbon-btn-action svg {
  width: 13px;
  height: 13px;
}

.ribbon-btn-fix {
  background: linear-gradient(135deg, #fbfaff, #f4effe);
  border-color: #d7cdfb;
  color: #5533ea;
}
.ribbon-btn-fix:hover {
  background: linear-gradient(135deg, #f5effe, #ede5fd);
  border-color: #6d4aff;
}

/* =========================================================
   MS Word Aligned Ribbon: SVG Icon Controls & Flyouts
   ========================================================= */
.ribbon-controls-grid {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ribbon-row {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 26px;
  min-height: 26px;
}

.ribbon-icon-btn {
  width: 26px;
  height: 26px;
  min-width: 26px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  border: 1px solid transparent;
  background: transparent;
  color: #2d264b;
  cursor: pointer;
  transition: all 0.12s ease;
  user-select: none;
}

.ribbon-icon-btn:hover {
  background: #ede8fa;
  border-color: #dcd8e8;
  color: #6d4aff;
}

.ribbon-icon-btn.active {
  background: #e8e1fa;
  border-color: #6d4aff;
  color: #6d4aff;
  box-shadow: 0 0 0 1px #6d4aff inset;
}

.ribbon-icon-toggle {
  width: 28px !important;
  height: 26px !important;
  min-width: 28px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 4px !important;
  border: 1px solid #dcd8e8 !important;
  background: #ffffff !important;
  color: #3c345a !important;
  cursor: pointer !important;
  transition: all 0.12s ease !important;
}

.ribbon-icon-toggle:hover {
  background: #f8f6fe !important;
  border-color: #6d4aff !important;
  color: #6d4aff !important;
}

.ribbon-icon-toggle.active {
  background: #f1edfe !important;
  border-color: #6d4aff !important;
  color: #6d4aff !important;
  box-shadow: 0 0 0 1px #6d4aff inset !important;
}

/* Split button & flyout menus for lists */
.ribbon-split-btn-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.ribbon-split-arrow {
  width: 13px;
  height: 26px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  background: transparent;
  font-size: 8px;
  color: #64748b;
  cursor: pointer;
  border-radius: 0 4px 4px 0;
  margin-left: -2px;
}

.ribbon-split-arrow:hover {
  background: #ede8fa;
  color: #6d4aff;
  border-color: #dcd8e8;
}

.ribbon-flyout-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  background: #ffffff;
  border: 1px solid #dedae8;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(27, 22, 58, 0.16);
  padding: 4px;
  z-index: 300;
  flex-direction: column;
  gap: 2px;
  min-width: 135px;
}

.ribbon-flyout-menu:not([hidden]) {
  display: flex;
}

.ribbon-flyout-menu[hidden], .word-ribbon .ribbon-flyout-menu[hidden] { display: none !important; }

.flyout-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border: none;
  background: transparent;
  font-size: 11.5px;
  font-weight: 500;
  color: #2d264b;
  cursor: pointer;
  border-radius: 4px;
  text-align: left;
  transition: all 0.12s ease;
}

.flyout-item:hover {
  background: #f3effe;
  color: #6d4aff;
}

.flyout-icon {
  font-weight: 800;
  font-size: 13px;
  width: 16px;
  text-align: center;
}

/* Segmented note align buttons */
.ribbon-segmented-group {
  display: inline-flex;
  align-items: center;
  border: 1px solid #dcd8e8;
  border-radius: 4px;
  background: #ffffff;
  padding: 1px;
  height: 26px;
  box-sizing: border-box;
}

.ribbon-seg-btn {
  width: 22px;
  height: 22px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  border-radius: 3px;
  color: #64748b;
  cursor: pointer;
  transition: all 0.12s ease;
}

.ribbon-seg-btn:hover {
  background: #f3effe;
  color: #6d4aff;
}

.ribbon-seg-btn.active {
  background: #6d4aff;
  color: #ffffff;
}

.ribbon-note-size-select {
  width: 58px !important;
  height: 26px !important;
  font-size: 11px !important;
  padding: 0 4px !important;
}

.ribbon-pen2-apply-btn {
  width: 32px !important;
  height: 26px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  padding: 0 4px !important;
  border: 1px solid #fecaca !important;
  background: #fef2f2 !important;
  color: #b91c1c !important;
  border-radius: 4px !important;
  cursor: pointer;
}

.ribbon-pen2-apply-btn:hover {
  background: #fee2e2 !important;
  border-color: #ef4444 !important;
}

.ribbon-btn-clear {
  color: #ef4444 !important;
}
.ribbon-btn-clear:hover {
  background: #fef2f2 !important;
  border-color: #fecaca !important;
  color: #b91c1c !important;
}

/* =========================================================
   STRICT MS WORD RIBBON ALIGNMENT & SIZING ENFORCEMENT
   ========================================================= */
.word-ribbon-content {

  height: 94px !important;
  min-height: 94px !important;
  max-height: 94px !important;
  background: #fbfbfe !important;
  padding: 6px 12px 8px !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  overflow: visible !important;
}

.word-ribbon .ribbon-panel,
.word-ribbon .ribbon-panel.active,
.word-ribbon .ribbon-group,
.word-ribbon .ribbon-controls-grid,
.word-ribbon .ribbon-row,
.word-ribbon .ribbon-split-wrap,
.word-ribbon .ribbon-split-btn-wrap {
  overflow: visible !important;
}

.word-ribbon .ribbon-panel {
  display: none !important;
  align-items: stretch !important;
  height: 80px !important;
  gap: 0 !important;
}
.word-ribbon .ribbon-panel.active {
  display: flex !important;
}

.word-ribbon .ribbon-group {
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  padding: 0 4px !important;
  height: 78px !important;
  box-sizing: border-box !important;
}

.word-ribbon .ribbon-controls-grid {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  margin-top: 2px !important;
}

.word-ribbon .ribbon-row {
  display: flex !important;
  align-items: center !important;
  gap: 3px !important;
  height: 26px !important;
  min-height: 26px !important;
  max-height: 26px !important;
  line-height: 26px !important;
}

.word-ribbon .ribbon-sep {
  width: 1px !important;
  height: 60px !important;
  background: #dedae8 !important;
  margin: 0 6px !important;
  align-self: center !important;
  flex-shrink: 0 !important;
}

.word-ribbon .ribbon-group-title {
  display: block !important;
  height: 14px !important;
  line-height: 14px !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  color: #7c7499 !important;
  text-align: center !important;
  margin: 0 !important;
  user-select: none !important;
}

/* OVERRIDE GLOBAL INPUT / SELECT / BUTTON SIZING */
.word-ribbon input,
.word-ribbon select,
.word-ribbon button {
  min-height: 0 !important;
  max-height: 26px !important;
  height: 26px !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  vertical-align: middle !important;
}

.word-ribbon select {
  padding: 0 16px 0 6px !important;
  font-size: 11.5px !important;
  line-height: 24px !important;
  border-radius: 4px !important;
  border: 1px solid #d0cadc !important;
  background-color: #ffffff !important;
  background-position: calc(100% - 8px) 10px, calc(100% - 4px) 10px !important;
  background-size: 4px 4px, 4px 4px !important;
  color: #2d264b !important;
}

.word-ribbon select:focus,
.word-ribbon input:focus {
  border-color: #6d4aff !important;
  box-shadow: 0 0 0 2px rgba(109, 74, 255, 0.15) !important;
}

.word-ribbon input[type="number"] {
  height: 26px !important;
  min-height: 0 !important;
  padding: 0 2px !important;
  font-size: 11.5px !important;
  line-height: 24px !important;
  border-radius: 4px !important;
  border: 1px solid #d0cadc !important;
  text-align: center !important;
  background: #ffffff !important;
  color: #2d264b !important;
}

/* BUTTONS */
.word-ribbon .ribbon-icon-btn {
  width: 26px !important;
  height: 26px !important;
  min-width: 26px !important;
  max-width: 26px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 4px !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  color: #2d264b !important;
  cursor: pointer !important;
  transition: all 0.12s ease !important;
}

.word-ribbon .ribbon-icon-btn:hover {
  background: #ede8fa !important;
  border-color: #dcd8e8 !important;
  color: #6d4aff !important;
}

.word-ribbon .ribbon-icon-btn.active {
  background: #e8e1fa !important;
  border-color: #6d4aff !important;
  color: #6d4aff !important;
  box-shadow: 0 0 0 1px #6d4aff inset !important;
}

/* SQUARE GRID BUTTONS (PARAGRAPH & RULES 4x2 GRID) */
.word-ribbon .ribbon-grid-btn {
  width: 32px !important;
  height: 26px !important;
  min-width: 32px !important;
  max-width: 32px !important;
}

.word-ribbon .ribbon-icon-toggle {
  width: 28px !important;
  height: 26px !important;
  min-width: 28px !important;
  max-width: 28px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 4px !important;
  border: 1px solid #dcd8e8 !important;
  background: #ffffff !important;
  color: #3c345a !important;
}

.word-ribbon .ribbon-icon-toggle:hover {
  background: #f8f6fe !important;
  border-color: #6d4aff !important;
  color: #6d4aff !important;
}

.word-ribbon .ribbon-icon-toggle.active {
  background: #f1edfe !important;
  border-color: #6d4aff !important;
  color: #6d4aff !important;
  box-shadow: 0 0 0 1px #6d4aff inset !important;
}

/* FONT DROPDOWNS */
.word-ribbon .ribbon-font-select {
  width: 120px !important;
}
.word-ribbon .ribbon-size-select {
  width: 44px !important;
}

/* PENS GROUP */
.word-ribbon .ribbon-pen-tag {
  width: 42px !important;
  height: 26px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  border-radius: 4px !important;
  border: 1px solid #bfdbfe !important;
  background: #eff6ff !important;
  color: #1d4ed8 !important;
  padding: 0 !important;
}
.word-ribbon .ribbon-pen-tag.pen2-tag {
  border-color: #fecaca !important;
  background: #fef2f2 !important;
  color: #b91c1c !important;
}

.word-ribbon .ribbon-pen-effect {
  width: 96px !important;
}

.word-ribbon .ribbon-pen-switch-btn {
  width: 42px !important;
  height: 26px !important;
  min-width: 42px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  border-radius: 4px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  padding: 0 3px !important;
}
.word-ribbon .pen1-switch {
  border: 1px solid #bfdbfe !important;
  background: #eff6ff !important;
  color: #1d4ed8 !important;
}
.word-ribbon .pen2-switch {
  border: 1px solid #fecaca !important;
  background: #fef2f2 !important;
  color: #b91c1c !important;
}

.word-ribbon .pen1-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #1a3b8f;
  display: inline-block;
}

.word-ribbon .font-color-letter {
  font-weight: 800;
  font-size: 12px;
  line-height: 1;
}

.word-ribbon .ribbon-color-bar {
  position: absolute;
  bottom: 3px;
  left: 4px;
  right: 4px;
  height: 3px;
  border-radius: 1px;
}

/* TABLE GROUP */
.word-ribbon .ribbon-mini-label {
  font-size: 10px !important;
  font-weight: 700 !important;
  color: #64748b !important;
}

#ribbonGroupTable .ribbon-mini-num {
  width: 32px !important;
}

/* Remove native number stepper arrows across ribbon mini-num inputs so numbers are never clipped */
.word-ribbon input[type="number"].ribbon-mini-num::-webkit-inner-spin-button,
.word-ribbon input[type="number"].ribbon-mini-num::-webkit-outer-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}
.word-ribbon input[type="number"].ribbon-mini-num {
  -moz-appearance: textfield !important;
  appearance: textfield !important;
}

.word-ribbon .ribbon-btn-action {
  height: 26px !important;
  padding: 0 7px !important;
  border-radius: 4px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  border: 1px solid #dcd8e8 !important;
  background: #ffffff !important;
  color: #2d264b !important;
}
.word-ribbon .ribbon-btn-action:hover {
  background: #f8f6fe !important;
  border-color: #6d4aff !important;
  color: #6d4aff !important;
}

/* NOTE ALIGNMENT */
.word-ribbon .ribbon-segmented-group {
  height: 26px !important;
  padding: 1px !important;
  gap: 1px !important;
  border-radius: 4px !important;
}
.word-ribbon .ribbon-seg-btn {
  width: 22px !important;
  height: 22px !important;
}

.word-ribbon .ribbon-note-size-select {
  width: 52px !important;
  height: 26px !important;
}

/* Split button in Ribbon (e.g. Chart button) */
.word-ribbon .ribbon-split-btn-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 26px !important;
}

.word-ribbon .ribbon-split-btn-wrap .ribbon-split-main {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  border-right: none !important;
  padding: 0 6px !important;
}

.word-ribbon .ribbon-split-btn-wrap .ribbon-split-arrow {
  height: 26px !important;
  max-height: 26px !important;
  min-height: 0 !important;
  width: 15px !important;
  border: 1px solid #dcd8e8 !important;
  border-left: 1px solid #dcd8e8 !important;
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-top-right-radius: 4px !important;
  border-bottom-right-radius: 4px !important;
  background: #f8f6fc !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  font-size: 8px !important;
  color: #64748b !important;
}

.word-ribbon .ribbon-split-btn-wrap .ribbon-split-arrow:hover {
  background: #ede8fa !important;
  color: #6d4aff !important;
  border-color: #6d4aff !important;
}

.word-ribbon .ribbon-flyout-menu {
  position: absolute;
  top: calc(100% + 3px);
  left: 0;
  background: #ffffff;
  border: 1px solid #dcd8e8;
  border-radius: 6px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.14);
  padding: 3px;
  z-index: 300;
  flex-direction: column;
  gap: 2px;
  min-width: 125px;
}

.word-ribbon .ribbon-flyout-menu:not([hidden]) {
  display: flex;
}

/* =========================================================
   PAGE TOOLS (5x2 Symmetrical Grid Enforcement)
   ========================================================= */
#ribbonGroupPageTools {
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  align-items: center !important;
  height: 78px !important;
  box-sizing: border-box !important;
  width: auto !important;
  min-width: 0 !important;
}

#ribbonGroupPageTools .ribbon-controls-grid {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  margin-top: 2px !important;
  width: 100% !important;
}

#ribbonGroupPageTools .ribbon-row {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  height: 26px !important;
  min-height: 26px !important;
  max-height: 26px !important;
  width: 100% !important;
}

#ribbonGroupPageTools .ribbon-row .ribbon-toggle-btn,
#ribbonGroupPageTools .ribbon-row .ribbon-icon-btn {
  width: 26px !important;
  height: 26px !important;
  min-width: 26px !important;
  max-width: 26px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

#ribbonGroupPageTools .ribbon-segmented-group {
  display: inline-flex !important;
  align-items: center !important;
  width: 56px !important;
  height: 26px !important;
  padding: 1px !important;
  gap: 1px !important;
  border: 1px solid #dcd8e8 !important;
  border-radius: 4px !important;
  background: #ffffff !important;
  box-sizing: border-box !important;
  flex-shrink: 0 !important;
}

#ribbonGroupPageTools .ribbon-seg-btn {
  width: 17px !important;
  min-width: 0 !important;
  max-width: 18px !important;
  height: 22px !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  color: #64748b !important;
  border-radius: 3px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 1 1 0 !important;
  cursor: pointer !important;
  transition: all 0.12s ease !important;
}

#ribbonGroupPageTools .ribbon-seg-btn:hover {
  background: #f8f6fe !important;
  color: #6d4aff !important;
}

#ribbonGroupPageTools .ribbon-seg-btn.active {
  background: #6d4aff !important;
  color: #ffffff !important;
}

#ribbonGroupPageTools .ribbon-note-size-select {
  width: 56px !important;
  height: 26px !important;
  font-size: 11px !important;
  padding: 0 2px !important;
  border-radius: 4px !important;
  border: 1px solid #dcd8e8 !important;
  background-color: #ffffff !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
}

#ribbonGroupPageTools .ribbon-btn-clear {
  color: #ef4444 !important;
}

#ribbonGroupPageTools .ribbon-btn-clear:hover {
  background: #fef2f2 !important;
  border-color: #fecaca !important;
  color: #b91c1c !important;
}

/* ==========================================================================
   Group 6: Title & Subtitle Settings Ribbon Styling
   ========================================================================== */
#ribbonGroupTitles {
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  align-items: center !important;
  height: 78px !important;
  box-sizing: border-box !important;
  width: auto !important;
  min-width: 0 !important;
}

#ribbonGroupTitles .ribbon-controls-grid {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  margin-top: 2px !important;
  width: 100% !important;
}

#ribbonGroupTitles .ribbon-row {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  height: 26px !important;
  min-height: 26px !important;
  max-height: 26px !important;
  width: 100% !important;
}

#ribbonGroupTitles .ribbon-row .ribbon-icon-btn {
  position: relative !important;
  width: 26px !important;
  height: 26px !important;
  min-width: 26px !important;
  max-width: 26px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 4px !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  color: #2d264b !important;
  cursor: pointer !important;
  transition: all 0.12s ease !important;
}

#ribbonGroupTitles .ribbon-row .ribbon-icon-btn:hover {
  background: #ede8fa !important;
  border-color: #dcd8e8 !important;
  color: #6d4aff !important;
}

#ribbonGroupTitles #ribbonTitleColorBtn {
  height: 26px !important;
  width: 58px !important;
  padding: 0 4px !important;
  border: 1px solid #dcd8e8 !important;
  border-radius: 4px !important;
  background: #ffffff !important;
  color: #2d264b !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  cursor: pointer !important;
  transition: all 0.12s ease !important;
  position: relative !important;
  box-sizing: border-box !important;
  flex-shrink: 0 !important;
}

#ribbonGroupTitles #ribbonTitleColorBtn:hover {
  background: #f8f6fe !important;
  border-color: #6d4aff !important;
  color: #6d4aff !important;
}

#ribbonGroupTitles .ribbon-title-size-select {
  width: 56px !important;
  height: 26px !important;
  font-size: 11px !important;
  padding: 0 4px !important;
  border-radius: 4px !important;
  border: 1px solid #dcd8e8 !important;
  background-color: #ffffff !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
}

#ribbonGroupTitles .ribbon-segmented-group {
  display: inline-flex !important;
  align-items: center !important;
  height: 26px !important;
  padding: 1px !important;
  gap: 1px !important;
  border: 1px solid #dcd8e8 !important;
  border-radius: 4px !important;
  background: #ffffff !important;
  flex-shrink: 0 !important;
}

#ribbonGroupTitles .ribbon-seg-btn {
  width: 22px !important;
  height: 22px !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  color: #64748b !important;
  border-radius: 3px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.12s ease !important;
}

#ribbonGroupTitles .ribbon-seg-btn:hover {
  background: #f8f6fe !important;
  color: #6d4aff !important;
}

#ribbonGroupTitles .ribbon-seg-btn.active {
  background: #6d4aff !important;
  color: #ffffff !important;
}

#ribbonGroupTitles .ribbon-title-pill-btn {
  height: 26px !important;
  padding: 0 6px !important;
  border-radius: 4px !important;
  border: 1px solid #dcd8e8 !important;
  background: #ffffff !important;
  color: #2d264b !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: all 0.12s ease !important;
}

#ribbonGroupTitles .ribbon-title-pill-btn:hover {
  background: #f8f6fe !important;
  border-color: #6d4aff !important;
  color: #6d4aff !important;
}

#ribbonGroupTitles .ribbon-title-pill-btn.active {
  background: #f1edfe !important;
  border-color: #6d4aff !important;
  color: #6d4aff !important;
  box-shadow: 0 0 0 1px #6d4aff inset !important;
}

#ribbonGroupTitles .ribbon-mini-label {
  font-size: 10px !important;
  font-weight: 700 !important;
  color: #64748b !important;
  margin-right: 1px !important;
}

#ribbonGroupTitles .ribbon-mini-num {
  width: 32px !important;
  height: 26px !important;
  font-size: 11px !important;
  text-align: center !important;
  border: 1px solid #dcd8e8 !important;
  border-radius: 4px !important;
  padding: 0 2px !important;
  background: #ffffff !important;
  color: #2d264b !important;
}



/* ==========================================================================
   Group 7: Random Font (Ludo Dice + Undo / Redo) Ribbon Styling
   ========================================================================== */
#ribbonGroupRandom {
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  align-items: center !important;
  height: 78px !important;
  box-sizing: border-box !important;
  width: auto !important;
  min-width: 0 !important;
}

#ribbonGroupRandom .ribbon-controls-row {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 6px !important;
  height: 56px !important;
  margin-top: 2px !important;
}

.ludo-dice-btn {
  width: 52px !important;
  height: 52px !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  perspective: 600px !important;
  outline: none !important;
  position: relative !important;
}

.ludo-dice-cube {
  width: 48px !important;
  height: 48px !important;
  background: linear-gradient(145deg, #ffffff 0%, #f7f6fc 60%, #eeeaf9 100%) !important;
  border: 1.5px solid #d4cde8 !important;
  border-radius: 10px !important;
  box-shadow: 0 3px 6px rgba(109, 74, 255, 0.12),
              0 1px 2px rgba(0, 0, 0, 0.08),
              inset 0 1px 1px #ffffff,
              inset 0 -2px 2px rgba(109, 74, 255, 0.08) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.18s ease !important;
  box-sizing: border-box !important;
}

.ludo-dice-btn:hover .ludo-dice-cube {
  transform: translateY(-1.5px) scale(1.02) !important;
  border-color: #6d4aff !important;
  box-shadow: 0 5px 12px rgba(109, 74, 255, 0.22),
              0 2px 4px rgba(0, 0, 0, 0.08),
              inset 0 1px 1px #ffffff !important;
}

.ludo-dice-btn:active .ludo-dice-cube {
  transform: translateY(1px) scale(0.96) !important;
  box-shadow: 0 1px 3px rgba(109, 74, 255, 0.15),
              inset 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

@keyframes ludo-dice-spin {
  0% {
    transform: rotate(0deg) scale(1);
  }
  25% {
    transform: rotate(180deg) scale(0.85);
  }
  50% {
    transform: rotate(360deg) scale(1.15);
  }
  75% {
    transform: rotate(540deg) scale(0.92);
  }
  100% {
    transform: rotate(720deg) scale(1);
  }
}

.ludo-dice-btn.rolling .ludo-dice-cube {
  animation: ludo-dice-spin 0.45s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

#ribbonGroupRandom .ribbon-history-col {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  justify-content: center !important;
  height: 56px !important;
}

#ribbonGroupRandom .ribbon-history-btn {
  width: 26px !important;
  height: 26px !important;
  min-width: 26px !important;
  max-width: 26px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 4px !important;
  border: 1px solid #dcd8e8 !important;
  background: #ffffff !important;
  color: #2d264b !important;
  cursor: pointer !important;
  transition: all 0.12s ease !important;
}

#ribbonGroupRandom .ribbon-history-btn:hover:not(:disabled) {
  background: #f8f6fe !important;
  border-color: #6d4aff !important;
  color: #6d4aff !important;
}

#ribbonGroupRandom .ribbon-history-btn:active:not(:disabled) {
  background: #ede8fa !important;
  transform: scale(0.96) !important;
}

#ribbonGroupRandom .ribbon-history-btn:disabled {
  opacity: 0.4 !important;
  cursor: not-allowed !important;
}


/* ==========================================================================
   Insert Tab Ribbon Groups & Interactive Cover Card Styling
   ========================================================================== */

/* Dynamic Cover Page Card Button */
.ribbon-cover-card-btn {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 6px !important;
  height: 56px !important;
  max-height: 56px !important;
  min-height: 56px !important;
  padding: 4px 8px !important;
  border-radius: 6px !important;
  border: 1px solid #dcd8e8 !important;
  background: #ffffff !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  box-sizing: border-box !important;
}

.ribbon-cover-card-btn:hover {
  border-color: #6d4aff !important;
  background: #faf8fe !important;
  box-shadow: 0 3px 8px rgba(109, 74, 255, 0.16) !important;
}

.ribbon-cover-card-btn.active {
  border-color: #6d4aff !important;
  background: #f5f2fe !important;
  box-shadow: 0 0 0 1px #6d4aff inset !important;
}

.cover-card-preview {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 30px !important;
  height: 40px !important;
  background: #ffffff !important;
  border-radius: 3px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
  flex-shrink: 0 !important;
}

.cover-card-meta {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 2px !important;
}

.cover-card-title {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #2d264b !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
}

.cover-card-status {
  font-size: 9px !important;
  font-weight: 800 !important;
  padding: 1px 5px !important;
  border-radius: 999px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  line-height: 1.2 !important;
}

.cover-card-status.on {
  background: #ecfdf5 !important;
  color: #059669 !important;
  border: 1px solid #a7f3d0 !important;
}

.cover-card-status.off {
  background: #f1f5f9 !important;
  color: #64748b !important;
  border: 1px solid #cbd5e1 !important;
}

/* Insert Tab 2-Row Uniform Tools */
#ribbonPanel-insert .ribbon-tool-mini,
#ribbonPanel-insert .ribbon-btn-action {
  height: 26px !important;
  max-height: 26px !important;
  min-height: 26px !important;
  padding: 0 8px !important;
  border: 1px solid #dcd8e8 !important;
  border-radius: 4px !important;
  background: #ffffff !important;
  color: #2d264b !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  cursor: pointer !important;
  transition: all 0.12s ease !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
}

#ribbonPanel-insert .ribbon-tool-mini:hover,
#ribbonPanel-insert .ribbon-btn-action:hover {
  background: #f8f6fe !important;
  border-color: #6d4aff !important;
  color: #6d4aff !important;
}

#ribbonPanel-insert .ribbon-tool-mini:active,
#ribbonPanel-insert .ribbon-btn-action:active {
  background: #ede8fa !important;
  transform: scale(0.97) !important;
}

#ribbonPanel-insert .ribbon-tool-mini svg,
#ribbonPanel-insert .ribbon-btn-action svg {
  width: 13px !important;
  height: 13px !important;
  flex-shrink: 0 !important;
}

#ribbonPanel-insert .ribbon-split-wrap {
  position: relative !important;
  display: inline-flex !important;
}

#ribbonPanel-insert .ribbon-flyout-menu,
.word-ribbon .ribbon-flyout-menu,
.ribbon-flyout-menu {
  position: absolute !important;
  top: calc(100% + 4px) !important;
  left: 0 !important;
  background: #ffffff !important;
  border: 1px solid #dcd8e8 !important;
  border-radius: 8px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18), 0 3px 8px rgba(0, 0, 0, 0.08) !important;
  padding: 5px !important;
  flex-direction: column !important;
  gap: 3px !important;
  z-index: 99999 !important;
  min-width: 145px !important;
}

#ribbonPanel-insert .ribbon-flyout-menu:not([hidden]),
.word-ribbon .ribbon-flyout-menu:not([hidden]),
.ribbon-flyout-menu:not([hidden]),
.ribbon-export-menu:not([hidden]) {
  display: flex !important;
}

#ribbonPanel-insert .ribbon-flyout-menu[hidden],
.word-ribbon .ribbon-flyout-menu[hidden],
.word-ribbon [hidden].ribbon-flyout-menu,
.ribbon-flyout-menu[hidden],
.ribbon-export-menu[hidden],
[hidden] {
  display: none !important;
}

/* Group 1: Pages & Cover Page Ribbon Settings */
#ribbonPanel-insert .ribbon-toggle-btn.active,
#ribbonPanel-insert .ribbon-tool-mini.active {
  background: #f3effe !important;
  border-color: #6d4aff !important;
  color: #6d4aff !important;
  box-shadow: 0 0 0 1px #6d4aff inset !important;
}

#ribbonGroupInsertPages .ribbon-icon-btn {
  width: 26px !important;
  height: 26px !important;
  min-width: 26px !important;
  max-width: 26px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 4px !important;
  border: 1px solid #dcd8e8 !important;
  background: #ffffff !important;
  cursor: pointer !important;
  position: relative !important;
  box-sizing: border-box !important;
  transition: all 0.12s ease !important;
}

#ribbonGroupInsertPages .ribbon-icon-btn:hover {
  background: #f8f6fe !important;
  border-color: #6d4aff !important;
  color: #6d4aff !important;
}

#ribbonGroupInsertPages .ribbon-mini-num,
#ribbonGroupInsertPages .ribbon-select {
  height: 26px !important;
  max-height: 26px !important;
  min-height: 26px !important;
  border: 1px solid #dcd8e8 !important;
  border-radius: 4px !important;
  background: #ffffff !important;
  color: #2d264b !important;
  font-family: inherit !important;
  box-sizing: border-box !important;
}

#ribbonGroupInsertPages .ribbon-mini-num:focus,
#ribbonGroupInsertPages .ribbon-select:focus {
  border-color: #6d4aff !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(109, 74, 255, 0.15) !important;
}


/* ==========================================================================
   Standardized 2-Row Office Ribbon Grid (Home & Insert Tabs)
   ========================================================================== */
.word-ribbon .ribbon-controls-grid {
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  gap: 4px !important;
  height: 56px !important;
  min-height: 56px !important;
  max-height: 56px !important;
  box-sizing: border-box !important;
}

.word-ribbon .ribbon-row {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 4px !important;
  height: 26px !important;
  min-height: 26px !important;
  max-height: 26px !important;
  box-sizing: border-box !important;
  flex-shrink: 0 !important;
}

/* ==========================================================================
   Papers Tab 2-Row Uniform Tools
   ========================================================================== */
#ribbonPanel-papers .ribbon-tool-mini,
#ribbonPanel-papers .ribbon-btn-action,
#ribbonPanel-papers .ribbon-toggle-btn,
#ribbonPanel-papers .ribbon-pill-btn {
  height: 26px !important;
  max-height: 26px !important;
  min-height: 26px !important;
  padding: 0 6px !important;
  border: 1px solid #dcd8e8 !important;
  border-radius: 4px !important;
  background: #ffffff !important;
  color: #2d264b !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  cursor: pointer !important;
  transition: all 0.12s ease !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
}

#ribbonPanel-papers .ribbon-tool-mini:hover,
#ribbonPanel-papers .ribbon-btn-action:hover,
#ribbonPanel-papers .ribbon-toggle-btn:hover,
#ribbonPanel-papers .ribbon-pill-btn:hover {
  background: #f8f6fe !important;
  border-color: #6d4aff !important;
  color: #6d4aff !important;
}

#ribbonPanel-papers .ribbon-tool-mini:active,
#ribbonPanel-papers .ribbon-btn-action:active,
#ribbonPanel-papers .ribbon-toggle-btn:active,
#ribbonPanel-papers .ribbon-pill-btn:active {
  background: #ede8fa !important;
  transform: scale(0.97) !important;
}

#ribbonPanel-papers .ribbon-toggle-btn.active,
#ribbonPanel-papers .ribbon-pill-btn.active {
  background: #f3effe !important;
  border-color: #6d4aff !important;
  color: #6d4aff !important;
  box-shadow: 0 0 0 1px #6d4aff inset !important;
}

#ribbonPanel-papers .ribbon-mini-num,
#ribbonPanel-papers .ribbon-select {
  height: 26px !important;
  max-height: 26px !important;
  min-height: 26px !important;
  border: 1px solid #dcd8e8 !important;
  border-radius: 4px !important;
  background: #ffffff !important;
  color: #2d264b !important;
  font-family: inherit !important;
  box-sizing: border-box !important;
}

#ribbonPanel-papers .ribbon-mini-num:focus,
#ribbonPanel-papers .ribbon-select:focus {
  border-color: #6d4aff !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(109, 74, 255, 0.15) !important;
}

/* ==========================================================================
   Layout Tab 2-Row Uniform Tools
   ========================================================================== */
#ribbonPanel-layout .ribbon-tool-mini,
#ribbonPanel-layout .ribbon-btn-action,
#ribbonPanel-layout .ribbon-toggle-btn,
#ribbonPanel-layout .ribbon-pill-btn {
  height: 26px !important;
  max-height: 26px !important;
  min-height: 26px !important;
  padding: 0 6px !important;
  border: 1px solid #dcd8e8 !important;
  border-radius: 4px !important;
  background: #ffffff !important;
  color: #2d264b !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  cursor: pointer !important;
  transition: all 0.12s ease !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
}

#ribbonPanel-layout .ribbon-tool-mini:hover,
#ribbonPanel-layout .ribbon-btn-action:hover,
#ribbonPanel-layout .ribbon-toggle-btn:hover,
#ribbonPanel-layout .ribbon-pill-btn:hover {
  background: #f8f6fe !important;
  border-color: #6d4aff !important;
  color: #6d4aff !important;
}

#ribbonPanel-layout .ribbon-tool-mini:active,
#ribbonPanel-layout .ribbon-btn-action:active,
#ribbonPanel-layout .ribbon-toggle-btn:active,
#ribbonPanel-layout .ribbon-pill-btn:active {
  background: #ede8fa !important;
  transform: scale(0.97) !important;
}

#ribbonPanel-layout .ribbon-toggle-btn.active,
#ribbonPanel-layout .ribbon-pill-btn.active {
  background: #f3effe !important;
  border-color: #6d4aff !important;
  color: #6d4aff !important;
  box-shadow: 0 0 0 1px #6d4aff inset !important;
}

#ribbonPanel-layout .ribbon-mini-num,
#ribbonPanel-layout .ribbon-mini-text,
#ribbonPanel-layout .ribbon-select {
  height: 26px !important;
  max-height: 26px !important;
  min-height: 26px !important;
  border: 1px solid #dcd8e8 !important;
  border-radius: 4px !important;
  background: #ffffff !important;
  color: #2d264b !important;
  font-family: inherit !important;
  box-sizing: border-box !important;
}

#ribbonPanel-layout .ribbon-mini-num {
  font-size: 11px !important;
  font-weight: 600 !important;
  text-align: center !important;
  padding: 0 4px !important;
}

#ribbonPanel-layout .ribbon-mini-text {
  font-size: 11px !important;
  padding: 0 6px !important;
}

#ribbonPanel-layout .ribbon-mini-num:focus,
#ribbonPanel-layout .ribbon-mini-text:focus,
#ribbonPanel-layout .ribbon-select:focus {
  border-color: #6d4aff !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(109, 74, 255, 0.15) !important;
}


/* ==========================================================================
   Effects Tab 2-Row Uniform Tools
   ========================================================================== */
#ribbonPanel-effects .ribbon-tool-mini,
#ribbonPanel-effects .ribbon-btn-action,
#ribbonPanel-effects .ribbon-toggle-btn,
#ribbonPanel-effects .ribbon-pill-btn {
  height: 26px !important;
  max-height: 26px !important;
  min-height: 26px !important;
  padding: 0 6px !important;
  border: 1px solid #dcd8e8 !important;
  border-radius: 4px !important;
  background: #ffffff !important;
  color: #2d264b !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  cursor: pointer !important;
  transition: all 0.12s ease !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
}

#ribbonPanel-effects .ribbon-tool-mini:hover,
#ribbonPanel-effects .ribbon-btn-action:hover,
#ribbonPanel-effects .ribbon-toggle-btn:hover,
#ribbonPanel-effects .ribbon-pill-btn:hover {
  background: #f8f6fe !important;
  border-color: #6d4aff !important;
  color: #6d4aff !important;
}

#ribbonPanel-effects .ribbon-tool-mini:active,
#ribbonPanel-effects .ribbon-btn-action:active,
#ribbonPanel-effects .ribbon-toggle-btn:active,
#ribbonPanel-effects .ribbon-pill-btn:active {
  background: #ede8fa !important;
  transform: scale(0.97) !important;
}

#ribbonPanel-effects .ribbon-toggle-btn.active,
#ribbonPanel-effects .ribbon-pill-btn.active {
  background: #f3effe !important;
  border-color: #6d4aff !important;
  color: #6d4aff !important;
  box-shadow: 0 0 0 1px #6d4aff inset !important;
}

#ribbonPanel-effects .ribbon-mini-num,
#ribbonPanel-effects .ribbon-mini-text,
#ribbonPanel-effects .ribbon-select {
  height: 26px !important;
  max-height: 26px !important;
  min-height: 26px !important;
  border: 1px solid #dcd8e8 !important;
  border-radius: 4px !important;
  background: #ffffff !important;
  color: #2d264b !important;
  font-family: inherit !important;
  box-sizing: border-box !important;
}

#ribbonPanel-effects .ribbon-mini-num:focus,
#ribbonPanel-effects .ribbon-mini-text:focus,
#ribbonPanel-effects .ribbon-select:focus {
  border-color: #6d4aff !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(109, 74, 255, 0.15) !important;
}

/* =========================================================
   MEASUREMENT CANVAS RULER (View & Tools -> Rulers)
   ========================================================= */
.word-canvas-ruler {
  height: 20px;
  background: #f8fafc;
  border-bottom: 1px solid #cbd5e1;
  display: flex;
  align-items: stretch;
  user-select: none;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 9px;
  color: #64748b;
  overflow: hidden;
  z-index: 4;
}
.word-canvas-ruler[hidden] {
  display: none !important;
}
.ruler-corner {
  width: 32px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f1f5f9;
  border-right: 1px solid #cbd5e1;
  font-weight: 700;
  color: #94a3b8;
  font-size: 8px;
  text-transform: uppercase;
}
.ruler-track {
  flex: 1;
  display: flex;
  position: relative;
  overflow: hidden;
  background-image: repeating-linear-gradient(to right, #cbd5e1 0, #cbd5e1 1px, transparent 1px, transparent 10px),
                    repeating-linear-gradient(to right, #94a3b8 0, #94a3b8 1px, transparent 1px, transparent 50px);
  background-size: 10px 6px, 50px 12px;
  background-position: left bottom, left bottom;
  background-repeat: repeat-x;
}
.ruler-mark-num {
  position: absolute;
  top: 2px;
  font-size: 8.5px;
  font-weight: 600;
  color: #64748b;
  transform: translateX(-50%);
}

/* =========================================================
   WORD COUNT & DOCUMENT STATISTICS MODAL
   ========================================================= */
.word-stats-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.word-stats-modal[hidden] {
  display: none !important;
}
.word-stats-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(2px);
}
.word-stats-card {
  position: relative;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.22);
  width: 360px;
  max-width: 90vw;
  border: 1px solid #e2e8f0;
  overflow: hidden;
  animation: wordStatsPopIn 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes wordStatsPopIn {
  from { opacity: 0; transform: scale(0.94); }
  to { opacity: 1; transform: scale(1); }
}
.word-stats-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
}
.word-stats-title-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}
.word-stats-title {
  font-size: 14px;
  font-weight: 700;
  color: #1e293b;
}
.word-stats-close-btn {
  background: none;
  border: none;
  font-size: 16px;
  color: #64748b;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
}
.word-stats-close-btn:hover {
  background: #e2e8f0;
  color: #0f172a;
}
.word-stats-grid {
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.word-stats-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  color: #475569;
}
.word-stats-item.highlight {
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px dashed #e2e8f0;
  color: #2563eb;
  font-weight: 600;
}
.word-stats-item .stats-label {
  font-weight: 500;
}
.word-stats-item .stats-val {
  font-weight: 700;
  color: #0f172a;
}
.word-stats-actions {
  padding: 12px 20px;
  background: #f8fafc;
  border-top: 1px solid #e2e8f0;
  display: flex;
  justify-content: flex-end;
}

#ribbonPanel-view .ribbon-toggle-btn.active,
#ribbonPanel-view .ribbon-pill-btn.active {
  background: #f3effe !important;
  border-color: #6d4aff !important;
  color: #6d4aff !important;
  box-shadow: 0 0 0 1px #6d4aff inset !important;
}

#statusWordCount {
  cursor: pointer !important;
  transition: background 0.15s, color 0.15s;
  padding: 2px 6px;
  border-radius: 4px;
}
#statusWordCount:hover {
  background: rgba(255, 255, 255, 0.2) !important;
  color: #ffffff !important;
}

/* Subtitle List Grouping: Title vs Subtitle */
.sub-group {
  background: #ffffff !important;
  border: 1px solid #e0dbe8 !important;
  border-radius: 8px !important;
  padding: 6px 8px !important;
  margin-bottom: 6px !important;
}

.sub-group-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 5px !important;
  padding-bottom: 4px !important;
  border-bottom: 1px dashed #eae5f5 !important;
}

.sub-group-title {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #3b3158 !important;
}

.sub-pill {
  font-size: 9px !important;
  font-weight: 800 !important;
  letter-spacing: 0.5px !important;
  padding: 1px 6px !important;
  border-radius: 4px !important;
  text-transform: uppercase !important;
}

.sub-pill.title {
  background: #ede9fe !important;
  color: #6d4aff !important;
  border: 1px solid #dcd1fb !important;
}

.sub-pill.sub {
  background: #e0f2fe !important;
  color: #0284c7 !important;
  border: 1px solid #bae6fd !important;
}

.sub-badge-tag {
  font-size: 9.5px !important;
  font-weight: 800 !important;
  padding: 1.5px 5px !important;
  border-radius: 4px !important;
  flex-shrink: 0 !important;
  line-height: 1 !important;
}

.sub-badge-tag.title {
  background: #ede9fe !important;
  color: #6d4aff !important;
  border: 1px solid #ddd6fe !important;
}

.sub-badge-tag.sub {
  background: #f0fdf4 !important;
  color: #166534 !important;
  border: 1px solid #bbf7d0 !important;
}

.sub-empty-card {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 5px 8px !important;
  font-size: 11px !important;
  color: #71688d !important;
  background: #faf9fd !important;
  border-radius: 6px !important;
  border: 1px dashed #dcd8e8 !important;
}

.sub-empty-card .btn.mini {
  height: 22px !important;
  font-size: 10px !important;
  padding: 0 6px !important;
  border-radius: 4px !important;
  border: 1px solid #dcd8e8 !important;
  background: #ffffff !important;
  cursor: pointer !important;
  color: #6d4aff !important;
  font-weight: 600 !important;
}
.sub-empty-card .btn.mini:hover {
  background: #ede9fe !important;
  border-color: #c4b5fd !important;
}

/* Empty state for Titles & Subtitles pane */
.titles-empty-box {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  padding: 24px 14px 16px !important;
  background: #ffffff !important;
  border: 1px solid #e0dbe8 !important;
  border-radius: 10px !important;
  margin: 6px 0 !important;
}

.titles-empty-icon {
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  background: #f3effe !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 10px !important;
}

.titles-empty-title {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #2e2646 !important;
  margin-bottom: 5px !important;
  line-height: 1.4 !important;
}

.titles-empty-sub {
  font-size: 11px !important;
  color: #635b7b !important;
  line-height: 1.45 !important;
  margin-bottom: 12px !important;
}

.titles-empty-hints {
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 5px !important;
  background: #faf9fd !important;
  border: 1px dashed #dcd8e8 !important;
  border-radius: 8px !important;
  padding: 8px 10px !important;
  text-align: left !important;
  font-size: 11px !important;
  color: #4b4168 !important;
  box-sizing: border-box !important;
}

.titles-empty-hints .hint-item {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.titles-empty-hints code {
  background: #ffffff !important;
  border: 1px solid #dcd8e8 !important;
  border-radius: 4px !important;
  padding: 1px 5px !important;
  font-family: inherit !important;
  font-weight: 700 !important;
  color: #6d4aff !important;
}

/* Interactive Table Card & Mini Grid */
.table-card {
  background: #ffffff !important;
  border: 1px solid #dedae8 !important;
  border-radius: 8px !important;
  margin-bottom: 8px !important;
  overflow: hidden !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
  transition: border-color 0.15s ease !important;
}

.table-card-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 6px 8px !important;
  background: #f8f6fc !important;
  cursor: pointer !important;
  user-select: none !important;
  gap: 6px !important;
}

.table-card-head:hover {
  background: #f1ecfa !important;
}

.table-card-title {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex: 1 !important;
  min-width: 0 !important;
}

.table-toggle-icon {
  font-size: 10px !important;
  color: #6d4aff !important;
  flex-shrink: 0 !important;
}

.table-card.collapsed .table-card-body {
  display: none !important;
}

.table-card-body {
  padding: 8px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  background: #ffffff !important;
  border-top: 1px solid #eeeaf6 !important;
}

/* Scrollable mini spreadsheet editor */
.table-grid-scroll {
  width: 100% !important;
  overflow-x: auto !important;
  border: 1px solid #dcd8e8 !important;
  border-radius: 6px !important;
  background: #faf9fd !important;
  max-height: 220px !important;
  overflow-y: auto !important;
}

.table-mini-editor {
  width: 100% !important;
  border-collapse: collapse !important;
  font-size: 11px !important;
}

.table-mini-editor th,
.table-mini-editor td {
  padding: 2px !important;
  border: 1px solid #e0dbe8 !important;
}

.table-mini-editor th {
  background: #ede9fe !important;
}

.table-mini-editor input {
  width: 100% !important;
  min-width: 65px !important;
  box-sizing: border-box !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  padding: 3px 5px !important;
  font-size: 11px !important;
  font-family: inherit !important;
  color: #1e1b4b !important;
  border-radius: 4px !important;
  outline: none !important;
}

.table-mini-editor th input {
  font-weight: 700 !important;
  color: #4c1d95 !important;
}

.table-mini-editor input:focus {
  background: #ffffff !important;
  border-color: #6d4aff !important;
  box-shadow: 0 0 0 2px rgba(109, 74, 255, 0.15) !important;
}

/* Row & Column Toolbar */
.table-grid-toolbar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 6px !important;
  padding: 2px 0 !important;
}

.btn-group-mini {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
}

.btn-group-mini .btn.mini {
  height: 24px !important;
  font-size: 10.5px !important;
  padding: 0 7px !important;
  border-radius: 5px !important;
  background: #f5f3ff !important;
  color: #6d4aff !important;
  border: 1px solid #ddd6fe !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px !important;
}

.btn-group-mini .btn.mini:hover {
  background: #ede9fe !important;
  border-color: #c4b5fd !important;
}

/* Table Controls: Width and Text Alignment */
.table-card-controls {
  display: flex !important;
  flex-direction: column !important;
  gap: 5px !important;
  padding-top: 6px !important;
  border-top: 1px solid #f1ecfa !important;
  margin-top: 2px !important;
}


/* Interactive Diagram Card & Digital Mini Preview */
.diagram-card {
  background: #ffffff !important;
  border: 1px solid #dedae8 !important;
  border-radius: 8px !important;
  margin-bottom: 8px !important;
  overflow: hidden !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
  transition: border-color 0.15s ease !important;
}

.diagram-card-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 6px 8px !important;
  background: #f8f6fc !important;
  cursor: pointer !important;
  user-select: none !important;
  gap: 6px !important;
}

.diagram-card-head:hover {
  background: #f1ecfa !important;
}

.diagram-card-title {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex: 1 !important;
  min-width: 0 !important;
}

.diagram-toggle-icon {
  font-size: 10px !important;
  color: #6d4aff !important;
  flex-shrink: 0 !important;
}

.diagram-type-pill {
  font-size: 9.5px !important;
  font-weight: 700 !important;
  padding: 1px 5px !important;
  border-radius: 4px !important;
  letter-spacing: 0.03em !important;
  text-transform: uppercase !important;
  flex-shrink: 0 !important;
}
.diagram-type-pill.flow { background: #ede9fe !important; color: #6d4aff !important; border: 1px solid #ddd6fe !important; }
.diagram-type-pill.chart { background: #e0f2fe !important; color: #0284c7 !important; border: 1px solid #bae6fd !important; }
.diagram-type-pill.tree { background: #fef3c7 !important; color: #d97706 !important; border: 1px solid #fde68a !important; }
.diagram-type-pill.image { background: #ccfbf1 !important; color: #0d9488 !important; border: 1px solid #99f6e4 !important; }

.diagram-card.collapsed .diagram-card-body {
  display: none !important;
}

.diagram-card-body {
  padding: 8px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  background: #ffffff !important;
  border-top: 1px solid #eeeaf6 !important;
}

/* Digital Mini Preview */
.diagram-mini-preview {
  background: #faf9fd !important;
  border: 1px solid #e3dff0 !important;
  border-radius: 6px !important;
  padding: 6px 8px !important;
  max-height: 140px !important;
  overflow-x: auto !important;
  overflow-y: auto !important;
}

.digi-flow-preview {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-wrap: nowrap !important;
  padding: 2px 0 !important;
}
.digi-flow-chip {
  padding: 3px 8px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: #312e81 !important;
  background: #eef2ff !important;
  border: 1px solid #c7d2fe !important;
  border-radius: 5px !important;
  white-space: nowrap !important;
}
.digi-flow-chip.round { border-radius: 14px !important; background: #ede9fe !important; border-color: #ddd6fe !important; color: #5b21b6 !important; }
.digi-flow-chip.decision { border-radius: 3px !important; background: #fef3c7 !important; border-color: #fde68a !important; color: #92400e !important; }
.digi-flow-chip.io { transform: skewX(-10deg) !important; background: #e0e7ff !important; border-color: #c7d2fe !important; }
.digi-flow-arrow { font-size: 12px !important; color: #6d4aff !important; font-weight: 700 !important; }

/* Digital Chart Preview */
.digi-chart-preview {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}
.digi-chart-row {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 10.5px !important;
}
.digi-chart-label { width: 65px !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; color: #475569 !important; font-weight: 500 !important; }
.digi-chart-track { flex: 1 !important; height: 10px !important; background: #ede9fe !important; border-radius: 5px !important; overflow: hidden !important; }
.digi-chart-fill { height: 100% !important; background: linear-gradient(90deg, #6d4aff, #8b5cf6) !important; border-radius: 5px !important; transition: width 0.2s ease !important; }
.digi-chart-val { min-width: 28px !important; text-align: right !important; font-weight: 700 !important; color: #1e1b4b !important; }

/* Digital Tree Preview */
.digi-tree-preview {
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
}
.digi-tree-row {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-size: 10.5px !important;
}
.digi-tree-branch { color: #a5b4fc !important; font-family: monospace !important; font-size: 11px !important; }
.digi-tree-chip { padding: 1px 6px !important; background: #fef3c7 !important; border: 1px solid #fde68a !important; border-radius: 4px !important; color: #92400e !important; font-weight: 600 !important; }
.digi-er-preview { display: grid; gap: 7px; width: 100%; color: #312e4d; }
.digi-er-title { font-size: 10.5px; font-weight: 750; text-align: center; }
.digi-er-entities { display: flex; align-items: center; justify-content: center; gap: 5px; min-width: 0; overflow-x: auto; padding: 2px; }
.digi-er-entity { display: grid; min-width: 72px; max-width: 120px; padding: 5px 7px; border: 1.5px solid #7c5cff; border-radius: 4px; background: #f7f4ff; text-align: center; }
.digi-er-entity b { overflow: hidden; font-size: 9.5px; text-overflow: ellipsis; white-space: nowrap; }
.digi-er-entity small { margin-top: 2px; overflow: hidden; color: #756b91; font-size: 7.5px; text-overflow: ellipsis; white-space: nowrap; }
.digi-er-link { color: #9a8fc0; font-weight: 700; }
.digi-er-relations { display: grid; gap: 3px; }
.digi-er-relations span { padding: 3px 6px; border-radius: 5px; background: #fff7df; color: #76561a; font: 8px/1.35 ui-monospace, Consolas, monospace; text-align: center; }
.diagram-type-pill.er { background: #fff7df !important; color: #8a5a00 !important; border-color: #f2d58c !important; }

/* Digital Image Preview */
.digi-img-preview {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}
.digi-img-thumb { max-height: 50px !important; max-width: 80px !important; border-radius: 4px !important; border: 1px solid #dcd8e8 !important; object-fit: contain !important; }
.digi-img-meta { font-size: 10.5px !important; color: #64748b !important; }

/* Diagram Text Editor */
.diagram-text-editor {
  width: 100% !important;
  min-height: 70px !important;
  max-height: 160px !important;
  font-family: "JetBrains Mono", "Consolas", monospace !important;
  font-size: 11px !important;
  line-height: 1.4 !important;
  padding: 6px 8px !important;
  border: 1px solid #dcd8e8 !important;
  border-radius: 6px !important;
  background: #ffffff !important;
  color: #1e1b4b !important;
  box-sizing: border-box !important;
  resize: vertical !important;
}
.diagram-text-editor:focus {
  border-color: #6d4aff !important;
  box-shadow: 0 0 0 2px rgba(109, 74, 255, 0.15) !important;
  outline: none !important;
}

/* Toolbar & Helper buttons */
.diagram-helper-toolbar {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 4px !important;
}
.diagram-card-controls {
  display: flex !important;
  flex-direction: column !important;
  gap: 5px !important;
  padding-top: 6px !important;
  border-top: 1px solid #f1ecfa !important;
  margin-top: 2px !important;
}
.diagram-del-btn {
  background: transparent !important;
  border: none !important;
  color: #94a3b8 !important;
  cursor: pointer !important;
  font-size: 14px !important;
  line-height: 1 !important;
  padding: 2px 4px !important;
  border-radius: 4px !important;
  transition: all 0.15s ease !important;
}
.diagram-del-btn:hover {
  color: #ef4444 !important;
  background: #fee2e2 !important;
}

/* ---------- Read Mode: only the pages (ribbon and side columns hidden) ---------- */
body.view-read .word-ribbon,
body.view-read #wordContentSidebar,
body.view-read #wordPagesSidebar,
body.view-read #wordAiSidebar {
  display: none !important;
}
body.view-read .word-center-stage {
  flex: 1 1 auto !important;
  max-width: none !important;
}
.read-mode-exit {
  display: none;
}
body.view-read .read-mode-exit {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  position: fixed;
  top: 64px;
  right: 20px;
  z-index: 300;
  padding: 7px 14px;
  border: 1px solid #dcd8e8;
  border-radius: 999px;
  background: #ffffff;
  color: #3b3552;
  font: 600 12.5px/1 inherit;
  box-shadow: 0 4px 14px rgba(30, 20, 70, 0.12);
  cursor: pointer;
}
body.view-read .read-mode-exit:hover {
  border-color: #6d4aff;
  color: #6d4aff;
}
.read-mode-exit kbd,
.shortcuts-list kbd {
  padding: 1px 6px;
  border: 1px solid #d6d2e4;
  border-bottom-width: 2px;
  border-radius: 5px;
  background: #f7f6fb;
  color: #3b3552;
  font: 600 11px/1.5 ui-monospace, SFMono-Regular, Consolas, monospace;
}

/* ---------- Keyboard shortcuts panel (Ctrl + /, or the ? button) ---------- */
.shortcuts-panel {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(20, 16, 40, 0.35);
}
.shortcuts-panel[hidden] {
  display: none;
}
.shortcuts-card {
  width: min(560px, 100%);
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 20px 50px rgba(20, 16, 40, 0.25);
}
.shortcuts-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid #eeecf5;
  font-weight: 700;
  font-size: 15px;
  color: #1e1b2e;
}
.shortcuts-close {
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: #6b6584;
  cursor: pointer;
}
.shortcuts-close:hover {
  background: #f3f1fa;
}
.shortcuts-list {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 9px 18px;
  margin: 0;
  padding: 16px 18px 20px;
  font-size: 13px;
  color: #3b3552;
}
.shortcuts-list dt {
  white-space: nowrap;
}
.shortcuts-list dd {
  margin: 0;
}

/* a ribbon panel wider than the window scrolls sideways (its menus open against the window: toggleRibbonFlyout) */
#wordRibbon .ribbon-panel.active {
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scrollbar-width: thin;
  scrollbar-color: #d6d2e4 transparent;
}
#wordRibbon .ribbon-panel.active::-webkit-scrollbar {
  height: 6px;
}
#wordRibbon .ribbon-panel.active::-webkit-scrollbar-thumb {
  background: #d6d2e4;
  border-radius: 3px;
}
#wordRibbon .ribbon-panel.active > .ribbon-group,
#wordRibbon .ribbon-panel.active > .ribbon-sep {
  flex-shrink: 0;
}
.shortcuts-or {
  margin: 0 4px;
  color: #9a94b3;
  font-size: 11.5px;
}

/* ---------- Pages column: selection (click / Ctrl+click / Shift+click) and drag to reorder ---------- */
.wp-card.selected .wp-card-preview {
  border: 2px solid #6d4aff;
  box-shadow: 0 0 0 3px rgba(109, 74, 255, 0.28);
}
.wp-card.selected .wp-card-badge {
  background: #6d4aff;
  color: #ffffff;
}
.wp-card[draggable="true"] {
  cursor: grab;
}
.wp-card.dragging {
  opacity: 0.45;
}
.wp-card:focus-visible {
  outline: none;
}
.wp-card:focus-visible .wp-card-preview {
  outline: 2px dashed #6d4aff;
  outline-offset: 3px;
}
.wp-drop-indicator {
  flex-shrink: 0;
  width: 92px;
  height: 4px;
  margin: -2px 0;
  border-radius: 2px;
  background: #6d4aff;
  box-shadow: 0 0 0 3px rgba(109, 74, 255, 0.18);
}

/* ---------- pen shine (1–10) next to each pen type in the ribbon ---------- */
.ribbon-shine {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 26px;
  margin: 0 2px;
  cursor: text;
}
.ribbon-shine-icon {
  font-size: 12px;
  line-height: 1;
  color: #b08900;
}
.word-ribbon .ribbon-shine .ribbon-mini-num {
  width: 34px !important;
  height: 26px !important;
  padding: 0 2px !important;
  text-align: center;
}
.ribbon-shine.is-unused {
  opacity: 0.45;
}

/* ---------- Effects tab: strict 2-row uniform alignment across all 6 groups ---------- */
#ribbonPanel-effects .ribbon-row {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 4px !important;
  height: 26px !important;
}
#ribbonPanel-effects .ribbon-row > * {
  height: 26px !important;
  max-height: 26px !important;
  min-height: 26px !important;
  box-sizing: border-box !important;
}
#ribbonPanel-effects .ribbon-mini-num {
  height: 26px !important;
  max-height: 26px !important;
  min-height: 26px !important;
  border: 1px solid #dcd8e8 !important;
  border-radius: 4px !important;
  background: #ffffff !important;
  color: #2d264b !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-align: center !important;
  padding: 0 4px !important;
  box-sizing: border-box !important;
}
#ribbonPanel-effects .ribbon-select {
  height: 26px !important;
  max-height: 26px !important;
  min-height: 26px !important;
  border: 1px solid #dcd8e8 !important;
  border-radius: 4px !important;
  background: #ffffff !important;
  color: #2d264b !important;
  font-size: 11px !important;
  padding: 0 4px !important;
  box-sizing: border-box !important;
}
/* pen thickness: a small bar that shows what the number does */
.ribbon-weight-icon {
  display: inline-block;
  width: 11px;
  height: 4px;
  border-radius: 2px;
  background: #3b3552;
}

/* =====================================================================
   Lab file workspace: the assignment editor's layout (ribbon, columns, chat, status bar)
   built from the same classes; these rules only fill in what is Lab's own. (labspace.js)
   ===================================================================== */
body.mode-lab { overflow: hidden; }
#labWorkspace.lab-word { display: flex !important; }

/* ribbon */
#labRibbon .lab-rb-row { display: flex; align-items: center; gap: 4px; height: 26px; }
#labRibbon .lab-rb-btn, #labRibbon .lab-rb-toggle { height: 26px; padding: 0 9px; gap: 5px; justify-content: center; white-space: nowrap; }
#labRibbon .lab-rb-btn svg { width: 13px; height: 13px; flex-shrink: 0; }
#labRibbon .lab-rb-select { height: 26px; min-width: 150px; padding: 0 6px; font-size: 11px; }
#labRibbon .lab-rb-toggle.active { border-color: #6d4aff; background: #f1ecfe; color: #4f2fd9; }
#labRibbon .lab-rb-danger { color: #c0392b; }
#labRibbon .lab-rb-primary {
  height: 26px; width: 100%; padding: 0 12px; gap: 6px; justify-content: center;
  border: 0 !important; border-radius: 7px; background: #6d4aff !important; color: #fff !important; font-weight: 700;
}
#labRibbon .lab-rb-primary svg { width: 14px; height: 14px; stroke: #fff; }
#labRibbon .lab-rb-primary:hover { background: #5b38f0 !important; }
#labRibbon .lab-rb-primary:disabled, #labRibbon .lab-rb-primary.busy { opacity: .6; cursor: progress; }
.lab-saved-state { display: inline-flex; align-items: center; gap: 6px; margin-right: 6px; color: #6d6580; font-size: 11px; white-space: nowrap; }
.lab-saved-state .badge-dot { width: 6px; height: 6px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 3px rgba(34, 197, 94, .12); }

/* left column: Questions / Cover / Header-Footer */
#labContentSidebar { padding: 0 !important; grid-column: auto; }
#labContentSidebar .lab-pane { flex: 1; min-height: 0; overflow-y: auto; }
#labContentSidebar .lab-pane[hidden] { display: none; }
#labContentSidebar .lab-pane-inner { padding: 12px 14px 16px; display: flex; flex-direction: column; gap: 2px; }
#labContentSidebar .lab-pane-inner > label { margin-bottom: 10px; }
#labContentSidebar #labQuestions { min-height: 220px; }
#labContentSidebar .lab-cover { margin: 0; border: 0; box-shadow: none; background: transparent; padding: 0; }
#labContentSidebar .lab-cover > summary { display: none; } /* the column tab already names it */
.lab-write-dock { flex-shrink: 0; padding: 10px 14px 12px; border-top: 1px solid #e6e2f0; background: #fff; }
.lab-write-dock .hint { margin: 6px 0 0; font-size: 11px; }
.lab-write-dock .hint:empty { display: none; }
.lab-write-dock #labStatus.error { color: #c0392b; }

/* pages column: one card per sheet of the document */
#labPagesList { gap: 12px; padding-top: 10px; }
.lab-page-card { cursor: pointer; }
.lab-page-mini {
  background: #fff !important; background-image: none !important; padding: 9px 8px !important;
  display: flex; flex-direction: column; gap: 5px; overflow: hidden;
}
.lab-page-mini::before { display: none !important; }
.lab-page-mini .lab-page-kind { font-size: 10px; font-weight: 800; color: #4f2fd9; text-align: center; }
.lab-page-mini .lab-page-kind:empty { display: none; }
.lab-page-mini .lab-page-text { font-size: 7.5px; line-height: 1.3; color: #3b3552; font-weight: 600; max-height: 40px; overflow: hidden; }
.lab-page-mini i { display: block; height: 3px; border-radius: 2px; background: #e4e1ee; }
.lab-page-mini i:nth-of-type(2) { width: 80%; } .lab-page-mini i:nth-of-type(3) { width: 60%; }
.lab-page-cover .lab-page-kind { margin-top: 26px; font-size: 11px; }
.lab-page-cover i { margin: 0 auto; width: 70%; }
.lab-page-card.active .lab-page-mini { border: 2px solid #6d4aff !important; box-shadow: 0 0 0 3px rgba(109, 74, 255, .22) !important; }
.lab-page-card:not(.active) .wp-card-badge { background: #e2dfec; color: #4a4560; }

/* centre: the document */
.lab-center-stage { flex: 1; min-width: 0; display: flex; flex-direction: column; background: #ece9f5; }
.lab-center-stage .lab-canvas { flex: 1; min-height: 0; display: flex; }
.lab-center-stage .lab-canvas iframe, .lab-center-stage .lab-canvas textarea { flex: 1; width: 100%; min-height: 0; margin: 0; border: 0; border-radius: 0; }
.lab-center-stage .lab-canvas iframe { background: #e8e6e1; }
.lab-center-stage .lab-canvas textarea { padding: 18px 22px; font: 13px/1.5 Consolas, "Courier New", monospace; resize: none; background: #fff; }
.lab-center-stage [hidden] { display: none !important; }
#labPageToolbar .wpt-pill.active { background: #ebe5ff; color: #4f2fd9; }

/* right: the lab assistant */
#labAiSidebar .word-ai-chat-view { display: flex; flex-direction: column; flex: 1; min-height: 0; }
#labChatMessages { flex: 1; min-height: 0; overflow-y: auto; }
.lab-prompt-chips { display: flex; flex-direction: column; gap: 8px; }
.lab-prompt-chip {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px; text-align: left; cursor: pointer;
  background: #fff; border: 1px solid #e5e0f2; border-radius: 10px; box-shadow: 0 1px 3px rgba(0, 0, 0, .02);
  font-size: 12px; font-weight: 600; color: #2e264d; transition: all .16s ease;
}
.lab-prompt-chip svg { width: 22px; height: 22px; padding: 4px; border-radius: 6px; background: #f1ecfe; stroke: #6d4aff; flex-shrink: 0; box-sizing: border-box; }
.lab-prompt-chip:hover { border-color: #6d4aff; transform: translateY(-1px); box-shadow: 0 3px 8px rgba(109, 74, 255, .12); }
#labAiSidebar .ai-chat-bubble { white-space: pre-wrap; }
#labAiSidebar .ai-chat-bubble.ai-chat-error { background: #fdecea; color: #a23020; }
.lab-ai-settings { margin-top: 8px; border-top: 1px solid #ece8f5; padding-top: 6px; }
.lab-ai-settings > summary { cursor: pointer; font-size: 11.5px; font-weight: 700; color: #5c5674; padding: 2px 0 4px; }
.lab-ai-settings #aiSlotLab .row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.lab-ai-settings #aiSlotLab label { font-size: 11px; }
#labHeadTabs .wct-tab svg { width: 14px; height: 14px; flex-shrink: 0; }

/* the Lab is driven from its chat: the manual question box and Write buttons stay in the page for lab.js */
#labWorkspace .lab-manual { display: none !important; }

/* Lab: the assistant is the left column; its settings (Settings / Cover / Header-Footer) swap in for the chat */
#labAiSidebar.lab-ai-left {
  border-left: 0 !important;
  border-right: 1px solid #dedae8 !important;
  box-shadow: 3px 0 12px rgba(109, 74, 255, .04) !important;
}
#labAiSidebar .word-ai-chat-view[hidden] { display: none !important; }
#labAiSidebar .lab-settings-view { flex: 1; min-height: 0; display: flex; flex-direction: column; background: #faf9fd; padding: 0 !important; }
#labAiSidebar .lab-settings-view[hidden] { display: none !important; }
#labHeadTabs .lab-back-chat { flex: 0 0 auto; color: #4f2fd9; }
#labHeadTabs .lab-back-chat svg { width: 13px; height: 13px; }
#labAiSidebar.lab-ai-left { width: 340px !important; min-width: 340px !important; }
#labHeadTabs { gap: 2px; padding-left: 6px; padding-right: 6px; }
#labHeadTabs .wct-tab { padding-left: 7px; padding-right: 7px; font-size: 11.5px; min-width: 0; flex: 0 1 auto; white-space: nowrap; }
#labHeadTabs .wct-tab span { overflow: visible; text-overflow: clip; }
#labRibbon .lab-rb-title-row { gap: 6px; }
#labRibbon .lab-rb-title-row .ribbon-mini-label { font-size: 10px; font-weight: 700; color: #64748b; }
#labRibbon .lab-rb-title { width: 268px; height: 26px; padding: 0 8px; font-size: 11px; }
/* Lab ribbon: cover text sizes */
#labRibbon .lab-rb-size { display: inline-flex; align-items: center; gap: 4px; margin: 0 4px 0 0; }
#labRibbon .lab-rb-size .ribbon-mini-label { width: 58px; text-align: right; font-size: 10px; font-weight: 700; color: #64748b; }
#labRibbon .lab-rb-size .ribbon-mini-num { width: 48px; height: 26px; text-align: center; }
/* Lab ribbon: output picture alignment */
#labRibbon .lab-rb-align { display: inline-flex; gap: 2px; margin-left: 4px; }
#labRibbon .lab-rb-align-btn { width: 28px; height: 26px; padding: 0; justify-content: center; }
#labRibbon .lab-rb-align-btn.active { border-color: #6d4aff; background: #f1ecfe; color: #4f2fd9; }
/* Lab ribbon: header / footer text */
#labRibbon .lab-rb-hfrow { gap: 4px; }
#labRibbon .lab-rb-hfrow .ribbon-mini-label { width: 40px; text-align: right; font-size: 10px; font-weight: 700; color: #64748b; }
#labRibbon .lab-rb-hftext { width: 132px; height: 26px; padding: 0 7px; font-size: 11px; }
#labRibbon .lab-rb-words { height: 26px; padding: 0 7px; font: 700 11px/1 Consolas, monospace; color: #4f2fd9; }
.lab-rb-words-pop { position: fixed; z-index: 400; width: 290px; padding: 10px 12px; border: 1px solid #dedae8; border-radius: 10px; background: #fff; box-shadow: 0 10px 28px rgba(27, 22, 58, .16); font-size: 11.5px; color: #3b3552; }
.lab-rb-words-pop[hidden] { display: none; }
.lab-rb-words-pop div { margin: 6px 0; line-height: 1.9; }
.lab-rb-words-pop code { padding: 1px 5px; border-radius: 4px; background: #f3f1fa; font-size: 11px; }
.lab-rb-words-pop p { margin: 0; color: #746d88; }
/* Lab ribbon: Format tab */
#labRibbon .lab-rb-seg { display: inline-flex; gap: 2px; }
#labRibbon .lab-rb-fmt-tog { width: 28px; height: 26px; padding: 0; justify-content: center; font-size: 13px; }
#labRibbon .lab-rb-fmt-tog.active { border-color: #6d4aff; background: #f1ecfe; color: #4f2fd9; }
#labRibbon .lab-rb-color { display: inline-flex; align-items: center; gap: 4px; }
#labRibbon .lab-rb-color .ribbon-mini-label { font-size: 10px; font-weight: 700; color: #64748b; }
#labRibbon .lab-rb-color input[type="color"] { width: 30px; height: 26px; padding: 2px; border: 1px solid #dcd8e8; border-radius: 6px; background: #fff; cursor: pointer; }
#labPanel-format .lab-rb-size .ribbon-mini-label { width: auto; min-width: 26px; }
/* Lab ribbon: Home holds the format too, so a panel wider than the window scrolls sideways */
#labRibbon .ribbon-panel.active { overflow-x: auto !important; overflow-y: hidden !important; scrollbar-width: thin; scrollbar-color: #d6d2e4 transparent; }
#labRibbon .ribbon-panel.active > .ribbon-group, #labRibbon .ribbon-panel.active > .ribbon-sep { flex-shrink: 0; }
#labPanel-home .lab-rb-size .ribbon-mini-label { width: auto; min-width: 26px; }


/* ==========================================================================
   Lab Ribbon Panels Mutual Exclusion & Lab Home Tab 2-Row Alignment
   ========================================================================== */
#labRibbon .lab-rb-panel {
  display: none !important;
}

#labRibbon .lab-rb-panel.active {
  display: flex !important;
}

#labPanel-home {
  display: none !important;
}

#labPanel-home.active {
  display: flex !important;
  align-items: flex-start !important;
  gap: 0 !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  padding: 4px 8px !important;
  box-sizing: border-box !important;
}

#labPanel-home .ribbon-group,
#labPanel-home .lab-rb-group {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  padding: 0 8px 3px 8px !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
}

#labPanel-home .ribbon-controls-grid {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  box-sizing: border-box !important;
}

#labPanel-home .ribbon-row,
#labPanel-home .lab-rb-row {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  height: 26px !important;
  max-height: 26px !important;
  min-height: 26px !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

/* Base button and tool styles */
#labPanel-home .ribbon-btn-action,
#labPanel-home .ribbon-toggle-btn,
#labPanel-home .ribbon-tool-mini,
#labPanel-home .lab-rb-btn,
#labPanel-home .lab-rb-toggle,
#labPanel-home .lab-rb-fmt-tog,
#labPanel-home .lab-rb-align-btn {
  height: 26px !important;
  max-height: 26px !important;
  min-height: 26px !important;
  border: 1px solid #dcd8e8 !important;
  border-radius: 4px !important;
  background: #ffffff !important;
  color: #2d264b !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  cursor: pointer !important;
  transition: all 0.12s ease !important;
  white-space: nowrap !important;
  padding: 0 6px !important;
  margin: 0 !important;
  line-height: 1 !important;
}

#labPanel-home .ribbon-btn-action:hover,
#labPanel-home .ribbon-toggle-btn:hover,
#labPanel-home .ribbon-tool-mini:hover,
#labPanel-home .lab-rb-btn:hover,
#labPanel-home .lab-rb-toggle:hover,
#labPanel-home .lab-rb-fmt-tog:hover,
#labPanel-home .lab-rb-align-btn:hover {
  background: #f8f6fe !important;
  border-color: #6d4aff !important;
  color: #6d4aff !important;
}

#labPanel-home .ribbon-btn-action:active,
#labPanel-home .ribbon-toggle-btn:active,
#labPanel-home .ribbon-tool-mini:active,
#labPanel-home .lab-rb-btn:active,
#labPanel-home .lab-rb-toggle:active,
#labPanel-home .lab-rb-fmt-tog:active,
#labPanel-home .lab-rb-align-btn:active {
  background: #ede8fa !important;
  transform: scale(0.98) !important;
}

#labPanel-home .ribbon-toggle-btn.active,
#labPanel-home .lab-rb-toggle.active,
#labPanel-home .lab-rb-fmt-tog.active,
#labPanel-home .lab-rb-align-btn.active {
  background: #f3effe !important;
  border-color: #6d4aff !important;
  color: #6d4aff !important;
  box-shadow: 0 0 0 1px #6d4aff inset !important;
}

#labPanel-home .lab-rb-danger {
  color: #dc2626 !important;
}

#labPanel-home .lab-rb-danger:hover {
  background: #fee2e2 !important;
  border-color: #ef4444 !important;
  color: #b91c1c !important;
}

#labPanel-home .ribbon-btn-action svg,
#labPanel-home .ribbon-tool-mini svg,
#labPanel-home .lab-rb-btn svg,
#labPanel-home .lab-rb-align-btn svg {
  width: 13px !important;
  height: 13px !important;
  flex-shrink: 0 !important;
}

/* Select inputs */
#labPanel-home .ribbon-select,
#labPanel-home .lab-rb-select {
  height: 26px !important;
  max-height: 26px !important;
  min-height: 26px !important;
  border: 1px solid #dcd8e8 !important;
  border-radius: 4px !important;
  background: #ffffff !important;
  color: #2d264b !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  padding: 0 6px !important;
  box-sizing: border-box !important;
  outline: none !important;
  cursor: pointer !important;
}

#labPanel-home .ribbon-select:focus,
#labPanel-home .lab-rb-select:focus,
#labPanel-home input:focus {
  border-color: #6d4aff !important;
  box-shadow: 0 0 0 2px rgba(109, 74, 255, 0.15) !important;
}

/* Numeric & text inputs */
#labPanel-home .ribbon-mini-num {
  height: 26px !important;
  max-height: 26px !important;
  min-height: 26px !important;
  border: 1px solid #dcd8e8 !important;
  border-radius: 4px !important;
  background: #ffffff !important;
  color: #2d264b !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-align: center !important;
  padding: 0 4px !important;
  box-sizing: border-box !important;
  outline: none !important;
}

#labPanel-home input[type="text"],
#labPanel-home .lab-rb-title {
  height: 26px !important;
  max-height: 26px !important;
  min-height: 26px !important;
  border: 1px solid #dcd8e8 !important;
  border-radius: 4px !important;
  background: #ffffff !important;
  color: #2d264b !important;
  font-size: 11px !important;
  padding: 0 8px !important;
  box-sizing: border-box !important;
  outline: none !important;
}

#labPanel-home .ribbon-mini-label {
  font-size: 10px !important;
  font-weight: 700 !important;
  color: #64748b !important;
  white-space: nowrap !important;
  user-select: none !important;
  display: inline-block !important;
}

#labPanel-home .ribbon-group-title {
  font-size: 10px !important;
  font-weight: 600 !important;
  color: #8b859e !important;
  margin-top: 3px !important;
  text-align: center !important;
  white-space: nowrap !important;
}

#labPanel-home .ribbon-sep {
  width: 1px !important;
  height: 56px !important;
  background: #e2dfec !important;
  margin: 0 4px !important;
  flex-shrink: 0 !important;
  align-self: center !important;
}

/* --- Group 1: Question paper (#labRbPaper) --- */
#labRbPaper { width: 204px !important; }
#labRbPaper .ribbon-controls-grid { width: 204px !important; }
#labRbPaper .lab-rb-row { width: 204px !important; }
#labRbUpload { width: 112px !important; max-width: 112px !important; gap: 5px !important; }
#labRbEdit { width: 88px !important; max-width: 88px !important; gap: 5px !important; }
#labRbQuestions { width: 112px !important; max-width: 112px !important; gap: 5px !important; }
#labRbEmpty { width: 88px !important; gap: 5px !important; }
#labRbPaper .lab-manual[style*="display: none"] + #labRbEmpty,
#labWorkspace .lab-manual + #labRbEmpty,
#labRbPaper .lab-rb-row:last-child > #labRbEmpty:only-child {
  width: 204px !important;
  max-width: 204px !important;
  flex: 1 1 100% !important;
}

/* --- Group 2: Program & output (#labRbProgram) --- */
#labRbProgram { width: 204px !important; }
#labRbProgram .ribbon-controls-grid { width: 204px !important; }
#labRbProgram .lab-rb-row { width: 204px !important; }
#labRbLang { width: 204px !important; min-width: 204px !important; max-width: 204px !important; }
#labRbLook { width: 118px !important; min-width: 118px !important; max-width: 118px !important; }
#labRbProgram .lab-rb-align { display: inline-flex !important; gap: 2px !important; width: 82px !important; margin: 0 !important; }
#labRbPicLeft, #labRbPicCenter, #labRbPicRight {
  width: 26px !important;
  min-width: 26px !important;
  max-width: 26px !important;
  padding: 0 !important;
}

/* --- Group 3: Document (#labRbWriteGroup) --- */
#labRbWriteGroup { width: 252px !important; }
#labRbWriteGroup .ribbon-controls-grid { width: 252px !important; }
#labRbWriteGroup .lab-rb-row { width: 252px !important; }
#labRbWriteAs { width: 138px !important; min-width: 138px !important; max-width: 138px !important; }
#labRbNewPage { width: 110px !important; min-width: 110px !important; max-width: 110px !important; }
#labRbWriteGroup .lab-rb-title-row { gap: 4px !important; }
#labRbWriteGroup .lab-rb-title-row .ribbon-mini-label { width: 32px !important; min-width: 32px !important; text-align: right !important; margin: 0 !important; }
#labRbTitle { width: 216px !important; min-width: 216px !important; max-width: 216px !important; }

/* --- Group 4: Font (#labFmtFont) --- */
#labFmtFont { width: 198px !important; }
#labFmtFont .ribbon-controls-grid { width: 198px !important; }
#labFmtFont .lab-rb-row { width: 198px !important; }
#labFmtFont select[data-fmt="font"] { width: 126px !important; min-width: 126px !important; max-width: 126px !important; }
#labFmtFont select[data-fmt="line"] { width: 126px !important; min-width: 126px !important; max-width: 126px !important; }
#labFmtFont .lab-rb-size { display: inline-flex !important; align-items: center !important; gap: 4px !important; width: 68px !important; margin: 0 !important; }
#labFmtFont .lab-rb-size .ribbon-mini-label { width: 26px !important; min-width: 26px !important; text-align: right !important; }
#labFmtFont .lab-rb-size .ribbon-mini-num { width: 38px !important; min-width: 38px !important; max-width: 38px !important; }
#labFmtFont .lab-rb-seg { display: inline-flex !important; gap: 4px !important; width: 68px !important; margin: 0 !important; }
#labFmtFont .lab-rb-fmt-tog { width: 32px !important; min-width: 32px !important; max-width: 32px !important; height: 26px !important; padding: 0 !important; }

/* --- Group 5: Questions (#labFmtQuestions) --- */
#labFmtQuestions { width: 140px !important; }
#labFmtQuestions .ribbon-controls-grid { width: 140px !important; }
#labFmtQuestions .lab-rb-row { width: 140px !important; }
#labFmtQuestions .lab-rb-size { display: inline-flex !important; align-items: center !important; gap: 3px !important; width: 66px !important; margin: 0 !important; }
#labFmtQuestions .lab-rb-size .ribbon-mini-label { width: 25px !important; min-width: 25px !important; text-align: right !important; }
#labFmtQuestions .lab-rb-size .ribbon-mini-num { width: 38px !important; min-width: 38px !important; max-width: 38px !important; }
#labFmtQuestions .lab-rb-color { display: inline-flex !important; align-items: center !important; gap: 4px !important; width: 70px !important; margin: 0 !important; }
#labFmtQuestions .lab-rb-color .ribbon-mini-label { width: 36px !important; min-width: 36px !important; text-align: right !important; }
#labFmtQuestions .lab-rb-color input[type="color"] {
  width: 30px !important;
  min-width: 30px !important;
  max-width: 30px !important;
  height: 26px !important;
  padding: 2px !important;
  border: 1px solid #dcd8e8 !important;
  border-radius: 4px !important;
  background: #ffffff !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
}
#labFmtQuestions .lab-rb-seg { display: inline-flex !important; gap: 4px !important; width: 140px !important; margin: 0 !important; }
#labFmtQuestions .lab-rb-fmt-tog {
  width: 44px !important;
  flex: 1 1 0 !important;
  height: 26px !important;
  padding: 0 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

/* --- Group 6: Paragraph (#labFmtPara) --- */
#labFmtPara { width: 156px !important; }
#labFmtPara .ribbon-controls-grid { width: 156px !important; }
#labFmtPara .lab-rb-row { width: 156px !important; }
#labFmtPara .lab-rb-size { display: inline-flex !important; align-items: center !important; gap: 3px !important; width: 76px !important; margin: 0 !important; }
#labFmtPara .lab-rb-size .ribbon-mini-label { width: 35px !important; min-width: 35px !important; text-align: right !important; }
#labFmtPara .lab-rb-size .ribbon-mini-num { width: 38px !important; min-width: 38px !important; max-width: 38px !important; }
#labFmtPara .lab-rb-labels-color {
  width: 156px !important;
  height: 26px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0 8px !important;
  border: 1px solid #dcd8e8 !important;
  border-radius: 4px !important;
  background: #ffffff !important;
  box-sizing: border-box !important;
  cursor: pointer !important;
  transition: all 0.12s ease !important;
  margin: 0 !important;
}
#labFmtPara .lab-rb-labels-color:hover {
  background: #f8f6fe !important;
  border-color: #6d4aff !important;
}
#labFmtPara .lab-rb-labels-color .ribbon-mini-label {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: #2d264b !important;
}
#labFmtPara .lab-rb-labels-color input[type="color"] {
  width: 34px !important;
  height: 20px !important;
  padding: 1px !important;
  border: 1px solid #dcd8e8 !important;
  border-radius: 3px !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
}

/* --- Group 7: Code (#labFmtCode) --- */
#labFmtCode { width: 194px !important; }
#labFmtCode .ribbon-controls-grid { width: 194px !important; }
#labFmtCode .lab-rb-row { width: 194px !important; }
#labFmtCode select[data-fmt="codeFont"] { width: 126px !important; min-width: 126px !important; max-width: 126px !important; }
#labFmtCode .lab-rb-size { display: inline-flex !important; align-items: center !important; gap: 3px !important; width: 64px !important; margin: 0 !important; }
#labFmtCode .lab-rb-size .ribbon-mini-label { width: 23px !important; min-width: 23px !important; text-align: right !important; }
#labFmtCode .lab-rb-size .ribbon-mini-num { width: 38px !important; min-width: 38px !important; max-width: 38px !important; }
#labFmtCode select[data-fmt="codeStyle"] { width: 194px !important; min-width: 194px !important; max-width: 194px !important; }

/* --- Group 8: Page (#labFmtPage) --- */
#labFmtPage { width: 90px !important; }
#labFmtPage .ribbon-controls-grid { width: 90px !important; }
#labFmtPage .lab-rb-row { width: 90px !important; }
#labFmtPage .lab-rb-size { display: inline-flex !important; align-items: center !important; gap: 4px !important; width: 90px !important; margin: 0 !important; }
#labFmtPage .lab-rb-size .ribbon-mini-label { width: 44px !important; min-width: 44px !important; text-align: right !important; }
#labFmtPage .lab-rb-size .ribbon-mini-num { width: 42px !important; min-width: 42px !important; max-width: 42px !important; }
#labFmtReset {
  width: 90px !important;
  min-width: 90px !important;
  max-width: 90px !important;
  height: 26px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  padding: 0 6px !important;
  margin: 0 !important;
}


/* Strictly hide any lab-manual elements inside lab ribbon */
#labWorkspace .lab-manual,
#labRibbon .lab-manual,
#labPanel-home .lab-manual,
#labPanel-home .ribbon-row.lab-manual,
#labPanel-home .lab-rb-row.lab-manual,
#labPanel-home .lab-rb-btn.lab-manual,
#labPanel-home [class*="lab-manual"] {
  display: none !important;
}
/* Lab chat: the AI model choice opens above the input bar (like the assignment's model button) */
#labAiSidebar .word-ai-footer { position: relative; }
.lab-model-pop { position: absolute; left: 12px; right: 12px; bottom: calc(100% - 6px); z-index: 30; padding: 10px 12px 12px; border: 1px solid #dedae8; border-radius: 12px; background: #fff; box-shadow: 0 10px 28px rgba(27, 22, 58, .16); }
.lab-model-pop[hidden] { display: none; }
.lab-model-pop-head { margin-bottom: 8px; font-size: 11.5px; font-weight: 800; color: #3b3552; }
.lab-model-pop #aiSlotLab .row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.lab-model-pop #aiSlotLab label { font-size: 11px; margin: 0; }
/* Hide scrollbar chrome everywhere while preserving wheel, trackpad, touch and keyboard scrolling.
   This final override intentionally wins over component-specific ribbon/chat scrollbar styling. */
html,
body,
* {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
  scrollbar-gutter: auto !important;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar,
*::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
  background: transparent !important;
}