/* Paleta, componentes e estados compartilhados. Sem fontes ou imagens externas. */
:root {
  --ink:#28273b;
  --muted:#757586;
  --purple:#6860cc;
  --purple-dark:#534bb1;
  --border:#e8e8ef;
  --bg:#f8f9fc;
  --sidebar:245px;
  --radius:16px;
  font-family:Inter,"Segoe UI",Arial,sans-serif;
  color:var(--ink);
  background:var(--bg);
  font-synthesis:none
}
* {
  box-sizing:border-box
}
body {
  margin:0;
  font-size:14px;
  line-height:1.5
}
button,input,select,textarea {
  font:inherit
}
button,a,input,select,textarea {
  -webkit-tap-highlight-color:transparent
}
button,a {
  touch-action:manipulation
}
button {
  cursor:pointer
}
button:disabled {
  opacity:.4;
  cursor:not-allowed
}
a {
  color:inherit;
  text-decoration:none
}
h1,h2,h3,p {
  margin:0
}
button {
  color:inherit
}
input,select,textarea {
  color:var(--ink);
  background:#fff
}
input:focus,select:focus,textarea:focus {
  outline:2px solid #b5aff0;
  outline-offset:2px
}
:focus-visible {
  outline:3px solid var(--purple);
  outline-offset:4px
}
[hidden] {
  display:none!important
}
.icon {
  width:22px;
  height:22px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.65;
  stroke-linecap:round;
  stroke-linejoin:round;
  flex-shrink:0
}
.icon.small {
  width:17px;
  height:17px
}
.svg-library {
  position:absolute;
  width:0;
  height:0;
  overflow:hidden
}
.skip-link {
  position:fixed;
  z-index:30;
  left:20px;
  top:-60px;
  padding:12px;
  background:var(--purple);
  color:#fff;
  border-radius:8px
}
.skip-link:focus {
  top:12px
}
.sidebar {
  width:var(--sidebar);
  height:100dvh;
  position:fixed;
  top:0;
  left:0;
  display:flex;
  flex-direction:column;
  background:#fff;
  border-right:1px solid var(--border);
  padding:33px 20px 20px;
  z-index:5
}
.brand {
  display:flex;
  align-items:center;
  gap:10px;
  padding:0 9px 39px;
  font-size:23px;
  font-weight:750;
  letter-spacing:-.9px
}
.brand-light {
  font-weight:450
}
.brand small {
  display:block;
  font-size:8px;
  letter-spacing:2.4px;
  color:#93909e;
  margin-top:1px;
  font-weight:650
}
.brand-mark {
  background:#f06452;
  color:#fff;
  border-radius:11px;
  width:37px;
  height:42px;
  display:grid;
  place-items:center;
  box-shadow:0 5px 12px #f0645220
}
.brand-mark .icon {
  width:25px;
  height:27px
}
.nav-label {
  display:block;
  font-size:9px;
  letter-spacing:1.65px;
  color:#9292a1;
  font-weight:650;
  padding:0 14px;
  margin-bottom:13px
}
.tools-label {
  margin-top:29px
}
.nav-item {
  display:flex;
  align-items:center;
  gap:12px;
  border-radius:8px;
  padding:11px 13px;
  color:#767584;
  font-size:12px;
  font-weight:550;
  margin-bottom:5px;
  white-space:nowrap
}
.nav-item .icon {
  width:18px;
  height:18px
}
.nav-item:hover {
  background:#f8f7fd;
  color:var(--purple)
}
.nav-item.active {
  background:#efedfa;
  color:#655bbb
}
.nav-tag {
  font-size:7px;
  font-weight:750;
  color:#9b8845;
  background:#f6f0da;
  border-radius:4px;
  padding:3px 5px;
  margin-left:auto
}
.sidebar-bottom {
  margin-top:auto;
  padding-top:30px
}
.local-card {
  background:#f8faf9;
  border:1px solid #edf1ee;
  border-radius:10px;
  padding:16px 14px;
  font-size:10px
}
.local-card strong {
  font-size:10px;
  font-weight:650
}
.local-dot {
  display:inline-block;
  width:6px;
  height:6px;
  background:#65a38a;
  border-radius:50%;
  margin-right:6px
}
.local-card p {
  color:#8a9090;
  margin-top:8px;
  line-height:1.8
}
.local-card>span:last-child {
  display:block;
  font-size:8px;
  color:#7a9a8d;
  margin-top:11px
}
.version {
  display:flex;
  justify-content:space-between;
  margin-top:20px;
  border-top:1px solid var(--border);
  padding:17px 8px 0;
  font-size:8px;
  letter-spacing:1.4px;
  color:#a3a0ae
}
.version span {
  letter-spacing:0
}
.app-shell {
  margin-left:var(--sidebar)
}
.topbar {
  height:82px;
  border-bottom:1px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 46px;
  background:#ffffffb3;
  gap:16px
}
.breadcrumb {
  font-size:11px;
  color:#9794a3;
  display:flex;
  gap:15px;
  align-items:center
}
.breadcrumb strong {
  font-weight:550;
  color:#5b586b
}
.breadcrumb>span {
  color:#c5c2ce
}
.topbar-right {
  display:flex;
  align-items:center;
  gap:20px
}
.privacy-pill {
  display:flex;
  align-items:center;
  gap:7px;
  font-size:10px;
  color:#72857b
}
.privacy-pill .icon {
  width:13px;
  height:13px
}
.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  min-height:40px;
  padding:10px 16px;
  border:1px solid var(--border);
  border-radius:7px;
  font-weight:600;
  font-size:12px;
  background:#fff;
  transition:background .15s,box-shadow .15s
}
.button:hover:not(:disabled) {
  background:#f3f1fb;
  border-color:#d1cbed
}
.button.primary {
  background:var(--purple);
  color:#fff;
  border-color:var(--purple);
  box-shadow:0 4px 8px #6d5fd518
}
.button.primary:hover:not(:disabled) {
  background:var(--purple-dark)
}
.button .icon {
  width:17px;
  height:17px
}
.button.subtle {
  background:transparent
}
.small-button {
  padding:7px 11px;
  min-height:32px;
  font-size:10px
}
.button.danger {
  color:#b94954
}
.text-button {
  border:0;
  background:none;
  color:var(--purple);
  padding:0;
  font-weight:600;
  font-size:inherit;
  text-decoration:underline;
  text-underline-offset:3px
}
.icon-button {
  display:inline-grid;
  place-items:center;
  border:1px solid var(--border);
  border-radius:6px;
  width:32px;
  height:32px;
  background:#fff;
  font-size:17px
}
.icon-button .icon {
  width:17px
}
.icon-button:hover:not(:disabled) {
  background:#efedfa
}
.redo .icon {
  transform:scaleX(-1)
}
main {
  max-width:1560px;
  margin:auto;
  padding:41px 46px 0
}
.hero {
  display:grid;
  grid-template-columns:1.2fr 1fr;
  min-height:315px;
  padding:6px 0 35px;
  gap:20px
}
.eyebrow {
  font-size:8px;
  letter-spacing:1.8px;
  color:#8b87a4;
  font-weight:650;
  display:flex;
  align-items:center;
  gap:7px
}
.eyebrow>span {
  display:inline-block;
  width:5px;
  height:5px;
  border-radius:50%;
  background:#9b91d4
}
.hero h1 {
  font-size:58px;
  line-height:1.1;
  letter-spacing:-2.9px;
  font-weight:670;
  margin:22px 0 18px
}
.hero h1>span {
  color:var(--purple);
  font-weight:600
}
.hero-copy>p {
  max-width:390px;
  font-size:12px;
  line-height:1.9;
  color:#8b8799
}
.hero-actions {
  display:flex;
  align-items:center;
  gap:19px;
  margin-top:24px
}
.hero-actions .button {
  font-size:11px;
  padding:11px 17px
}
.hero-actions>span {
  font-size:9px;
  color:#a09bab
}
.hero-art {
  position:relative;
  min-height:310px;
  max-width:410px;
  width:100%;
  justify-self:center
}
.orbit {
  position:absolute;
  border:1px solid #ece9f5;
  border-radius:50%;
  top:35px;
  left:5%;
  width:90%;
  height:83%;
  transform:rotate(-16deg)
}
.orbit-two {
  inset:5% 15%;
  width:70%;
  height:95%;
  transform:rotate(30deg)
}
.paper {
  position:absolute;
  width:172px;
  height:222px;
  left:26%;
  top:30px;
  background:#fff;
  border:1px solid #eceaf3;
  border-radius:11px;
  box-shadow:0 16px 40px #3430470b
}
.paper-back {
  transform:rotate(-13deg) translate(-18px,-1px);
  background:#f0edf9;
  border-color:#e5e1f2
}
.paper-front {
  transform:rotate(8deg);
  padding:20px
}
.paper-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:20px
}
.pdf-label {
  font-size:8px;
  letter-spacing:1.2px;
  color:#de756a;
  background:#fff0eb;
  padding:5px 7px;
  border-radius:4px;
  font-weight:750
}
.paper-dots {
  color:#b8b3c6;
  letter-spacing:2px
}
.paper-title {
  background:#c5bfdc;
  width:65%;
  height:7px;
  border-radius:3px;
  margin-bottom:12px
}
.paper-line {
  height:4px;
  background:#edeaf4;
  border-radius:3px;
  width:80%;
  margin:7px 0
}
.paper-line.long {
  width:100%
}
.paper-line.short {
  width:50%
}
.paper-highlight {
  height:9px;
  width:85%;
  background:#ede8ff;
  margin-top:-8px;
  opacity:.8
}
.paper-chart {
  height:52px;
  display:flex;
  gap:7px;
  align-items:end;
  padding-top:9px
}
.paper-chart i {
  background:#d4cdec;
  width:13px;
  border-radius:3px 3px 0 0;
  height:40%
}
.paper-chart i:nth-child(2) {
  height:65%
}
.paper-chart i:nth-child(3) {
  height:53%
}
.paper-chart i:nth-child(4) {
  height:80%;
  background:#9b8dd4
}
.paper-chart i:nth-child(5) {
  height:65%
}
.paper-chart i:nth-child(6) {
  height:100%;
  background:#b6a8e2
}
.paper-foot {
  height:3px;
  background:#f0edf6;
  margin-top:16px
}
.art-tile {
  position:absolute;
  z-index:2;
  border:1px solid #ece8f6;
  background:#fff;
  box-shadow:0 7px 25px #4c3f6520;
  border-radius:12px
}
.tile-text {
  left:13%;
  top:120px;
  transform:rotate(-10deg);
  font-family:Georgia,serif;
  color:#8171bb;
  font-size:30px;
  width:56px;
  height:58px;
  text-align:center;
  line-height:1.1;
  padding-top:5px
}
.tile-text span {
  display:block;
  font-family:"Segoe UI",sans-serif;
  font-size:7px;
  letter-spacing:.6px;
  margin-top:2px
}
.tile-check {
  right:15%;
  top:62px;
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  transform:rotate(11deg);
  background:#edf7f1;
  color:#76a78e;
  border-color:#dfede4
}
.art-caption {
  position:absolute;
  bottom:8px;
  left:25%;
  font-size:8px;
  color:#9b94ab;
  background:#fff;
  border:1px solid #ece9f3;
  padding:7px 11px;
  border-radius:20px;
  display:flex;
  align-items:center;
  gap:6px
}
.art-caption .icon {
  width:11px;
  height:11px
}
.section-heading {
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:15px;
  margin:26px 0 22px
}
.section-heading h2 {
  font-size:18px;
  font-weight:630;
  letter-spacing:-.4px
}
.section-heading p {
  font-size:10px;
  color:#9994a6;
  margin-top:6px
}
.quiet-badge {
  font-size:8px;
  color:#a39bad;
  white-space:nowrap
}
.tool-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px
}
.tool-card {
  border:1px solid var(--border);
  border-radius:12px;
  background:#fff;
  padding:22px 23px 17px;
  position:relative;
  transition:transform .15s,box-shadow .15s,border-color .15s
}
.tool-card:hover {
  transform:translateY(-3px);
  box-shadow:0 8px 24px #5441840c;
  border-color:#c9c0e4
}
.tool-icon {
  display:grid;
  place-items:center;
  width:40px;
  height:40px;
  border-radius:10px;
  margin-bottom:15px
}
.tool-icon .icon {
  width:22px;
  height:22px
}
.lavender {
  background:#f0edfc;
  color:#9985ce
}
.peach {
  background:#fff0e8;
  color:#e09b7f
}
.mint {
  background:#eaf5f0;
  color:#80ad9b
}
.rose {
  background:#fcecef;
  color:#d691a3
}
.sky {
  background:#edf2fc;
  color:#8b9fc8
}
.sand {
  background:#faf3e6;
  color:#c4a366
}
.tool-card h3 {
  font-size:14px;
  font-weight:630;
  letter-spacing:-.15px
}
.tool-card p {
  color:#9792a4;
  font-size:10px;
  line-height:1.8;
  margin-top:8px
}
.card-link {
  border-top:1px solid #f1eff5;
  margin-top:19px;
  padding-top:12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:9px;
  color:#8d849f
}
.card-link .icon {
  width:13px;
  height:13px
}
.card-tag {
  position:absolute;
  right:16px;
  top:29px;
  letter-spacing:.7px;
  font-size:6px;
  color:#b29a67
}
.home-drop {
  display:flex;
  align-items:center;
  gap:17px;
  margin-top:27px;
  border:1px dashed #d9d4e7;
  border-radius:11px;
  padding:22px 26px;
  background:#f6f5fa
}
.drop-icon {
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  border-radius:9px;
  background:#eeebf5;
  color:#a295bf
}
.home-drop strong {
  font-size:11px;
  font-weight:550;
  color:#6c647d
}
.home-drop p {
  font-size:10px;
  color:#a29aad;
  margin-top:3px
}
.home-drop .text-button {
  font-weight:450;
  text-decoration:none;
  color:#8c7ca9
}
.drop-format {
  margin-left:auto;
  color:#ada5ba;
  font-size:8px;
  border:1px solid #e2dce9;
  border-radius:5px;
  padding:5px 8px;
  letter-spacing:1px
}
.dropzone.drag-over {
  background:#eeebff;
  outline:2px dashed var(--purple);
  outline-offset:3px
}
.trust-row {
  display:flex;
  gap:27px;
  justify-content:center;
  flex-wrap:wrap;
  padding:21px 0;
  color:#aaa4b4;
  font-size:8px
}
.trust-row span {
  display:flex;
  align-items:center;
  gap:6px
}
.trust-row .icon {
  width:11px;
  height:11px
}
.main-footer {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  border-top:1px solid var(--border);
  font-size:8px;
  color:#ada7b7;
  margin-top:10px;
  padding:20px 0 25px
}
.footer-dot {
  padding:0 5px;
  color:#c4bece
}
/* Área das ferramentas e miniaturas. */
.workspace-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  margin:5px 0 24px
}
.workspace-heading h1 {
  font-size:30px;
  letter-spacing:-1px;
  margin:8px 0
}
.workspace-heading p {
  color:var(--muted);
  font-size:12px;
  max-width:590px
}
.notice {
  background:#fffaeb;
  border:1px solid #eadfba;
  color:#796538;
  border-radius:9px;
  padding:13px 16px;
  font-size:11px;
  line-height:1.8;
  margin-bottom:20px
}
.empty-state {
  text-align:center;
  border:1px dashed #d7d2e5;
  border-radius:14px;
  min-height:380px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:16px;
  background:#fff
}
.empty-icon {
  display:grid;
  place-items:center;
  width:70px;
  height:78px;
  background:#f1eefb;
  border-radius:17px;
  color:#9c8bca;
  margin-bottom:8px
}
.empty-icon .icon {
  width:40px;
  height:40px
}
.empty-state h2 {
  font-size:21px;
  font-weight:600
}
.empty-state p {
  font-size:12px;
  color:var(--muted);
  padding:0 20px
}
.empty-state>span:last-child {
  font-size:10px;
  color:#9992a5
}
.document-bar,.panel-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:20px;
  background:#fff;
  border:1px solid var(--border);
  border-radius:12px 12px 0 0;
  gap:15px
}
.file-info {
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0
}
.file-info>.icon {
  color:#b69bb8
}
.file-info>div {
  min-width:0
}
.file-info strong {
  display:block;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  font-size:12px;
  max-width:400px
}
.file-info span {
  display:block;
  color:#9790a3;
  font-size:10px;
  margin-top:2px
}
.history-actions {
  display:flex;
  gap:8px;
  align-items:center
}
.history-actions .primary {
  margin-left:8px
}
.page-actions {
  display:flex;
  gap:12px;
  align-items:center;
  flex-wrap:wrap;
  padding:15px 20px;
  border:1px solid var(--border);
  border-top:0;
  background:#fff;
  font-size:11px
}
.check-label {
  display:flex!important;
  align-items:center;
  gap:7px!important;
  flex-direction:row!important;
  font-size:11px;
  white-space:nowrap
}
input[type=checkbox] {
  accent-color:var(--purple);
  width:15px;
  height:15px;
  min-height:0;
  cursor:pointer
}
.action-group {
  display:flex;
  gap:7px
}
.page-actions .button {
  font-size:10px;
  min-height:32px;
  padding:7px 11px
}
.page-actions #selection-count {
  color:#9b93a8;
  margin-right:auto
}
.thumbnail-grid {
  padding:26px;
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
  gap:22px;
  background:#f0f0f6;
  min-height:280px;
  border:1px solid var(--border);
  border-top:0;
  border-radius:0 0 12px 12px
}
.thumbnail-card {
  border:2px solid transparent;
  background:#fff;
  border-radius:8px;
  overflow:hidden;
  box-shadow:0 3px 8px #32234807;
  position:relative;
  cursor:grab;
  padding:12px;
  align-self:start
}
.thumbnail-card.selected {
  border-color:var(--purple);
  background:#faf9ff
}
.thumbnail-card.drop-before {
  outline:3px solid var(--purple);
  outline-offset:5px
}
.thumbnail-card input {
  position:absolute;
  top:7px;
  left:7px;
  z-index:1
}
.thumbnail-image {
  height:178px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background:#fff
}
.thumbnail-image canvas {
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  box-shadow:0 0 0 1px #f0edf2
}
.thumbnail-caption {
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:10px;
  margin-top:11px;
  color:#8b8399
}
.thumbnail-caption small {
  font-size:8px
}
.panel-heading h2 {
  font-size:15px
}
.panel-heading p {
  font-size:10px;
  color:var(--muted);
  margin-top:4px
}
.merge-drop {
  border:1px solid var(--border);
  border-top:0;
  background:#fff;
  padding:22px;
  border-radius:0 0 12px 12px
}
.merge-drop>p {
  border:1px dashed #ddd5ed;
  text-align:center;
  border-radius:8px;
  padding:18px;
  color:#9a8dab;
  font-size:11px;
  background:#faf9fd
}
.merge-list {
  list-style:none;
  padding:0;
  margin:18px 0 0
}
.merge-item {
  display:flex;
  gap:12px;
  align-items:center;
  border:1px solid var(--border);
  border-radius:8px;
  padding:13px;
  margin-top:10px;
  cursor:grab;
  background:#fff
}
.merge-item.dragging {
  opacity:.45
}
.merge-item .merge-filename {
  display:block;
  font-weight:550;
  font-size:12px;
  overflow-wrap:anywhere
}
.merge-item>div {
  flex:1;
  min-width:0
}
.merge-item small {
  font-size:10px;
  color:var(--muted)
}
.merge-item>.icon {
  color:#b595b6
}
.merge-order {
  color:#aca4b7
}
.action-footer {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:20px 0;
  font-size:11px;
  color:var(--muted)
}
.settings-panel {
  display:flex;
  align-items:end;
  gap:16px;
  flex-wrap:wrap;
  background:#fff;
  padding:20px;
  border:1px solid var(--border);
  border-top:0
}
.settings-panel label,.editor-settings label {
  display:flex;
  flex-direction:column;
  gap:6px;
  font-size:10px;
  color:#857b92
}
.settings-panel input,.settings-panel select,.editor-settings input,.editor-settings select {
  border:1px solid #dfdae9;
  border-radius:5px;
  min-height:33px;
  padding:7px 9px;
  font-size:12px
}
.settings-panel p {
  font-size:10px;
  color:var(--muted);
  flex-basis:100%
}
#split-ranges {
  width:240px
}
#split-every {
  width:90px
}
/* O PDF.js posiciona caracteres transparentes sobre o canvas para seleção. */
.editor-toolbar {
  display:flex;
  gap:7px;
  align-items:center;
  flex-wrap:wrap;
  background:#fff;
  padding:14px 18px;
  border:1px solid var(--border);
  border-top:0
}
.editor-toolbar .button {
  min-height:32px;
  padding:6px 11px;
  font-size:10px
}
.editor-toolbar .active {
  background:#eeebfc;
  color:var(--purple);
  border-color:#c5bcec
}
.toolbar-separator {
  height:22px;
  border-left:1px solid var(--border);
  margin:0 5px
}
.editor-settings {
  display:flex;
  gap:13px;
  align-items:end;
  flex-wrap:wrap;
  background:#fff;
  border:1px solid var(--border);
  border-top:0;
  padding:10px 18px 16px
}
.editor-settings input[type=number] {
  width:65px
}
.editor-settings input[type=color] {
  width:42px;
  padding:3px
}
.editor-settings .check-label {
  min-height:33px;
  padding-bottom:7px
}
.editor-hint {
  font-size:10px;
  color:#8c809e;
  padding:10px 18px;
  background:#f6f3fd;
  border:1px solid var(--border);
  border-top:0
}
.viewer-controls {
  display:flex;
  justify-content:space-between;
  padding:12px 17px;
  border:1px solid var(--border);
  border-top:0;
  background:#fff;
  gap:10px
}
.viewer-controls>div {
  display:flex;
  gap:9px;
  align-items:center;
  font-size:11px
}
.viewer-controls label {
  display:flex;
  align-items:center;
  gap:5px
}
.viewer-controls select {
  border:1px solid var(--border);
  border-radius:5px;
  padding:6px
}
.viewer-controls output {
  min-width:38px;
  text-align:center;
  font-size:10px
}
.viewer-scroll {
  position:relative;
  background:#eaeaf1;
  overflow:auto;
  max-height:76vh;
  min-height:360px;
  padding:32px;
  overscroll-behavior:contain
}
.page-stage {
  position:relative;
  isolation:isolate;
  margin:0 auto;
  background:#fff;
  box-shadow:0 3px 15px #26203422;
  flex-shrink:0
}
.page-stage>canvas {
  display:block
}
.markup-canvas,.drawing-layer,.textLayer {
  position:absolute;
  inset:0
}
.markup-canvas {
  pointer-events:none;
  z-index:2
}
.drawing-layer {
  z-index:3;
  touch-action:none;
  cursor:crosshair
}
.textLayer {
  z-index:1;
  text-align:initial;
  overflow:clip;
  opacity:1;
  line-height:1;
  text-size-adjust:none;
  forced-color-adjust:none;
  transform-origin:0 0;
  caret-color:CanvasText
}
.textLayer :is(span,br) {
  color:transparent;
  position:absolute;
  white-space:pre;
  cursor:text;
  transform-origin:0% 0%
}
.textLayer> :not(.markedContent),.textLayer .markedContent span:not(.markedContent) {
  z-index:1
}
.textLayer span.markedContent {
  top:0;
  height:0
}
.textLayer ::selection {
  background:#7766db55
}
.textLayer br::selection {
  background:transparent
}
.textLayer[data-main-rotation="90"] {
  transform:rotate(90deg) translateY(-100%)
}
.textLayer[data-main-rotation="180"] {
  transform:rotate(180deg) translate(-100%,-100%)
}
.textLayer[data-main-rotation="270"] {
  transform:rotate(270deg) translateX(-100%)
}
.draw-preview {
  position:absolute;
  border:1px solid #6556b8;
  background:#15121ddd;
  pointer-events:none
}
.draw-preview.line {
  height:2px!important;
  background:var(--purple);
  transform-origin:0 50%
}
.text-draft {
  position:absolute;
  z-index:4;
  width:220px;
  height:150px;
  min-width:120px;
  min-height:120px;
  max-width:100%;
  max-height:100%;
  resize:both;
  overflow:auto;
  border:2px solid var(--purple);
  border-radius:4px;
  background:#fff;
  box-shadow:0 4px 18px #36294522;
  display:flex;
  flex-direction:column
}
.draft-handle {
  background:#eeeafa;
  font-size:9px;
  padding:5px 6px;
  display:flex;
  justify-content:space-between;
  cursor:move;
  touch-action:none;
  user-select:none
}
.draft-handle button {
  border:0;
  background:none;
  padding:0 4px;
  line-height:1
}
.text-draft textarea {
  display:block;
  min-height:35px;
  flex:1;
  width:100%;
  resize:none;
  border:0;
  background:transparent;
  padding:5px;
  outline-offset:-3px
}
.text-draft>.button {
  align-self:end;
  margin:4px;
  flex-shrink:0
}
.editor-foot {
  display:flex;
  justify-content:space-between;
  gap:15px;
  font-size:10px;
  color:var(--muted);
  padding:15px;
  border:1px solid var(--border);
  border-top:0;
  background:#fff;
  border-radius:0 0 10px 10px
}
.toast {
  position:fixed;
  bottom:24px;
  left:calc(var(--sidebar) + 25px);
  right:25px;
  max-width:650px;
  z-index:30;
  padding:14px 20px;
  border:1px solid #cfc5ef;
  background:#f9f7ff;
  color:#4f4271;
  border-radius:9px;
  box-shadow:0 6px 30px #23173922;
  white-space:pre-line;
  font-size:12px
}
.toast.error {
  background:#fff4f2;
  border-color:#efc5bd;
  color:#a13e34
}
.busy-overlay {
  position:fixed;
  inset:0;
  background:#f7f6f9c9;
  z-index:25;
  display:grid;
  place-items:center;
  backdrop-filter:blur(3px)
}
.busy-card {
  background:#fff;
  padding:36px 42px;
  border:1px solid var(--border);
  border-radius:16px;
  box-shadow:0 10px 40px #28203912;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px
}
.busy-card span {
  font-size:11px;
  color:var(--muted)
}
.spinner {
  width:30px;
  height:30px;
  border:3px solid #ece8f7;
  border-top-color:var(--purple);
  border-radius:50%;
  animation:spin .8s linear infinite
}
@keyframes spin {
  to {
    transform:rotate(360deg)
  }
}
dialog {
  border:1px solid var(--border);
  border-radius:16px;
  box-shadow:0 25px 80px #27213933;
  width:420px;
  max-width:calc(100% - 30px);
  padding:30px;
  color:var(--ink)
}
dialog::backdrop {
  background:#24203166;
  backdrop-filter:blur(4px)
}
.modal-icon {
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  background:#f1edfc;
  border-radius:11px;
  color:var(--purple);
  margin-bottom:16px
}
dialog h2 {
  font-size:21px;
  letter-spacing:-.5px
}
dialog p {
  color:var(--muted);
  font-size:12px;
  margin-top:8px
}
dialog label {
  display:block;
  font-size:11px;
  margin:24px 0 6px
}
.filename-input {
  display:flex;
  border:1px solid #dcd5e8;
  border-radius:7px;
  overflow:hidden;
  align-items:center
}
.filename-input input {
  width:100%;
  min-width:0;
  padding:11px;
  border:0;
  outline-offset:-3px
}
.filename-input span {
  font-size:11px;
  color:#9d90ad;
  padding:10px;
  background:#f7f5fb
}
.field-error {
  min-height:18px;
  color:#b54849!important;
  font-size:10px!important
}
.modal-actions {
  display:flex;
  justify-content:end;
  gap:10px;
  margin-top:22px
}
@media(min-width:1450px) {
  :root {
    --sidebar:262px
  }
  main {
    padding:50px 65px 0
  }
  .topbar {
    padding:0 65px
  }
  .hero h1 {
    font-size:67px
  }
  .hero {
    min-height:355px
  }
  .hero-art {
    transform:scale(1.08);
    transform-origin:50% 30%
  }
  .tool-card {
    padding:27px
  }
  .tool-card p {
    font-size:12px
  }
  .card-link {
    font-size:10px
  }
  .tool-card h3 {
    font-size:16px
  }
  .hero-copy>p {
    font-size:14px
  }
  .section-heading p {
    font-size:12px
  }
  .tool-card {
    min-height:221px
  }
}
@media(max-width:1120px) {
  :root {
    --sidebar:205px
  }
  .sidebar {
    padding-left:12px;
    padding-right:12px
  }
  .brand {
    font-size:20px;
    gap:8px
  }
  .brand-mark {
    width:32px;
    height:36px
  }
  .topbar {
    padding:0 25px
  }
  main {
    padding:30px 25px 0
  }
  .hero h1 {
    font-size:51px
  }
  .hero-art {
    transform:scale(.9)
  }
  .tool-card {
    padding:18px
  }
  .card-tag {
    font-size:5px;
    right:10px
  }
  .file-info strong {
    max-width:230px
  }
  .tool-card p br {
    display:none
  }
  .privacy-pill {
    display:none
  }
  .page-actions .action-group {
    flex-wrap:wrap
  }
  .thumbnail-grid {
    grid-template-columns:repeat(auto-fill,minmax(125px,1fr))
  }
}
@media(max-width:800px) {
  :root {
    --sidebar:0px
  }
  .sidebar {
    position:static;
    width:100%;
    height:auto;
    padding:16px 20px 0;
    border-right:0;
    border-bottom:1px solid var(--border)
  }
  .brand {
    padding:0 0 14px;
    font-size:22px
  }
  .brand small {
    font-size:7px
  }
  .brand-mark {
    width:31px;
    height:35px
  }
  .sidebar>.nav-label,.sidebar-bottom,.tools-label {
    display:none
  }
  .sidebar nav {
    display:flex;
    overflow-x:auto;
    gap:5px;
    margin:0 -20px;
    padding:0 15px 10px;
    scrollbar-width:thin
  }
  .nav-item {
    font-size:10px;
    padding:8px 10px;
    gap:6px;
    margin:0
  }
  .nav-item .icon {
    width:15px;
    height:15px
  }
  .nav-tag {
    display:none
  }
  .topbar {
    height:55px;
    padding:0 22px
  }
  .breadcrumb {
    font-size:10px;
    gap:10px
  }
  .topbar-right {
    gap:10px
  }
  .topbar .button {
    font-size:9px
  }
  .app-shell {
    margin-left:0
  }
  main {
    padding:25px 22px 0
  }
  .hero {
    grid-template-columns:1.2fr .8fr;
    gap:0;
    min-height:290px;
    padding-bottom:15px
  }
  .hero h1 {
    font-size:48px
  }
  .hero-copy>p {
    font-size:11px
  }
  .eyebrow {
    font-size:7px;
    letter-spacing:1.2px
  }
  .hero-art {
    transform:scale(.75);
    transform-origin:30% 30%;
    min-width:260px;
    justify-self:start
  }
  .hero-actions>span {
    display:none
  }
  .tool-grid {
    gap:12px
  }
  .tool-card {
    padding:16px
  }
  .tool-card h3 {
    font-size:12px
  }
  .tool-card p {
    font-size:9px
  }
  .card-tag {
    display:none
  }
  .card-link {
    font-size:8px
  }
  .section-heading h2 {
    font-size:17px
  }
  .quiet-badge {
    display:none
  }
  .home-drop {
    padding:17px;
    gap:10px
  }
  .main-footer {
    font-size:7px
  }
  .workspace-heading h1 {
    font-size:26px
  }
  .workspace-heading p {
    font-size:11px
  }
  .document-bar {
    padding:14px
  }
  .file-info strong {
    max-width:220px
  }
  .history-actions {
    gap:5px
  }
  .history-actions .primary {
    padding:8px 10px;
    font-size:10px;
    min-height:32px
  }
  .file-info>.icon {
    display:none
  }
  .page-actions {
    padding:12px
  }
  .viewer-scroll {
    padding:16px
  }
  .toast {
    left:20px;
    right:20px
  }
  .editor-settings {
    gap:9px
  }
  .editor-settings label {
    font-size:9px
  }
}
@media(max-width:520px) {
  main {
    padding:25px 17px 0
  }
  .topbar {
    padding:0 17px
  }
  .hero {
    grid-template-columns:1fr;
    min-height:270px;
    position:relative
  }
  .hero-art {
    position:absolute;
    right:-13px;
    top:24px;
    transform:scale(.48);
    transform-origin:100% 0;
    min-width:280px;
    width:280px;
    pointer-events:none
  }
  .hero-copy {
    position:relative;
    z-index:1
  }
  .hero-copy>p {
    max-width:215px;
    font-size:10px
  }
  .hero h1 {
    font-size:44px;
    margin-top:21px;
    margin-bottom:16px;
    max-width:250px
  }
  .hero .eyebrow {
    font-size:6px;
    letter-spacing:1px
  }
  .hero-actions {
    margin-top:19px
  }
  .hero-actions .button {
    padding:10px 13px
  }
  .tool-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px
  }
  .tool-card {
    padding:16px 14px
  }
  .tool-icon {
    width:33px;
    height:33px;
    border-radius:9px;
    margin-bottom:11px
  }
  .tool-icon .icon {
    width:19px
  }
  .tool-card p {
    font-size:9px;
    min-height:34px
  }
  .tool-card h3 {
    font-size:12px
  }
  .card-link {
    margin-top:13px;
    padding-top:11px;
    font-size:8px
  }
  .home-drop .drop-icon {
    width:30px;
    height:32px;
    flex-shrink:0
  }
  .home-drop strong {
    font-size:10px
  }
  .home-drop p {
    font-size:9px
  }
  .drop-format {
    display:none
  }
  .trust-row {
    gap:8px;
    align-items:center;
    flex-direction:column;
    font-size:7px
  }
  .main-footer {
    flex-direction:column;
    align-items:start;
    gap:5px
  }
  .workspace-heading {
    align-items:start
  }
  .workspace-heading>.button {
    font-size:10px;
    padding:8px 10px;
    margin-top:22px
  }
  .workspace-heading .eyebrow {
    font-size:6px
  }
  .workspace-heading h1 {
    font-size:23px
  }
  .workspace-heading p {
    font-size:10px
  }
  .document-bar {
    flex-wrap:wrap;
    gap:12px
  }
  .file-info {
    flex-basis:100%
  }
  .file-info strong {
    max-width:275px
  }
  .history-actions {
    margin-left:auto
  }
  .thumbnail-grid {
    padding:16px;
    gap:13px;
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .thumbnail-image {
    height:165px
  }
  .thumbnail-caption {
    font-size:9px
  }
  .notice {
    font-size:10px
  }
  .settings-panel {
    padding:15px;
    gap:12px
  }
  .settings-panel label {
    width:100%
  }
  .settings-panel select,#split-ranges {
    width:100%
  }
  .viewer-controls {
    padding:10px 8px;
    gap:5px
  }
  .viewer-controls>div {
    gap:5px;
    font-size:9px
  }
  .viewer-controls .icon-button {
    width:27px;
    height:29px;
    font-size:14px
  }
  .viewer-controls .button {
    font-size:9px;
    padding:5px
  }
  .viewer-scroll {
    padding:12px;
    min-height:260px
  }
  .empty-state {
    min-height:350px
  }
  .empty-state h2 {
    font-size:18px
  }
  .empty-state p {
    font-size:11px
  }
  .merge-item {
    gap:7px;
    padding:10px
  }
  .merge-item>.icon {
    display:none
  }
  .merge-item .icon-button {
    width:27px
  }
  .merge-item .merge-filename {
    font-size:10px
  }
  .action-footer {
    font-size:10px;
    gap:12px
  }
  .action-footer .button {
    font-size:10px
  }
  .editor-foot {
    font-size:9px
  }
  .editor-toolbar {
    padding:12px
  }
  .editor-settings {
    padding:12px
  }
}
@media(prefers-reduced-motion:reduce) {
  * {
    animation-duration:.01ms!important;
    transition:none!important;
    scroll-behavior:auto!important
  }
}