/* Nouns theme: noggles red, Nouns yellow and the classic cool Noun background, with
   Londrina Solid for display type and Nunito for UI text (matching noggles.online).
   Text-bearing reds and blues are deepened slightly to keep 4.5:1 contrast on white. */
:root{
 --n-ink:#16131f;--n-ink-2:#4a4560;--n-muted:#6b6680;
 --n-red:#e9265c;--n-red-ink:#c8144b;--n-red-soft:#fde7ee;
 --n-yellow:#ffe14d;--n-yellow-press:#a88f12;--n-yellow-soft:#fff6c7;
 --n-blue:#1a62d6;--n-blue-soft:#e6efff;--n-green:#2f9e57;
 --n-cool:#d5d7e1;--n-cool-2:#c7cad8;--n-warm:#e1d7d5;
 --n-paper:#fff;--n-line:#e2e0ea;--n-line-2:#cfccdb;
 --n-display:'Londrina Solid',system-ui,sans-serif;
 --n-body:'Nunito',system-ui,-apple-system,'Segoe UI',sans-serif;
 --n-press:0 3px 0;--n-radius:12px;--n-ease:cubic-bezier(.2,.7,.3,1);
 --ink:var(--n-ink);--blue:var(--n-blue);--line:var(--n-line);
}
body{font-family:var(--n-body)!important;color:var(--n-ink);background:var(--n-cool)!important}
::selection{background:var(--n-yellow);color:var(--n-ink)}
:focus-visible{outline:3px solid var(--n-blue)!important;outline-offset:2px}

