/* Direção visual: estúdio de edição, painéis claros/escuros e acentos em gradiente. */
:root {
  --accent-gradient:linear-gradient(115deg,#7261df 0%,#b657cf 46%,#f78069 100%);
  --surface:#fff;
  --canvas-bg:#e9edf4
}
.brand-mark {
  background:var(--accent-gradient);
  box-shadow:0 5px 17px #915aca25
}
.button.primary {
  background:var(--accent-gradient);
  border-color:transparent;
  box-shadow:0 3px 10px #9866bf27
}
.button.primary:hover:not(:disabled) {
  background:linear-gradient(115deg,#6150cb,#a647bd 48%,#e8735f)
}
.theme-toggle {
  display:inline-flex;
  align-items:center;
  gap:7px;
  border:1px solid var(--border);
  background:var(--surface);
  border-radius:7px;
  padding:6px 10px;
  font-size:10px;
  min-height:32px
}
.theme-toggle>span:first-child {
  font-size:17px;
  line-height:1
}
.brand {
  letter-spacing:-.7px
}
.topbar {
  position:relative
}
.topbar:after {
  content:"";
  position:absolute;
  bottom:-1px;
  left:0;
  right:0;
  height:1px;
  background:linear-gradient(90deg,#64cedd55,#ab65db44,#ff897644)
}
.hero-art .paper-highlight {
  background:linear-gradient(90deg,#dfd2ff,#f3c7e4)
}
.hero h1>span {
  background:var(--accent-gradient);
  background-clip:text;
  -webkit-background-clip:text;
  color:transparent
}
.hero-copy>p,.tool-card p,.section-heading p {
  color:#81798e
}
.card-link {
  color:#7c708c
}
.hero .paper-front:after {
  content:"";
  position:absolute;
  right:0;
  top:0;
  width:62px;
  height:43px;
  border-radius:0 10px 0 70px;
  background:var(--accent-gradient);
  opacity:.7;
  pointer-events:none
}
.nav-item.active {
  background:linear-gradient(100deg,#e9e4fb,#f8f2fc);
  box-shadow:inset 3px 0 #8d73d4
}
.nav-item .icon {
  color:#9a81c8
}
.nav-item[data-tool=juntar] .icon {
  color:#8c71d4
}
.nav-item[data-tool=dividir] .icon {
  color:#d9908f
}
.nav-item[data-tool=girar] .icon {
  color:#62a69e
}
.nav-item[data-tool=excluir] .icon {
  color:#c77ba5
}
.nav-item[data-tool=organizar] .icon {
  color:#6588b9
}
.nav-item[data-tool=editar] .icon {
  color:#b88ac7
}
.editor-workspace .sidebar {
  width:205px;
  padding-top:24px
}
.editor-workspace .app-shell {
  margin-left:205px
}
.editor-workspace main {
  max-width:none;
  padding:22px 25px 0
}
.editor-workspace .topbar {
  height:64px;
  padding:0 25px
}
.editor-workspace .brand {
  font-size:21px;
  padding-bottom:27px
}
.editor-workspace .workspace-heading {
  margin:0 0 14px
}
.editor-workspace .workspace-heading h1 {
  font-size:24px;
  margin:5px 0
}
.editor-workspace .workspace-heading .eyebrow {
  font-size:7px
}
.editor-workspace .workspace-heading p {
  font-size:11px
}
.editor-workspace #tool-notice {
  font-size:9px;
  line-height:1.7;
  padding:9px 13px;
  margin-bottom:15px
}
.editor-workspace .document-bar {
  padding:12px 17px
}
.editor-workspace .document-bar .button {
  min-height:33px;
  padding:7px 13px;
  font-size:10px
}
.editor-workspace #editor-panel {
  display:grid;
  grid-template-columns:minmax(0,1fr) 210px;
  grid-template-rows:auto auto auto minmax(400px,1fr) auto;
  align-items:stretch
}
.editor-toolbar {
  grid-column:1/-1;
  grid-row:1;
  background:#fcfcff;
  padding:10px 15px
}
.editor-toolbar .button {
  border-color:transparent;
  background:transparent
}
.editor-toolbar .button.active {
  background:linear-gradient(120deg,#e9e1fd,#f5e7f5);
  border-color:#dcd2ee;
  color:#7250b6;
  box-shadow:0 2px 5px #7a549b12
}
.editor-settings {
  grid-column:2;
  grid-row:2/6;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  justify-content:start;
  gap:13px;
  border-left:0;
  padding:18px 17px;
  border-radius:0 0 10px 0;
  background:#fdfdff
}
.editor-settings label {
  font-size:10px;
  gap:6px;
  color:#776b87
}
.editor-settings input[type=number],.editor-settings select {
  width:100%;
  min-height:31px;
  font-size:11px
}
.editor-settings input[type=color] {
  width:100%;
  height:28px;
  min-height:28px;
  border-radius:5px;
  padding:3px
}
.editor-settings .check-label {
  font-size:10px;
  min-height:0;
  padding:0
}
.font-styles {
  display:flex;
  gap:16px
}
.font-styles input {
  width:13px;
  height:13px;
  min-height:0;
  padding:0
}
.properties-heading {
  padding-bottom:12px;
  border-bottom:1px solid var(--border)
}
.properties-heading strong {
  display:block;
  font-size:12px;
  font-weight:600
}
.properties-heading span {
  display:block;
  font-size:8px;
  text-transform:uppercase;
  letter-spacing:1.3px;
  color:#a297b0;
  margin-top:8px
}
.color-swatches {
  display:flex;
  gap:7px;
  margin-top:-4px
}
.color-swatches button {
  width:22px;
  height:22px;
  border:1px solid #bbb0ca55;
  border-radius:5px;
  background:var(--swatch);
  box-shadow:inset 0 0 0 2px #ffffff20
}
.properties-pages {
  border-top:1px solid var(--border);
  padding-top:14px;
  margin-top:5px
}
.properties-pages>strong {
  font-size:10px;
  font-weight:550
}
.editor-page-list {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin-top:12px;
  max-height:295px;
  overflow:auto;
  padding:3px
}
.editor-page-thumb {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  padding:5px;
  background:transparent;
  border:1px solid transparent;
  border-radius:5px;
  min-width:0;
  color:#8e809e;
  font-size:8px;
  align-self:start
}
.editor-page-thumb.active {
  border-color:#9b88d6;
  background:#f4f0fc;
  box-shadow:0 0 0 2px #cec0ef30
}
.editor-page-thumb canvas {
  max-width:100%;
  height:auto!important;
  box-shadow:0 1px 6px #3e294515
}
.editor-hint {
  grid-column:1;
  grid-row:2;
  background:#f8f6fc;
  padding:9px 15px;
  line-height:1.7;
  min-height:45px
}
.viewer-controls {
  grid-column:1;
  grid-row:3;
  min-height:54px
}
.viewer-scroll {
  grid-column:1;
  grid-row:4;
  max-height:78vh;
  min-height:540px;
  background:var(--canvas-bg);
  padding:27px
}
.editor-foot {
  grid-column:1;
  grid-row:5;
  border-radius:0 0 0 10px
}
.text-draft {
  border:1px solid #76b9dd;
  outline:1px solid #90c3ea88;
  box-shadow:0 0 0 3px #91c5ed22,0 8px 25px #504c6a22
}
.draft-handle {
  background:linear-gradient(95deg,#e2f1fb,#ece1f9);
  color:#5b5e7e
}
.draw-preview {
  border-color:#7a91dc;
  box-shadow:0 0 0 2px #aac6f755
}
/* O tema afeta a interface. As cores reais das páginas PDF permanecem fiéis ao documento. */
:root[data-theme=dark] {
  color-scheme:dark;
  --ink:#e5e6ef;
  --muted:#a0a4ba;
  --purple:#a793ee;
  --purple-dark:#b7a4fa;
  --border:#343c50;
  --bg:#171d2b;
  --surface:#222a3b;
  --canvas-bg:#121a29;
  background:var(--bg);
  color:var(--ink)
}
[data-theme=dark] body {
  background:radial-gradient(ellipse at 100% 0,#6f3d8415,transparent 55%),var(--bg)
}
[data-theme=dark] .sidebar {
  background:#1f2738;
  border-right-color:#354056
}
[data-theme=dark] .topbar {
  background:#1b2232
}
[data-theme=dark] .brand small {
  color:#98a2b9
}
[data-theme=dark] .nav-label {
  color:#8a94ac
}
[data-theme=dark] .nav-item {
  color:#b1b8ca
}
[data-theme=dark] .nav-item.active {
  background:linear-gradient(100deg,#3b345c,#2c3047);
  color:#d3c8ff;
  box-shadow:inset 3px 0 #9b7bdf
}
[data-theme=dark] .nav-item:hover {
  background:#30364d
}
[data-theme=dark] .local-card {
  background:#25313d;
  border-color:#35424e
}
[data-theme=dark] .local-card p {
  color:#9baaaf
}
[data-theme=dark] .local-card>span:last-child {
  color:#87b5a6
}
[data-theme=dark] .breadcrumb strong {
  color:#b8bdd1
}
[data-theme=dark] .breadcrumb {
  color:#8a94aa
}
[data-theme=dark] .privacy-pill {
  color:#8fc3b9
}
[data-theme=dark] .button,[data-theme=dark] .icon-button {
  background:#293245;
  color:#d6daeb;
  border-color:#3c465e
}
[data-theme=dark] .button:hover:not(:disabled),[data-theme=dark] .icon-button:hover:not(:disabled) {
  background:#3a3b56;
  border-color:#6f638f
}
[data-theme=dark] .button.primary {
  background:var(--accent-gradient);
  color:#fff;
  border-color:transparent
}
[data-theme=dark] .theme-toggle {
  background:#293145;
  color:#c6cce0
}
[data-theme=dark] .hero-copy>p,[data-theme=dark] .tool-card p,[data-theme=dark] .section-heading p {
  color:#a5a9bd
}
[data-theme=dark] .tool-card {
  background:#242d3f;
  border-color:#36425a
}
[data-theme=dark] .tool-card:hover {
  border-color:#8b68bb;
  box-shadow:0 0 24px #9458bd12
}
[data-theme=dark] .card-link {
  color:#b9add0;
  border-color:#394357
}
[data-theme=dark] .tool-icon {
  background:#35334f
}
[data-theme=dark] .peach {
  background:#49343d
}
[data-theme=dark] .mint {
  background:#28413f
}
[data-theme=dark] .rose {
  background:#473349
}
[data-theme=dark] .sky {
  background:#2d3b55
}
[data-theme=dark] .sand {
  background:#443e36
}
[data-theme=dark] .home-drop {
  background:#22293d;
  border-color:#514365
}
[data-theme=dark] .home-drop strong {
  color:#c6bed7
}
[data-theme=dark] .drop-icon {
  background:#38304e;
  color:#b49cda
}
[data-theme=dark] .orbit {
  border-color:#4a3d6244
}
[data-theme=dark] .paper-front {
  background:#2b3546;
  border-color:#4c526c
}
[data-theme=dark] .paper-back {
  background:#3e365d;
  border-color:#5c4880
}
[data-theme=dark] .paper-line,[data-theme=dark] .paper-foot {
  background:#485066
}
[data-theme=dark] .paper-title {
  background:#9e9cc2
}
[data-theme=dark] .paper-highlight {
  opacity:.7
}
[data-theme=dark] .art-tile {
  background:#32384e;
  border-color:#6d5f88
}
[data-theme=dark] .tile-text {
  color:#bda3f2
}
[data-theme=dark] .tile-check {
  background:#294742;
  color:#92d1bd;
  border-color:#40665e
}
[data-theme=dark] .art-caption {
  background:#2c3449;
  border-color:#4d4668;
  color:#beb0d2
}
[data-theme=dark] .pdf-label {
  background:#5d3b4b;
  color:#f4aaae
}
[data-theme=dark] .document-bar,[data-theme=dark] .panel-heading,[data-theme=dark] .merge-drop,[data-theme=dark] .merge-item,[data-theme=dark] .page-actions,[data-theme=dark] .settings-panel,[data-theme=dark] .empty-state {
  background:#242d3f
}
[data-theme=dark] .notice {
  background:#38343b;
  border-color:#5c4e48;
  color:#d0bfa5
}
[data-theme=dark] .editor-toolbar {
  background:#263044
}
[data-theme=dark] .editor-toolbar .button {
  background:transparent;
  border-color:transparent
}
[data-theme=dark] .editor-toolbar .button.active {
  background:linear-gradient(110deg,#4d3d72,#583f66);
  border-color:#796394;
  color:#e1d0ff
}
[data-theme=dark] .editor-settings {
  background:#202a3b
}
[data-theme=dark] .editor-settings label {
  color:#aeb3c7
}
[data-theme=dark] input,[data-theme=dark] select,[data-theme=dark] textarea {
  background:#293448;
  color:#e1e5ef;
  border-color:#46526c
}
[data-theme=dark] .editor-hint {
  background:#292b43;
  color:#b8accf
}
[data-theme=dark] .viewer-controls,[data-theme=dark] .editor-foot {
  background:#242e41
}
[data-theme=dark] .editor-page-thumb {
  color:#acb2c9
}
[data-theme=dark] .editor-page-thumb.active {
  background:#35405b;
  border-color:#8e85cd;
  box-shadow:0 0 10px #5ed7f022
}
[data-theme=dark] .thumbnail-grid {
  background:#172030
}
[data-theme=dark] .thumbnail-card {
  background:#29354a
}
[data-theme=dark] .thumbnail-card.selected {
  background:#3b3559;
  border-color:#a691e0
}
[data-theme=dark] .thumbnail-caption {
  color:#b2aac7
}
[data-theme=dark] .thumbnail-image {
  background:#29354a
}
[data-theme=dark] .merge-drop>p {
  background:#293046;
  border-color:#5e5372;
  color:#afa1c7
}
[data-theme=dark] .dropzone.drag-over {
  background:#383251
}
[data-theme=dark] .toast {
  background:#36304c;
  color:#e4d7fc;
  border-color:#76638f
}
[data-theme=dark] .toast.error {
  background:#4a2d3c;
  color:#f2beca;
  border-color:#99566d
}
[data-theme=dark] .busy-overlay {
  background:#121723ce
}
[data-theme=dark] .busy-card,[data-theme=dark] dialog {
  background:#263045;
  border-color:#48506a;
  color:#e5e6ef
}
[data-theme=dark] .filename-input span {
  background:#323b52
}
[data-theme=dark] .modal-icon {
  background:#44365f;
  color:#cfb4f6
}
[data-theme=dark] .draft-handle {
  background:linear-gradient(90deg,#334d69,#5b3c70);
  color:#e2d9f3
}
[data-theme=dark] .text-draft textarea {
  background:transparent
}
[data-theme=dark] .field-error {
  color:#ffacb9!important
}
@media(min-width:1550px) {
  .editor-workspace #editor-panel {
    grid-template-columns:minmax(0,1fr) 240px
  }
  .editor-workspace .sidebar {
    width:220px
  }
  .editor-workspace .app-shell {
    margin-left:220px
  }
  .editor-workspace main {
    padding:25px 35px 0
  }
  .editor-workspace .topbar {
    padding:0 35px
  }
}
@media(max-width:1100px) {
  .editor-workspace #editor-panel {
    grid-template-columns:minmax(0,1fr) 175px
  }
  .editor-settings {
    padding:14px 12px;
    gap:11px
  }
  .editor-settings label {
    font-size:9px
  }
  .font-styles {
    gap:9px
  }
  .color-swatches {
    gap:5px
  }
  .color-swatches button {
    width:20px;
    height:20px
  }
  .editor-page-list {
    gap:5px
  }
  .editor-workspace main {
    padding:18px 18px 0
  }
  .editor-toolbar {
    gap:4px
  }
  .editor-toolbar .button {
    font-size:9px;
    padding:6px 9px
  }
  .viewer-scroll {
    padding:20px
  }
  .editor-workspace .sidebar {
    width:190px
  }
  .editor-workspace .app-shell {
    margin-left:190px
  }
}
@media(max-width:800px) {
  .editor-workspace .sidebar {
    width:100%;
    padding:16px 20px 0
  }
  .editor-workspace .app-shell {
    margin-left:0
  }
  .editor-workspace .brand {
    font-size:22px;
    padding:0 0 14px
  }
  .editor-workspace main {
    padding:18px 17px 0
  }
  .editor-workspace .topbar {
    height:55px;
    padding:0 17px
  }
  .editor-workspace #editor-panel {
    grid-template-columns:minmax(0,1fr) 170px
  }
  .theme-toggle {
    font-size:9px;
    padding:5px 8px
  }
  .theme-toggle>span:first-child {
    font-size:15px
  }
  .viewer-scroll {
    min-height:440px
  }
  .editor-workspace #tool-notice {
    font-size:8px
  }
  .editor-hint {
    font-size:9px
  }
}
@media(max-width:600px) {
  .hero {
    overflow:clip
  }
  .theme-toggle #theme-label {
    display:none
  }
  .theme-toggle {
    padding:5px 8px;
    min-width:30px
  }
  .editor-workspace #editor-panel {
    display:flex;
    flex-direction:column
  }
  .editor-toolbar {
    order:0
  }
  .editor-hint {
    order:1
  }
  .editor-settings {
    order:2;
    flex-direction:row;
    flex-wrap:wrap;
    border-left:1px solid var(--border);
    border-radius:0;
    gap:10px;
    padding:12px
  }
  .editor-settings label {
    font-size:9px
  }
  .editor-settings select {
    width:115px
  }
  .editor-settings input[type=number] {
    width:60px
  }
  .editor-settings input[type=color] {
    width:50px
  }
  .properties-heading {
    width:100%;
    padding-bottom:7px;
    display:flex;
    align-items:center;
    justify-content:space-between
  }
  .properties-heading strong {
    font-size:10px
  }
  .properties-heading span {
    margin:0;
    font-size:7px
  }
  .font-styles {
    align-self:center;
    margin-top:14px;
    gap:8px
  }
  .color-swatches {
    align-self:end;
    margin:0 0 4px
  }
  .color-swatches button {
    width:19px;
    height:20px
  }
  .properties-pages {
    display:none
  }
  .viewer-controls {
    order:3
  }
  .viewer-scroll {
    order:4;
    min-height:380px;
    padding:12px
  }
  .editor-foot {
    order:5;
    border-radius:0 0 10px 10px
  }
  .editor-workspace .workspace-heading .eyebrow {
    font-size:6px
  }
  .editor-workspace .workspace-heading h1 {
    font-size:23px
  }
  .editor-workspace .topbar-right {
    gap:6px
  }
}
