/* ═══════════════════ RESET & BASE ═══════════════════ */
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Inter', sans-serif; background: #0e0e10; color: #e0ddd8; min-height: 100vh; }
a { color: #c9a96e; text-decoration: none; }

/* ═══════════════════ NAVIGATION ═══════════════════ */
.app-nav { background: #18181b; border-bottom: 1px solid #2a2a2e; padding: 0 24px; display: flex; align-items: center; height: 56px; position: sticky; top: 0; z-index: 100; }
.app-nav .logo { font-family: 'Rye', serif; font-size: 18px; color: #c9a96e; margin-right: 32px; white-space: nowrap; }
.app-nav .nav-links { display: flex; gap: 4px; }
.app-nav .nav-links button { background: none; border: none; color: #999; font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 500; padding: 8px 16px; border-radius: 6px; cursor: pointer; transition: .2s; }
.app-nav .nav-links button:hover { color: #e0ddd8; background: #ffffff0d; }
.app-nav .nav-links button.active { color: #c9a96e; background: #c9a96e18; }

/* ═══════════════════ VIEWS ═══════════════════ */
.view { display: none; padding: 24px; max-width: 1200px; margin: 0 auto; }
.view.active { display: block; }

/* ═══════════════════ BUTTONS ═══════════════════ */
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; border: none; border-radius: 8px; font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 500; cursor: pointer; transition: .2s; }
.btn-primary { background: #c9a96e; color: #111; }
.btn-primary:hover { background: #dbb97e; }
.btn-secondary { background: #2a2a2e; color: #e0ddd8; border: 1px solid #3a3a3e; }
.btn-secondary:hover { background: #3a3a3e; }
.btn-danger { background: #7a1010; color: #fff; }
.btn-danger:hover { background: #9a2020; }
.btn-sm { padding: 6px 12px; font-size: 12px; }

/* ═══════════════════ CARDS ═══════════════════ */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; margin-top: 20px; }
.card { background: #1e1e22; border: 1px solid #2a2a2e; border-radius: 12px; padding: 20px; cursor: pointer; transition: .2s; position: relative; }
.card:hover { border-color: #c9a96e55; transform: translateY(-2px); box-shadow: 0 8px 24px #0005; }
.card h3 { font-family: 'Rye', serif; font-size: 16px; color: #c9a96e; margin-bottom: 8px; }
.card p { font-size: 13px; color: #888; line-height: 1.5; }
.card-actions { display: flex; gap: 8px; margin-top: 14px; }

/* ═══════════════════ FORMS ═══════════════════ */
.form-group { margin-bottom: 16px; }
.form-group label { display: block; font-size: 13px; font-weight: 600; color: #999; margin-bottom: 6px; text-transform: uppercase; letter-spacing: .5px; }
.form-input { width: 100%; padding: 10px 14px; background: #111; border: 1px solid #2a2a2e; border-radius: 8px; color: #e0ddd8; font-family: 'Inter', sans-serif; font-size: 14px; outline: none; transition: .2s; }
.form-input:focus { border-color: #c9a96e; }
select.form-input { cursor: pointer; }
textarea.form-input { min-height: 80px; resize: vertical; }

/* ═══════════════════ SECTION TITLES ═══════════════════ */
.section-title { font-size: 24px; font-weight: 700; margin-bottom: 8px; }
.section-subtitle { font-size: 14px; color: #888; margin-bottom: 24px; }

/* ═══════════════════ TOOLBAR ═══════════════════ */
.toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 20px; padding: 16px; background: #1e1e22; border-radius: 12px; border: 1px solid #2a2a2e; }
.toolbar-separator { width: 1px; height: 24px; background: #3a3a3e; }

/* ═══════════════════ EDITOR LAYOUT ═══════════════════ */
.editor-layout { display: grid; grid-template-columns: 320px 1fr; gap: 20px; min-height: calc(100vh - 120px); }
.editor-sidebar { background: #1e1e22; border: 1px solid #2a2a2e; border-radius: 12px; padding: 16px; overflow-y: auto; max-height: calc(100vh - 120px); position: sticky; top: 76px; }
.editor-main { overflow-y: auto; }

/* ═══════════════════ TREE ═══════════════════ */
.tree-item { padding: 8px 12px; border-radius: 6px; cursor: pointer; font-size: 13px; transition: .15s; display: flex; align-items: center; gap: 8px; margin-bottom: 2px; }
.tree-item:hover { background: #ffffff0a; }
.tree-item.active { background: #c9a96e22; color: #c9a96e; }
.tree-item .icon { font-size: 16px; opacity: .6; }
.tree-row { font-weight: 600; color: #c9a96e; font-size: 12px; text-transform: uppercase; letter-spacing: .5px; margin-top: 12px; margin-bottom: 4px; padding: 4px 12px; }
.tree-section { padding-left: 28px; }
.tree-add { padding: 6px 12px; font-size: 12px; color: #666; cursor: pointer; border: 1px dashed #333; border-radius: 6px; text-align: center; margin: 4px 0 4px 28px; transition: .15s; }
.tree-add:hover { color: #c9a96e; border-color: #c9a96e55; }

/* ═══════════════════ EDITOR FORM ═══════════════════ */
.editor-form { background: #1e1e22; border: 1px solid #2a2a2e; border-radius: 12px; padding: 20px; }
.editor-form h3 { font-size: 16px; margin-bottom: 16px; color: #c9a96e; font-family: 'Rye', serif; }
.field-list { margin-top: 8px; }
.field-item { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; }
.field-item input { flex: 1; }
.field-item .btn-sm { flex-shrink: 0; }
.header-item { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; }
.header-item input:first-child { flex: 2; }
.header-item input:last-of-type { flex: 1; }

/* ═══════════════════ CHARACTER SHEET ═══════════════════ */
.sheet-wrapper { display: flex; justify-content: center; padding: 20px 0; }

.page-a4 {
  width: 210mm; min-height: 297mm;
  background-color: #c7bcae;
  background-image:
    radial-gradient(circle at center, transparent 30%, rgba(20,15,10,.65) 100%),
    repeating-linear-gradient(45deg, rgba(0,0,0,.02) 0px, rgba(0,0,0,.02) 2px, transparent 2px, transparent 4px),
    linear-gradient(to bottom, rgba(255,255,255,.1), rgba(0,0,0,.1));
  padding: 12mm; box-sizing: border-box;
  box-shadow: 0 0 20px #000; position: relative;
  border: 6px solid #1a1614; outline: 2px solid #7a1010; outline-offset: -10px;
  font-family: 'Cormorant Garamond', serif; color: #1a1614;
}
.page-a4 h1 { font-family: 'Rye', serif; text-align: center; text-transform: uppercase; font-size: 34px; color: #1a1614; margin: 15px 0 5px; letter-spacing: 3px; text-shadow: 1px 1px 0 rgba(255,255,255,.3); }
.page-a4 .sheet-subtitle { text-align: center; font-size: 16px; font-style: italic; color: #7a1010; margin-bottom: 25px; font-weight: bold; letter-spacing: 1px; }
.page-a4 input[type="text"] { background: transparent; border: none; border-bottom: 1px dotted #1a1614; font-family: 'Cormorant Garamond', serif; font-size: 18px; font-weight: 600; color: #1a1614; width: 100%; outline: none; padding: 0 5px; }
.page-a4 .box-textarea {
  background: transparent; border: none; width: 100%; resize: none;
  font-family: 'Cormorant Garamond', serif; font-size: 16px; font-weight: 600;
  color: #1a1614; outline: none; line-height: 24px;
  background-image: linear-gradient(transparent, transparent 23px, rgba(0,0,0,.2) 24px);
  background-size: 100% 24px; overflow: hidden;
}
.page-a4 td textarea {
  display: block; background: transparent; border: none; width: 100%; resize: none;
  font-family: 'Cormorant Garamond', serif; font-size: 16px; font-weight: 600;
  color: #1a1614; outline: none; line-height: 1.45; padding: 2px 5px; overflow: hidden; min-height: 22px;
}

/* ——— Подменные div/span для PDF-экспорта ——— */
.pdf-swap-div {
  white-space: pre-wrap; word-break: break-word;
  font-family: 'Cormorant Garamond', serif; font-weight: 600; color: #1a1614;
}
.pdf-swap-span {
  display: block; width: 100%;
  font-family: 'Cormorant Garamond', serif; font-weight: 600; color: #1a1614;
}

/* ═══════════════════ SHEET LAYOUT ═══════════════════ */
.sheet-row { display: flex; gap: 20px; margin-bottom: 20px; }
.sheet-row:last-child { margin-bottom: 0; }
.sheet-col { display: flex; flex-direction: column; gap: 20px; }

/* ═══════════════════ BOXES ═══════════════════ */
.box { border: 3px solid #1a1614; padding: 15px 12px 10px; position: relative; background: rgba(255,255,255,.15); box-shadow: inset 0 0 10px rgba(0,0,0,.1); }
.box-title { position: absolute; top: -14px; left: 15px; background-color: #bfae9c; border: 3px solid #1a1614; padding: 2px 10px; font-family: 'Rye', serif; font-size: 14px; color: #7a1010; text-transform: uppercase; box-shadow: 2px 2px 0 rgba(0,0,0,.3); white-space: nowrap; }

/* ═══════════════════ INFO GRID ═══════════════════ */
.info-grid { display: grid; gap: 0 20px; }
.info-row { display: flex; align-items: flex-end; margin-bottom: 10px; }
.info-row:last-child { margin-bottom: 0; }
.info-row span { font-weight: bold; font-size: 18px; white-space: nowrap; margin-right: 10px; font-family: 'Cormorant Garamond', serif; }

/* ═══════════════════ TABLE ═══════════════════ */
.page-a4 table { width: 100%; border-collapse: collapse; margin-top: 5px; }
.page-a4 th, .page-a4 td { border: 1px solid #3a322d; padding: 6px; text-align: left; vertical-align: top; }
.page-a4 th { background: rgba(0,0,0,.1); font-weight: bold; font-family: 'Rye', serif; font-size: 12px; color: #7a1010; text-transform: uppercase; border-bottom: 3px solid #1a1614; }
.page-a4 td input[type="text"] { border-bottom: none; font-size: 16px; }

/* ═══════════════════ DECORATIONS ═══════════════════ */
.splatter-1 { position: absolute; top: 40px; right: 30px; width: 40px; height: 40px; background: radial-gradient(circle, rgba(122,16,16,.1) 0%, transparent 70%); border-radius: 50%; pointer-events: none; }

/* ═══════════════════ MODAL ═══════════════════ */
.modal-overlay { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: #000a; z-index: 200; justify-content: center; align-items: center; }
.modal-overlay.active { display: flex; }
.modal { background: #1e1e22; border: 1px solid #2a2a2e; border-radius: 16px; padding: 24px; max-width: 500px; width: 90%; max-height: 80vh; overflow-y: auto; }
.modal h3 { font-size: 18px; margin-bottom: 16px; color: #c9a96e; }
.modal-footer { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }

/* ═══════════════════ TOAST ═══════════════════ */
.toast { position: fixed; bottom: 24px; right: 24px; background: #1e1e22; border: 1px solid #c9a96e; color: #e0ddd8; padding: 12px 20px; border-radius: 10px; font-size: 14px; z-index: 300; transform: translateY(80px); opacity: 0; transition: .3s; pointer-events: none; }
.toast.show { transform: translateY(0); opacity: 1; }

/* ═══════════════════ RESPONSIVE ═══════════════════ */
@media (max-width: 900px) {
  .editor-layout { grid-template-columns: 1fr; }
  .editor-sidebar { position: static; max-height: none; }
}
@media print {
  body { background: white !important; }
  .app-nav, .toolbar, .view > *:not(.sheet-wrapper) { display: none !important; }
  .page-a4 { box-shadow: none; margin: 0; outline-offset: -10px; }
}