/* ---------- Header ---------- */
header{background:var(--n-paper)!important;border-bottom:2px solid var(--n-ink)!important}
.brand{gap:10px!important;font-family:var(--n-display);font-size:26px!important;letter-spacing:.01em;color:var(--n-ink)}
.brand strong{font-weight:400}
.brand strong span{color:var(--n-red-ink)!important;font-weight:400!important}
.brand .noggles{width:52px;height:26px;display:block;flex:none}
.brand>i{display:none!important}
.doc-name{background:var(--n-cool)!important;border-radius:999px!important;border:2px solid transparent!important;padding:6px 14px!important}
.doc-name:focus-within{background:#fff!important;border-color:var(--n-ink)!important;box-shadow:none}
.doc-name input{font-family:var(--n-body);font-weight:800;color:var(--n-ink)}
.doc-name span{color:var(--n-muted)!important;font-weight:700}
.doc-history button{color:var(--n-ink-2)}
.doc-history button:hover{background:var(--n-cool)!important;color:var(--n-ink)!important}
.secondary-actions{border-right-color:var(--n-line)!important}
.secondary-actions .cloud-btn{font-family:var(--n-body);font-weight:700!important;color:var(--n-ink-2)!important;border-radius:999px!important}
.secondary-actions .cloud-btn:hover{background:var(--n-cool)!important;color:var(--n-ink)!important}
/* Chunky pill buttons with a hard "press" shadow, like the Nouns site */
.save-split{filter:drop-shadow(0 3px 0 var(--n-ink))}
.save-split>.cloud-btn,.save-split .save-menu>summary{border:2px solid var(--n-ink)!important;background:#fff!important;color:var(--n-ink)!important;font-family:var(--n-display);font-size:18px!important;font-weight:400!important;letter-spacing:.02em}
.save-split>.cloud-btn{border-radius:999px 0 0 999px!important;padding:6px 14px 6px 16px!important}
.save-split .save-menu>summary{border-radius:0 999px 999px 0!important;padding:0 12px 0 8px!important;margin-left:-2px}
.save-split>.cloud-btn:hover,.save-split .save-menu>summary:hover{background:var(--n-yellow-soft)!important}
.save-split:active{filter:none;transform:translateY(3px)}
.export-btn{background:var(--n-yellow)!important;color:var(--n-ink)!important;border:2px solid var(--n-ink)!important;border-radius:999px!important;font-family:var(--n-display)!important;font-size:19px!important;font-weight:400!important;letter-spacing:.03em;padding:6px 20px!important;box-shadow:var(--n-press) var(--n-ink)!important;transition:transform .12s var(--n-ease),box-shadow .12s var(--n-ease),background .12s}
.export-btn:hover{background:#fff07f!important}
.export-btn:active{transform:translateY(3px);box-shadow:0 0 0 var(--n-ink)!important}
.more-toggle{border:2px solid var(--n-ink)!important;border-radius:999px!important;background:#fff!important;color:var(--n-ink)!important}
.save-menu-list{border:2px solid var(--n-ink)!important;border-radius:14px!important;box-shadow:4px 4px 0 var(--n-ink)!important}
@media (max-width:1180px){.secondary-actions{border:2px solid var(--n-ink)!important;border-radius:14px!important;box-shadow:4px 4px 0 var(--n-ink)!important}}
.save-menu-list button{font-family:var(--n-body);font-weight:700;color:var(--n-ink)!important;border-radius:8px}
.save-menu-list button:hover,.save-menu-list button:focus-visible{background:var(--n-yellow-soft)!important}

/* ---------- Tool rail ---------- */
nav{background:var(--n-paper)!important;border-right:2px solid var(--n-ink)!important}
.sidebar-btn{color:var(--n-ink-2)!important;border-radius:14px!important;transition:background .15s,color .15s}
.sidebar-btn span{font-family:var(--n-body);font-weight:800!important;color:inherit!important}
.sidebar-btn i{color:inherit!important}
.sidebar-btn:hover{background:var(--n-cool)!important;color:var(--n-ink)!important}
.sidebar-btn.active{background:var(--n-yellow)!important;color:var(--n-ink)!important;box-shadow:inset 0 0 0 2px var(--n-ink)}

/* ---------- Tool panel ---------- */
#panels-container{background:var(--n-paper)!important;border-right:2px solid var(--n-ink)!important}
#panels-container h3,.intro-note b,.section-head h3{font-family:var(--n-display)!important;font-weight:400!important;font-size:20px!important;letter-spacing:.02em!important;text-transform:none!important;color:var(--n-ink)!important;line-height:1.1}
#panels-container h4,.section-head h4{font-family:var(--n-display)!important;font-weight:400!important;font-size:17px!important;letter-spacing:.02em!important;text-transform:none!important;color:var(--n-ink)!important}
.intro-note b{font-size:24px!important}
#panels-container p,.panel-hint{color:var(--n-muted)!important}
#panels-container .border,#panels-container .rounded-lg.border{border:2px solid var(--n-line)!important;border-radius:var(--n-radius)!important}
#panels-container button.w-full.border:hover,#panels-container label.w-full.border:hover{border-color:var(--n-ink)!important;background:var(--n-yellow-soft)!important}
#panels-container .text-blue-500,#panels-container .text-blue-600{color:var(--n-red-ink)!important}
#panels-container .bg-blue-50{background:var(--n-red-soft)!important}
#panels-container .bg-blue-600,#panels-container button.bg-blue-600{background:var(--n-ink)!important;color:#fff!important;border-radius:999px!important;font-family:var(--n-display);font-size:16px!important;font-weight:400!important;letter-spacing:.03em}
#panels-container .bg-blue-600:hover{background:#2c2840!important}
.fill-tools .cloud-btn,.entries-actions .cloud-btn,.wm-save{border:2px solid var(--n-line)!important;border-radius:12px!important;color:var(--n-ink)!important;font-weight:700!important;background:#fff!important}
.fill-tools .cloud-btn:hover,.entries-actions .cloud-btn:hover,.wm-save:hover{border-color:var(--n-ink)!important;background:var(--n-yellow-soft)!important;color:var(--n-ink)!important}
.entries-panel{background:var(--n-yellow-soft)!important;border:2px solid var(--n-ink)!important;border-radius:16px!important;box-shadow:4px 4px 0 var(--n-ink)}
.entry-chip{border:2px solid var(--n-ink)!important;color:var(--n-ink)!important;font-weight:800!important;background:#fff!important}
.entry-chip:hover{background:var(--n-ink)!important;color:var(--n-yellow)!important}
.link-btn{color:var(--n-red-ink)!important;font-weight:800!important}
.link-btn:hover{background:var(--n-red-soft)!important}
.wm-preset-apply,.logo-thumb{border:2px solid var(--n-line)!important;border-radius:12px!important}
.wm-preset-apply:hover,.logo-thumb:hover{border-color:var(--n-ink)!important;box-shadow:3px 3px 0 var(--n-ink)!important}
input[type=checkbox],input[type=radio],input[type=range]{accent-color:var(--n-red)}
#panels-container input[type=text],#panels-container select,#panels-container textarea{border:2px solid var(--n-line)!important;border-radius:10px!important}
#panels-container input[type=text]:focus,#panels-container select:focus,#panels-container textarea:focus{border-color:var(--n-ink)!important;outline:none}

/* ---------- Page rail ---------- */
#page-rail{background:var(--n-warm)!important;border-right:2px solid var(--n-ink)!important}
.rail-title{font-family:var(--n-display);font-size:20px;color:var(--n-ink)}
.rail-actions button,.rail-actions label{border:2px solid var(--n-ink)!important;border-radius:10px!important;background:#fff!important;color:var(--n-ink)!important}
.rail-actions button:hover,.rail-actions label:hover{background:var(--n-yellow)!important}
.thumb-main{border:2px solid transparent!important;border-radius:8px!important;box-shadow:0 2px 0 rgba(22,19,31,.18)!important}
.thumb.active .thumb-main{border-color:var(--n-red)!important;box-shadow:3px 3px 0 var(--n-ink)!important}
.thumb-label{font-family:var(--n-display);font-size:16px!important;color:var(--n-ink)}
.thumb-controls button:hover{background:#fff!important;color:var(--n-red-ink)!important}

/* ---------- Workspace ---------- */
.workspace-bar{background:var(--n-paper)!important;border-bottom:2px solid var(--n-ink)!important;color:var(--n-ink-2)!important;font-weight:700}
.workspace-bar button{font-weight:700;color:var(--n-ink-2);border-radius:999px!important}
.workspace-bar button:hover{background:var(--n-cool)!important;color:var(--n-ink)}
.form-next{color:var(--n-red-ink)!important;font-weight:800!important}
.form-next:hover{background:var(--n-red-soft)!important}
#context-toolbar{background:var(--n-paper)!important;border-bottom:2px solid var(--n-line)!important}
#active-page-indicator{background:var(--n-ink)!important;color:var(--n-yellow)!important;font-family:var(--n-display);font-weight:400!important;font-size:15px!important;letter-spacing:.04em;border-radius:999px!important}
#main-scroll{background:var(--n-cool)!important}
.page-wrapper{box-shadow:4px 4px 0 rgba(22,19,31,.85)!important;border-radius:0!important}
.canvas-container-wrapper.active-page{outline:3px solid var(--n-red)!important;outline-offset:3px}
.absolute.bottom-4.right-4{background:#fff!important;border:2px solid var(--n-ink)!important;border-radius:999px!important;box-shadow:3px 3px 0 var(--n-ink)!important}
#zoom-val{font-family:var(--n-display)!important;font-size:16px!important;color:var(--n-ink)}
.form-field{background:rgba(255,225,77,.32)!important;border-color:transparent}
.form-field:hover{border-color:rgba(22,19,31,.45)!important}
.form-field:focus{background:#fff!important;border-color:var(--n-ink)!important;box-shadow:0 0 0 3px var(--n-yellow)!important}

/* ---------- Status bar, toast, loader, empty state ---------- */
.status-bar{background:var(--n-paper)!important;border-top:2px solid var(--n-ink)!important;color:var(--n-ink-2)!important;font-weight:700}
.status-bar button,.status-bar label{color:var(--n-red-ink)!important;font-weight:800}
#save-status{font-weight:800;color:var(--n-ink)}
#toast{background:var(--n-ink)!important;color:#fff!important;border-radius:999px!important;padding:11px 22px!important;font-weight:800;box-shadow:4px 4px 0 var(--n-yellow)!important}
#loader{background:rgba(213,215,225,.86)!important;backdrop-filter:blur(2px)}
#loader>div{display:none!important}
#loader .noggles{width:120px;height:60px;margin-bottom:14px}
#loader-text{font-family:var(--n-display)!important;font-weight:400!important;font-size:22px!important;color:var(--n-ink)!important;letter-spacing:.02em}
.noggles .pupil{animation:noggle-look 1.6s steps(1) infinite}
@keyframes noggle-look{0%,100%{transform:translateX(0)}33%{transform:translateX(-2px)}66%{transform:translateX(0)}}
#empty-state h2{font-family:var(--n-display);font-weight:400!important;font-size:30px!important;color:var(--n-ink)!important}
#empty-state p{color:var(--n-ink-2)!important;font-weight:700}
#empty-state>div:first-child{background:transparent!important;box-shadow:none!important}

/* ---------- Dialogs ---------- */
dialog,#export-modal>div{border:2px solid var(--n-ink)!important;border-radius:20px!important;box-shadow:6px 6px 0 var(--n-ink)!important;font-family:var(--n-body)}
dialog h2,#export-modal h2,#export-modal h3,#library-dialog h2,#library-dialog h3{font-family:var(--n-display)!important;font-weight:400!important;letter-spacing:.02em;color:var(--n-ink)!important}
dialog h2,#library-dialog h2{font-size:30px!important}
#library-dialog h3{font-size:26px!important}
dialog::backdrop{background:rgba(22,19,31,.45)}
.cloud-btn.primary,#library-dialog .primary,#export-modal button.bg-blue-600{background:var(--n-yellow)!important;color:var(--n-ink)!important;border:2px solid var(--n-ink)!important;border-radius:999px!important;box-shadow:var(--n-press) var(--n-ink)!important;font-family:var(--n-display)!important;font-size:18px!important;font-weight:400!important;letter-spacing:.03em}
.cloud-btn.primary:hover,#library-dialog .primary:hover,#export-modal button.bg-blue-600:hover{background:#fff07f!important}
.cloud-btn.primary:active,#library-dialog .primary:active,#export-modal button.bg-blue-600:active{transform:translateY(3px);box-shadow:0 0 0 var(--n-ink)!important}
#library-dialog .library-nav button[aria-selected=true],#library-dialog [role=tab][aria-selected=true]{background:var(--n-yellow)!important;color:var(--n-ink)!important}
.export-choice:has(input:checked){border-color:var(--n-ink)!important;background:var(--n-yellow-soft)!important}

/* ---------- Phones ---------- */
@media (max-width:760px){
 .brand .noggles{width:44px;height:22px}
 nav{border-right:0!important;border-top:2px solid var(--n-ink)!important}
 .sidebar-btn{min-height:44px}
 #panels-container{border:2px solid var(--n-ink)!important;border-bottom:0!important;border-radius:20px 20px 0 0!important}
 .export-btn{padding:6px 14px!important}
 .save-split>.cloud-btn{padding:6px 10px!important}
 .doc-name span{display:none}
 .doc-name{padding:6px 12px!important}
 .header-actions .export-btn{font-size:0!important;padding:7px 12px!important;gap:0!important}
 .header-actions .export-btn i{font-size:20px!important}
 .workspace-bar button[onclick="fitPage()"]{display:none}
 .workspace-bar{overflow-x:auto;overflow-y:hidden}
 #toast{border-radius:18px!important}
}
@media (prefers-reduced-motion:reduce){.noggles .pupil{animation:none}*{transition-duration:.01ms!important}}
#work-hint{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}.workspace-bar>div:first-child{min-width:0}

/* ---------- Scrollbars: hide the tool rail's, keep the panel's slim ---------- */
nav{scrollbar-width:none}nav::-webkit-scrollbar{display:none}
#panels-container{scrollbar-width:thin;scrollbar-color:var(--n-line-2) transparent}

/* ---------- Sign panel ---------- */
#panels-container .canvas-container{max-width:100%}
#panel-signature .border-2{border:2px dashed var(--n-line-2)!important;border-radius:14px!important;background:#fff!important;padding:0!important;overflow:hidden}
#panel-signature .border-2:hover{border-color:var(--n-ink)!important}
.asset-actions{gap:6px!important}
.asset-actions button,.asset-actions label{display:inline-flex;align-items:center;gap:6px;border:2px solid var(--n-line)!important;background:#fff!important;color:var(--n-ink)!important;font-weight:800!important;font-size:12.5px!important;border-radius:999px!important;padding:6px 12px!important}
.asset-actions button:hover,.asset-actions label:hover{border-color:var(--n-ink)!important;background:var(--n-yellow-soft)!important}
#panel-signature label.uppercase,#panels-container h4.uppercase,#panels-container label.text-xs.uppercase{font-family:var(--n-display)!important;font-size:18px!important;font-weight:400!important;text-transform:none!important;letter-spacing:.02em!important;color:var(--n-ink)!important}
#panel-signature .flex.gap-2 button{border-radius:999px!important;font-size:14px!important;font-weight:800;padding:9px 0!important}
#panel-signature .flex.gap-2 button.border{border:2px solid var(--n-line)!important}
#panel-signature .flex.gap-2 button.border:hover{border-color:var(--n-ink)!important;background:var(--n-cool)!important}

/* ---------- Shapes panel ---------- */
.drawing-box{background:#fff!important;border:2px solid var(--n-ink);border-radius:16px!important;padding:14px!important;box-shadow:4px 4px 0 var(--n-ink);margin-bottom:22px}
.drawing-box h3{margin:0 0 10px!important}
#draw-tools{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:6px!important;margin:0!important}
#draw-tools button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:62px;padding:8px 2px!important;font-family:var(--n-body);font-size:12px!important;font-weight:800;color:var(--n-ink)!important;background:#fff!important;border:2px solid var(--n-line)!important;border-radius:12px!important}
#draw-tools button i{font-size:22px;line-height:1}
#draw-tools button:hover{border-color:var(--n-ink)!important;background:var(--n-yellow-soft)!important}
#draw-tools button.selected{background:var(--n-yellow)!important;border-color:var(--n-ink)!important;color:var(--n-ink)!important}
#draw-hint{font-size:12px!important;color:var(--n-muted)!important;margin:8px 0 6px!important}
.drawing-box label{margin:0!important;padding:8px 0;border-top:1px solid var(--n-line);font-size:13.5px!important;font-weight:800;color:var(--n-ink)}
.drawing-box label:has(#draw-filled){justify-content:flex-start}
.drawing-box label:has(#draw-filled) #draw-fill{margin-left:auto}
.drawing-box input[type=color],#panels-container input[type=color]{width:32px!important;height:32px!important;padding:0;border:2px solid var(--n-ink)!important;border-radius:50%!important;overflow:hidden;cursor:pointer;background:none;flex:none}
#panels-container input[type=color]::-webkit-color-swatch-wrapper{padding:0}
#panels-container input[type=color]::-webkit-color-swatch{border:0;border-radius:50%}
#panels-container input[type=color]::-moz-color-swatch{border:0;border-radius:50%}
.drawing-box input[type=number],.drawing-box select{width:84px!important;border:2px solid var(--n-line)!important;border-radius:10px!important;padding:5px 8px!important;font-family:var(--n-body);font-weight:800;color:var(--n-ink);background:#fff;text-align:center}
.drawing-box input[type=number]:focus,.drawing-box select:focus{border-color:var(--n-ink)!important;outline:none}
.drawing-box .apply-style{width:100%;justify-content:center;margin-top:10px;padding:9px 0!important;border:2px solid var(--n-ink)!important;border-radius:999px!important;background:var(--n-ink)!important;color:#fff!important;font-family:var(--n-display);font-size:16px!important;letter-spacing:.03em}
.drawing-box .apply-style:hover{background:#2c2840!important}
#extra-symbols{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:6px!important}
#extra-symbols button{display:flex;align-items:center;justify-content:center;min-height:44px;padding:4px 2px!important;font-family:var(--n-body);font-size:18px!important;font-weight:800;color:var(--n-ink)!important;background:#fff!important;border:2px solid var(--n-line)!important;border-radius:12px!important}
#extra-symbols button.word{grid-column:span 2;font-size:13px!important}
#extra-symbols button:hover{border-color:var(--n-ink)!important;background:var(--n-yellow-soft)!important}
.shapes-grid{gap:6px!important}
.shape-btn{border:2px solid var(--n-line)!important;border-radius:12px!important;background:#fff!important;transition:transform .16s,border-color .15s,background .15s}
.shape-btn:hover{border-color:var(--n-ink)!important;background:var(--n-yellow-soft)!important}

/* ---------- All tool tabs: shared panel styling ---------- */
@media (min-width:761px){
 #panels-container{width:284px!important;flex:none!important}
 /* Compact rail so every tool fits without scrolling on laptop screens */
 nav{gap:2px!important;padding-top:10px!important}
 nav>div.w-10{margin:4px 0!important}
 .sidebar-btn{padding:8px 0!important;gap:1px!important}
 .sidebar-btn i{font-size:22px!important}
}
/* Section labels: Londrina instead of small grey capitals */
#panels-container .uppercase{text-transform:none!important;letter-spacing:.01em!important}
#panels-container label.uppercase,#panels-container span.uppercase,#panels-container div.uppercase{font-family:var(--n-display)!important;font-weight:400!important;font-size:17px!important;color:var(--n-ink)!important}
#panels-container input[type=range]{accent-color:var(--n-red)!important;width:100%}
#panels-container input[type=password],#panels-container input[type=number]{border:2px solid var(--n-line)!important;border-radius:10px!important}
#panels-container input[type=password]:focus{border-color:var(--n-ink)!important;box-shadow:none!important}
#panels-container [class*="text-gray-4"]{color:var(--n-muted)!important}
/* Intro cards (Organize, Security, Data) */
#panel-security>div:first-child,#panel-merge>div:first-child,#panel-organize .bg-purple-50{background:var(--n-yellow-soft)!important;border:2px solid var(--n-ink)!important;border-radius:16px!important;box-shadow:4px 4px 0 var(--n-ink);padding:14px!important}
#panel-organize .bg-purple-50{margin:4px 16px 14px!important}
#panels-container [class*="text-purple-7"],#panels-container [class*="text-green-7"],#panels-container [class*="text-blue-7"]{color:var(--n-ink-2)!important;font-size:12.5px!important}
#panels-container h3 i{color:var(--n-red-ink)}
/* Buttons and tiles */
#panels-container button.border,#panels-container .border.rounded-lg:not(.border-dashed){border:2px solid var(--n-line)!important;border-radius:12px!important;background:#fff;color:var(--n-ink);font-weight:800}
#panels-container button.border:hover{background:var(--n-yellow-soft)!important;border-color:var(--n-ink)!important}
#panels-container :is(button.bg-blue-600,button.bg-red-600,button.bg-orange-600,button.bg-green-600){background:var(--n-ink)!important;color:#fff!important;border:0!important;border-radius:999px!important;font-family:var(--n-display);font-size:16px!important;font-weight:400!important;letter-spacing:.03em;padding:10px 0!important}
#panels-container :is(button.bg-blue-600,button.bg-red-600,button.bg-orange-600,button.bg-green-600):hover{background:#2c2840!important}
#panels-container .border-dashed{border:2px dashed var(--n-line-2)!important;border-radius:14px!important;background:#fff!important;transition:border-color .15s,background .15s}
#panels-container .border-dashed:hover{border-color:var(--n-ink)!important;background:var(--n-yellow-soft)!important}
#panel-draw>button.cloud-btn,.wm-save{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;border:2px solid var(--n-line)!important;border-radius:999px!important;font-weight:800;padding:9px 0!important;background:#fff!important;color:var(--n-ink)!important}
#panel-draw>button.cloud-btn:hover{border-color:var(--n-ink)!important;background:var(--n-yellow-soft)!important}
/* Organize: quick page actions and accordions */
#panel-organize>div:first-child{padding:16px 16px 6px!important}
#panel-organize>div:first-child button{flex:1;border:2px solid var(--n-line)!important;border-radius:12px!important;padding:9px 6px!important;font-weight:800;color:var(--n-ink);background:#fff}
#panel-organize>div:first-child button:hover{border-color:var(--n-ink)!important;background:var(--n-yellow-soft)!important}
#panel-organize .border-b{border-color:var(--n-line)!important}
#panel-organize .border-b>button{padding:14px 16px!important}
#panel-organize .border-b>button:hover{background:var(--n-yellow-soft)!important}
#panel-organize [id^="acc-"]{background:#faf9fc!important}
#panel-organize .text-blue-600{color:var(--n-red-ink)!important}
/* Shapes: two-column tool tiles fit every label */
#draw-tools{grid-template-columns:repeat(2,minmax(0,1fr))!important}
#draw-tools button{flex-direction:row!important;justify-content:flex-start!important;gap:8px!important;min-height:44px!important;padding:8px 10px!important;font-size:13px!important}
#draw-tools button i{font-size:20px!important}
.drawing-box .apply-style{font-family:var(--n-body)!important;font-weight:800!important;font-size:14px!important;letter-spacing:0!important}
/* Text panel: entry buttons stack when narrow */
.entries-actions{grid-template-columns:repeat(auto-fit,minmax(118px,1fr))!important}
/* Page rail: actions wrap instead of clipping */
.thumb-controls{flex-wrap:wrap;gap:0!important}
.thumb-controls button{padding:3px 4px!important}
/* Sliders: chunky Nouns thumb on a soft track (the base page uses custom webkit sliders) */
input[type=range]::-webkit-slider-runnable-track{height:6px!important;background:var(--n-line)!important;border-radius:6px!important}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px!important;height:20px!important;margin-top:-7px!important;border-radius:50%!important;background:var(--n-yellow)!important;border:2px solid var(--n-ink)!important;box-shadow:0 2px 0 var(--n-ink)!important;cursor:grab}
input[type=range]::-moz-range-track{height:6px;background:var(--n-line);border-radius:6px}
input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--n-yellow);border:2px solid var(--n-ink);box-shadow:0 2px 0 var(--n-ink);cursor:grab}

/* Destructive secondary: outlined in noggles red */
#panels-container button[onclick="removeWatermark()"]{background:#fff!important;color:var(--n-red-ink)!important;border:2px solid var(--n-red-ink)!important;border-radius:999px!important;font-family:var(--n-body);font-weight:800;font-size:14px!important;padding:9px 0!important}
#panels-container button[onclick="removeWatermark()"]:hover{background:var(--n-red-soft)!important}
/* Shapes tool tiles: icon above label so long labels (Rectangle, Rounded) always fit */
#draw-tools button{flex-direction:column!important;justify-content:center!important;align-items:center!important;gap:3px!important;min-height:60px!important;padding:8px 6px!important;font-size:12.5px!important;min-width:0}
#draw-tools button span{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#draw-tools button i{font-size:22px!important}
/* Install + Noggles links */
#install-app[hidden]{display:none!important}
.noggles-link{display:none!important;text-decoration:none}
@media (max-width:1180px){.noggles-link{display:inline-flex!important}}
.noggles-credit{color:var(--n-red-ink);font-weight:800;text-decoration:none}
.noggles-credit:hover{text-decoration:underline}