@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
* { box-sizing: border-box; } body { font-family: Inter, ui-sans-serif, system-ui, sans-serif; }
html{font-size: 16px;}
.btn,.tool { border:1px solid #334155; border-radius:6px; background:#1e293b; padding:6px 10px; font-size:12px; font-weight:500; color:#e2e8f0; transition:.15s; }.btn:hover,.tool:hover { border-color:#64748b; background:#334155; }.btn:disabled,.tool:disabled { cursor:not-allowed; opacity:.4; }
.btn-primary { border-radius:6px; background:#2563eb; padding:6px 12px; font-size:12px; font-weight:600; color:#fff; transition:.15s; }.btn-primary:hover { background:#3b82f6; }.btn-primary:disabled { opacity:.4; }.tool { padding:4px 10px; }.tool.active { border-color:#3b82f6; background:rgb(37 99 235 / .2); color:#93c5fd; }
.field { display:block; width:100%; margin-top:4px; border:1px solid #334155; border-radius:6px; background:#020617; padding:8px 10px; font-size:14px; color:#f1f5f9; outline:none; }.field::placeholder { color:#475569; }.field:focus { border-color:#3b82f6; }.field-label { display:block; font-size:12px; font-weight:500; color:#94a3b8; }.section-title { font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:#64748b; }
.canvas-grid { background-color:#0b1220; background-image:radial-gradient(#25334a 1px,transparent 1px); background-size:18px 18px; }
.page-item { position:relative; display:flex; gap:8px; border:1px solid #1e293b; border-radius:8px; background:#020617; padding:8px; text-align:left; transition:.15s; }.page-item:hover { border-color:#475569; }.page-item.active { border-color:#3b82f6; background:rgb(59 130 246 / .1); }.page-thumb { height:64px; width:44px; flex-shrink:0; border-radius:4px; object-fit:cover; background:#1e293b; }.page-actions { position:absolute; top:4px; right:4px; display:none;}.page-item:hover .page-actions { display:flex; }.icon-btn { display:grid; height:25px; width:25px; place-items:center; border-radius:4px; background:#1e293b; font-size:12px; color:#cbd5e1; }.icon-btn:hover { background:#334155; color:#fff; }
.dragging { opacity:.45; }.drag-over { border-color:#60a5fa !important; box-shadow:0 0 0 2px rgb(59 130 246 / .25); }
.hotspot-list-item { display:flex; min-width:0; align-items:center; gap:8px; border:1px solid transparent; border-radius:6px; padding:8px; text-align:left; font-size:12px; }.hotspot-list-item:hover { background:#1e293b; }.hotspot-list-item.active { border-color:rgb(59 130 246 / .5); background:rgb(59 130 246 / .1); }.modal-backdrop { position:fixed; inset:0; z-index:50; display:grid; place-items:center; padding:20px; background:rgb(2 6 23 / .8); backdrop-filter:blur(4px); }.modal { max-height:100%; width:100%; max-width:896px; overflow:hidden; border:1px solid #334155; border-radius:12px; background:#0f172a; box-shadow:0 25px 50px rgb(0 0 0 / .4); }
.reader-part { width:max-content; max-width:100%; margin:0 auto 24px; overflow:hidden; border:1px solid #334155; border-radius:10px; background:#0f172a; transition:.15s; }.reader-part:hover { border-color:#60a5fa; box-shadow:0 0 0 2px rgb(59 130 246 / .25); }.reader-part header { display:flex; flex-direction:column; gap:2px; padding:10px 12px; font-size:12px; color:#94a3b8; }.reader-part header strong { color:#f1f5f9; font-size:14px; }.reader-crop { max-width:100%; background-repeat:no-repeat; background-color:#020617; }
.reader-stage { background:#050912; background-image:radial-gradient(#1c2c44 1px,transparent 1px); background-size:18px 18px; }