:root{--font-sans:"Inter", system-ui, sans-serif;--font-arabic:"Amiri", "Traditional Arabic", serif;--color-bg:#f9f9fb;--color-surface:#fff;--color-border:#e4e4e8;--color-border-light:#f0f0f4;--color-text-primary:#1a1a2e;--color-text-secondary:#6b6b80;--color-text-tertiary:#a0a0b0;--color-accent:#4f46e5;--color-accent-soft:#eef2ff;--rem-xs:11px;--rem-sm:13px;--rem-base:14px;--rem-md:15px;--radius-sm:6px;--radius-md:10px;--radius-lg:14px;--radius-xl:18px;--shadow-sm:0 1px 4px #0000000f;--shadow-md:0 4px 20px #0000001a;--color-background-secondary:#f5f5f8;--color-background-primary:var(--color-surface);--color-background-info:#eff6ff;--color-text-info:#1d4ed8;--color-border-info:#93c5fd;--color-border-tertiary:var(--color-border-light);--color-border-secondary:var(--color-border);--border-radius-md:var(--radius-md);--border-radius-lg:var(--radius-lg)}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{height:100%}body{font-family:var(--font-sans);background:var(--color-bg);color:var(--color-text-primary);flex-direction:column;min-height:100vh;display:flex;overflow-y:auto}.topbar{background:var(--color-surface);border-bottom:1px solid var(--color-border);z-index:100;flex-shrink:0;align-items:center;gap:8px;height:54px;padding:0 10px;display:flex;position:relative}.topbar-logo{color:var(--color-text-primary);white-space:nowrap;align-items:center;gap:8px;font-size:15px;font-weight:600;display:flex}.topbar-logo .title-full{display:inline}.topbar-logo .title-short{display:none}.topbar-logo svg{color:var(--color-accent)}.topbar-btn{border:1px solid var(--color-border);cursor:pointer;background:var(--color-surface);white-space:nowrap;color:var(--color-text-primary);border-radius:6px;align-items:center;gap:4px;padding:6px 12px;font-size:13px;transition:background .15s;display:inline-flex}.topbar-btn:hover{background:var(--color-bg)}.topbar-btn-accent{background:var(--color-accent-soft);color:var(--color-accent)}.topbar-btn-label{display:inline}.surah-select{border:1px solid var(--color-border);border-radius:var(--radius-sm);height:28px;font-family:inherit;font-size:var(--rem-sm);background:var(--color-bg);color:var(--color-text-primary);cursor:pointer;min-width:132px;padding:0 5px}.surah-select:focus{outline:2px solid var(--color-accent);outline-offset:1px}.topbar-info{font-size:var(--rem-xs);color:var(--color-text-tertiary);margin-left:auto}.status-pill{font-size:var(--rem-xs);color:#166534;background:#f0fdf4;border:1px solid #bbf7d0;border-radius:99px;align-items:center;gap:5px;padding:3px 10px;display:inline-flex}.status-pill.loading{color:#92400e;background:#fffbeb;border-color:#fde68a}.status-pill.error{color:#991b1b;background:#fef2f2;border-color:#fecaca}.dot-live{background:#22c55e;border-radius:50%;width:7px;height:7px;animation:2s infinite pulse}@keyframes pulse{0%,to{opacity:1}50%{opacity:.4}}.layout{flex:1;display:flex;overflow:hidden}.quran-pane{background:var(--color-surface);border-right:1px solid var(--color-border);width:100%;height:100%;padding:8px;overflow-y:auto}.surah-header{text-align:center;margin-bottom:28px}.surah-name-ar{font-family:var(--font-arabic);font-size:calc(var(--app-font-size) * 2.2);color:var(--color-text-primary);margin-bottom:4px}.surah-meta{font-size:calc(var(--app-font-size) - 4px);color:var(--color-text-secondary);letter-spacing:.04em;text-transform:uppercase}.verse-block{border:1px solid var(--color-border-light);border-radius:var(--radius-md);background:var(--color-surface);margin-bottom:12px;padding:12px;transition:all .2s}.verse-block:hover{border-color:var(--color-border);box-shadow:0 2px 8px #0000000a}.verse-block.active-verse{background:#fafafe;border-color:#c7d2fe;box-shadow:0 4px 12px #4f46e514}.verse-num{font-size:calc(var(--app-font-size) - 3px);color:var(--color-text-tertiary);letter-spacing:.03em;margin-bottom:12px;font-weight:600}.verse-arabic{direction:rtl;flex-wrap:wrap;justify-content:flex-end;align-items:flex-start;gap:8px 4px;margin-bottom:16px;display:flex}.word-unit{cursor:pointer;-webkit-user-select:none;user-select:none;border:1px solid #0000;border-radius:8px;flex-direction:column;align-items:center;min-width:44px;padding:6px 8px;transition:all .15s cubic-bezier(.4,0,.2,1);display:flex}.word-unit:hover{background:#f5f7ff;border-color:#d1d5db;transform:translateY(-1px)}.word-unit.active{background:var(--color-accent);border-color:var(--color-accent);box-shadow:0 4px 10px #4f46e54d}.word-unit.active .wu-ar{color:#fff}.word-unit.active .wu-id{color:#ffffffe6}.word-unit.no-syarah{cursor:default;opacity:.7}.word-unit.no-syarah:hover{background:0 0;border-color:#0000;transform:none}.wu-ar{font-family:var(--font-arabic);font-size:calc(var(--app-font-size) + 10px);color:var(--color-text-primary);text-align:center;white-space:nowrap;line-height:1.5}.wu-id{font-family:var(--font-sans);font-size:calc(var(--app-font-size) - 4px);color:var(--color-text-secondary);text-align:center;word-wrap:break-word;max-width:100px;margin-top:4px;font-weight:500;line-height:1.3}.verse-translation{font-size:var(--app-font-size);color:#334155;border-left:3px solid #f1f5f9;margin-top:14px;padding:0 4px 0 12px;line-height:1.8}.irab-content{padding:8x;border-top:1px dashed var(--color-border-light);font-family:var(--font-arabic);font-size:calc(var(--app-font-size) + 4px);color:var(--color-text-primary);direction:rtl;background:#fafafb;border-radius:8px;margin-top:16px;line-height:2;display:none}.irab-content .hlt .qpc-hafs{color:#b45309;font-weight:700;font-family:var(--font-arabic)!important}.irab-content p{margin-bottom:12px}.verse-trans-source{color:var(--color-text-tertiary);text-transform:uppercase;margin-bottom:4px;font-size:10px;font-weight:600}.syarah-pane{background:var(--color-bg);flex:1;padding:8px;overflow-y:auto}.empty-state{height:100%;color:var(--color-text-tertiary);text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:12px;display:flex}.empty-icon{opacity:.3;font-size:48px}.empty-title{font-size:var(--rem-md);color:var(--color-text-secondary);font-weight:600}.empty-sub{font-size:var(--rem-sm);max-width:280px;line-height:1.6}.wrap{max-width:680px;padding-bottom:2rem}.header-card{background:var(--color-background-secondary);border:.5px solid var(--color-border-secondary);border-radius:var(--border-radius-lg);padding:12px 12p;margin-bottom:8px}.arabic-big{font-family:var(--font-arabic);color:var(--color-text-primary);direction:rtl;font-size:36px;font-weight:500;line-height:1.5}.meta-row{flex-wrap:wrap;gap:8px;margin-top:10px;display:flex}.badge{border-radius:var(--border-radius-md);border:.5px solid var(--color-border-secondary);color:var(--color-text-secondary);background:var(--color-background-primary);padding:3px 10px;font-size:12px}.badge.blue{color:#0c447c;background:#e6f1fb;border-color:#85b7eb}.badge.teal{color:#085041;background:#e1f5ee;border-color:#5dcaa5}.badge.amber{color:#633806;background:#faeeda;border-color:#ef9f27}.badge.purple{color:#3c3489;background:#eeedfe;border-color:#afa9ec}.layer{border:.5px solid var(--color-border-tertiary);border-radius:var(--border-radius-lg);background:var(--color-background-primary);margin-bottom:1rem;overflow:hidden}.layer-header{border-bottom:.5px solid var(--color-border-tertiary);cursor:pointer;background:var(--color-background-primary);-webkit-user-select:none;user-select:none;align-items:center;gap:10px;padding:.85rem 1.25rem;display:flex}.layer-header:hover{background:var(--color-background-secondary)}.layer-num{border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:24px;height:24px;font-size:12px;font-weight:500;display:flex}.num-blue{color:#0c447c;background:#e6f1fb}.num-teal{color:#085041;background:#e1f5ee}.num-amber{color:#633806;background:#faeeda}.num-purple{color:#3c3489;background:#eeedfe}.num-coral{color:#712b13;background:#faece7}.layer-title{color:var(--color-text-primary);flex:1;font-size:14px;font-weight:500}.layer-sub{color:var(--color-text-secondary);font-size:12px}.chevron{color:var(--color-text-tertiary);font-size:12px;transition:transform .2s}.chevron.open{transform:rotate(90deg)}.layer-body{padding:12px;display:none}.layer-body.open{display:block}.section-label{letter-spacing:.06em;color:var(--color-text-tertiary);text-transform:uppercase;margin-top:1rem;margin-bottom:6px;font-size:11px;font-weight:500}.section-label:first-child{margin-top:0}.content-text{color:var(--color-text-primary);font-size:14px;line-height:1.8}.arabic-inline{font-family:var(--font-arabic);color:var(--color-text-primary);direction:rtl;font-size:18px}.source-chip{border-radius:var(--border-radius-md);background:var(--color-background-info);color:var(--color-text-info);border:.5px solid var(--color-border-info);margin-right:4px;padding:2px 8px;font-size:11px;display:inline-block}.wazan-table{border-collapse:collapse;width:100%;margin-top:8px;font-size:13px}.wazan-table th{text-align:left;color:var(--color-text-secondary);border-bottom:.5px solid var(--color-border-tertiary);padding:6px 10px;font-weight:500}.wazan-table td{border-bottom:.5px solid var(--color-border-tertiary);color:var(--color-text-primary);vertical-align:top;padding:7px 10px}.wazan-table tr.highlight td{background:#faeeda44}.wazan-table tr:last-child td{border-bottom:none}.arabic-cell{font-family:var(--font-arabic);text-align:right;direction:rtl;font-size:17px}.sharf-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin-top:8px;display:grid}.sharf-item{background:var(--color-background-secondary);border:.5px solid var(--color-border-tertiary);border-radius:var(--border-radius-md);padding:8px 12px}.sharf-label{color:var(--color-text-tertiary);margin-bottom:3px;font-size:11px}.sharf-val{font-family:var(--font-arabic);color:var(--color-text-primary);direction:rtl;font-size:17px}.quote-block{border-radius:0 var(--border-radius-md) var(--border-radius-md) 0;color:var(--color-text-primary);background:#e6f1fb44;border-left:2.5px solid #85b7eb;margin:8px 0;padding:8px;font-size:13px;line-height:1.75}.quote-source{color:var(--color-text-secondary);margin-top:4px;font-size:11px}.balagha-box{border-radius:var(--border-radius-md);color:var(--color-text-primary);background:#eeedfe44;border:.5px solid #afa9ec;margin-top:8px;padding:10px 14px;font-size:13px;line-height:1.8}.hikmah-label{color:#3c3489;margin-bottom:4px;font-size:11px;font-weight:500}.syarah-row{align-items:flex-start;gap:10px;margin-top:8px;display:flex}.dot{background:#7f77dd;border-radius:50%;flex-shrink:0;width:6px;height:6px;margin-top:7px}.arti-big{color:var(--color-text-primary);margin-top:4px;margin-bottom:2px;font-size:18px;font-weight:500}.arti-sub{color:var(--color-text-secondary);font-size:13px}.md-preview{font-family:var(--font-sans);color:var(--color-text-primary);word-break:break-word;line-height:1.7}.md-preview h1,.md-preview h2,.md-preview h3,.md-preview h4{color:var(--color-text-primary);margin-top:1.5em;margin-bottom:.75em;font-weight:700;line-height:1.3}.md-preview h1{border-bottom:2px solid var(--color-border-light);padding-bottom:.3em;font-size:1.8rem}.md-preview h2{border-bottom:1px solid var(--color-border-light);padding-bottom:.2em;font-size:1.5rem}.md-preview h3{font-size:1.25rem}.md-preview p{margin-bottom:1em}.md-preview ul,.md-preview ol{margin-bottom:1em;padding-left:1.5em}.md-preview li{margin-bottom:.5em}.md-preview li>ul,.md-preview li>ol{margin-top:.5em}.md-preview blockquote{border-left:4px solid var(--color-accent);background:var(--color-accent-soft);border-radius:0 var(--radius-md) var(--radius-md) 0;color:var(--color-text-secondary);margin:1.5rem 0;padding:1rem 1.5rem;font-style:italic}.md-preview code{color:#e83e8c;background:#f1f1f4;border-radius:4px;padding:.2em .4em;font-family:JetBrains Mono,Fira Code,monospace;font-size:.9em}.md-preview pre{color:#cdd6f4;border-radius:var(--radius-md);box-shadow:var(--shadow-md);background:#1e1e2e;margin:1.5rem 0;padding:1.25rem;font-family:JetBrains Mono,monospace;font-size:.9rem;line-height:1.5;overflow-x:auto}.md-preview pre code{color:inherit;font-size:inherit;background:0 0;padding:0}.md-preview table{border-collapse:collapse;border-radius:var(--radius-md);width:100%;box-shadow:0 0 0 1px var(--color-border);margin:1.5rem 0;font-size:.95rem;overflow:hidden}.md-preview th{background:var(--color-background-secondary);text-align:left;border-bottom:2px solid var(--color-border);padding:.75rem 1rem;font-weight:600}.md-preview td{border-bottom:1px solid var(--color-border-light);padding:.75rem 1rem}.md-preview tr:last-child td{border-bottom:none}.md-preview tr:hover td{background:var(--color-bg)}.md-preview img{border-radius:var(--radius-md);max-width:100%;height:auto;margin:1.5rem 0}.md-preview hr{background:var(--color-border);border:0;height:1px;margin:2rem 0}.md-preview a{color:var(--color-accent);border-bottom:1px solid #0000;text-decoration:none;transition:all .2s}.md-preview a:hover{border-bottom-color:var(--color-accent)}.md-preview pre::-webkit-scrollbar{height:6px}.md-preview pre::-webkit-scrollbar-thumb{background:#45475a}.html-source-view{color:#334155;white-space:pre-wrap;word-break:break-all;background:#f8fafc;padding:20px;font-family:JetBrains Mono,monospace;font-size:13px;line-height:1.6}.premium-select{appearance:none;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236B6B80'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");background-position:right 8px center;background-repeat:no-repeat;background-size:14px;transition:all .2s;padding-right:28px!important}.premium-select:hover{border-color:var(--color-accent)}.premium-select:focus{box-shadow:0 0 0 3px var(--color-accent-soft);outline:none}.spinner-wrap{justify-content:center;align-items:center;padding:40px;display:flex}.spinner{border:2.5px solid var(--color-border);border-top-color:var(--color-accent);border-radius:50%;width:28px;height:28px;animation:.7s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--color-border);border-radius:99px}.col-resizer{z-index:5;background:var(--color-border);cursor:col-resize;flex-shrink:0;width:6px;transition:background .15s;position:relative}.col-resizer:hover,.col-resizer.dragging{background:var(--color-accent)}.col-resizer:after{content:"";background:#00000026;border-radius:2px;width:2px;height:32px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.col-resizer:hover:after,.col-resizer.dragging:after{background:#fff9}.status-pill .pill-label{display:inline}@media (width<=900px){.quran-pane{border-right:none;border-bottom:1px solid var(--color-border)}.status-pill .pill-label{display:none}}@media (width<=480px){.topbar-logo .title-full{display:none}.topbar-logo .title-short{display:inline}.topbar-btn-label{display:none}.topbar-btn{padding:6px 8px}.tafsir-book-btn{max-width:150px}}.word-highlight-active{background:linear-gradient(135deg,#fef3c7,#fde68a)!important;border-color:#f59e0b!important;transition:all .12s cubic-bezier(.4,0,.2,1)!important;transform:translateY(-2px)scale(1.03)!important;box-shadow:0 0 12px #f59e0b4d!important}.word-highlight-active .wu-ar{color:#92400e!important}.word-highlight-active .wu-id{color:#b45309!important}.word-unit.active.word-highlight-active{outline-offset:2px;outline:3px solid var(--color-accent)!important;background:linear-gradient(135deg,#fef3c7,#fde68a)!important;box-shadow:0 0 12px #f59e0b4d,0 0 0 6px #4f46e526!important}.topbar-audio-btn{border:1.5px solid var(--color-border);background:var(--color-surface);cursor:pointer;min-width:28px;height:28px;color:var(--color-text-secondary);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;padding:0 4px;font-size:12px;transition:all .15s;display:inline-flex}.topbar-audio-btn:hover{background:var(--color-accent);color:#fff;border-color:var(--color-accent)}.topbar-audio-btn.playing{color:#fff;background:#ef4444;border-color:#ef4444;animation:1.5s ease-in-out infinite pulse-audio}.topbar-audio-btn.loading{background:var(--color-accent);color:#fff;border-color:var(--color-accent);cursor:wait;border-radius:14px;padding:0 8px;font-size:10px;font-weight:700}@keyframes pulse-audio{0%,to{box-shadow:0 0 #ef444466}50%{box-shadow:0 0 0 6px #ef444400}}.irab-trans-toggles button{color:#7a7060;cursor:pointer;white-space:nowrap;background:0 0;border:none;border-radius:12px;padding:4px 14px;font-size:12px;font-weight:500;transition:all .15s}.irab-trans-toggles button:hover{background:#5c70601a}.irab-trans-toggles button.active{color:#fff;background:#5c7060;box-shadow:0 1px 3px #0000001f}.irab-lit-text{color:#4a4438;font-family:JetBrains Mono,monospace;font-size:12.5px;line-height:1.8}.irab-id-text{color:#2c2820;font-family:Lora,Georgia,serif;font-size:14px;line-height:1.75}.irab-trans-divider{border-top:1px dashed #c8c0b0;margin:8px 0}.kw-ar{color:#5c7060;font-family:Amiri,Traditional Arabic,serif}.kw-id{color:#b8935a;font-style:italic}.print-overlay{z-index:9999;background:#464650;flex-direction:column;display:flex;position:fixed;inset:0;overflow:hidden}.print-toolbar{background:#fff;border-bottom:1px solid #e2e8f0;flex-wrap:wrap;flex-shrink:0;justify-content:space-between;align-items:center;gap:8px;padding:10px 20px;display:flex}.print-toolbar-close{cursor:pointer;color:#64748b;background:#fff;border:1px solid #e2e8f0;border-radius:8px;justify-content:center;align-items:center;width:32px;height:32px;font-size:16px;transition:all .15s;display:flex}.print-toolbar-close:hover{color:#dc2626;background:#fee2e2;border-color:#fecaca}.print-tabs{background:#f1f5f9;border-radius:8px;padding:2px;display:flex}.print-tabs button{color:#64748b;cursor:pointer;white-space:nowrap;background:0 0;border:none;border-radius:6px;padding:5px 14px;font-size:12px;font-weight:600;transition:all .15s}.print-tabs button.active{color:#4f46e5;background:#fff;box-shadow:0 1px 3px #0000001a}.print-btn-action{color:#fff;cursor:pointer;white-space:nowrap;background:#4f46e5;border:none;border-radius:8px;padding:6px 16px;font-size:13px;font-weight:600;transition:background .15s}.print-btn-action:hover{background:#4338ca}.print-paper-wrap{flex:1;align-items:flex-start;padding:32px 16px;display:flex;overflow-y:auto}.print-a4{color:#1e293b;background:#fff;width:210mm;min-height:297mm;margin:0 auto;padding:24mm 20mm 20mm;font-family:Inter,Segoe UI,sans-serif;font-size:12px;line-height:1.65;position:relative;box-shadow:0 4px 24px #0000004d}.print-header{text-align:center;border-bottom:2px solid #e2e8f0;margin-bottom:24px;padding-bottom:16px}.print-header-title{color:#1e293b;letter-spacing:.5px;font-size:20px;font-weight:700}.print-header-meta{color:#64748b;margin-top:4px;font-size:12px}.print-section{margin-bottom:24px}.print-section-title{color:#4c1d95;border-bottom:1px solid #ede9fe;margin:0 0 12px;padding-bottom:6px;font-size:14px;font-weight:700}.print-body{font-size:12px;line-height:1.7}.print-body p{margin-bottom:10px}.print-body h2{color:#1e293b;margin:20px 0 8px;font-size:14px;font-weight:700}.print-body .arabic,.print-body .ar,.print-body .quran,.print-body [lang=ar]{color:#0f172a;direction:rtl;margin:10px 0;font-family:Amiri,serif;font-size:16px;line-height:2;display:block}.print-body sup{vertical-align:super;color:#7c3aed;font-size:.7em;font-weight:700}.print-table{border-collapse:collapse;width:100%;margin:12px 0;font-size:12px}.print-table td{vertical-align:top;border-bottom:1px solid #f1f5f9;padding:6px 10px}.print-table td:first-child{color:#64748b;width:100px;font-size:11px}.print-footer{text-align:center;color:#94a3b8;border-top:1px solid #f1f5f9;padding-top:8px;font-size:9px;position:absolute;bottom:12mm;left:20mm;right:20mm}.print-content{min-height:200px}@media print{html,body,#root{height:auto!important;min-height:100%!important;overflow:visible!important}body *{visibility:hidden}.print-overlay,.print-overlay *{visibility:visible}.print-overlay{background:#fff!important;width:100%!important;height:auto!important;min-height:auto!important;display:block!important;position:absolute!important;top:0!important;left:0!important;overflow:visible!important}.print-paper-wrap{height:auto!important;min-height:auto!important;padding:0!important;display:block!important;overflow:visible!important}.print-a4{width:100%!important;height:auto!important;min-height:auto!important;box-shadow:none!important;margin:0!important;padding:0!important;position:relative!important;top:auto!important;left:auto!important;overflow:visible!important}.no-print,.print-toolbar{display:none!important}.print-content,.print-section,.print-body{page-break-inside:auto;break-inside:auto}.print-section-title,.print-header{page-break-after:avoid;break-after:avoid}.print-table,.print-table tr,.verse-block,.layer{page-break-inside:avoid;break-inside:avoid}.print-footer{padding-bottom:10mm;position:fixed!important;bottom:0!important;left:0!important;right:0!important}}@page{size:A4;margin:20mm}@media (width<=480px){.print-a4{width:100%;min-height:auto;box-shadow:none;padding:16px}.print-paper-wrap{padding:0}.print-toolbar{padding:8px 12px}.print-tabs button{padding:4px 8px;font-size:11px}}.pickr{position:relative;overflow:visible;transform:translateY(0)}.pickr *{box-sizing:border-box;-webkit-appearance:none;border:none;outline:none}.pickr .pcr-button{cursor:pointer;background:url("data:image/svg+xml;utf8, <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 50 50\" stroke=\"%2342445A\" stroke-width=\"5px\" stroke-linecap=\"round\"><path d=\"M45,45L5,5\"></path><path d=\"M45,5L5,45\"></path></svg>") 50%/0 no-repeat;border-radius:.15em;width:2em;height:2em;padding:.5em;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;transition:all .3s;position:relative}.pickr .pcr-button:before{content:"";z-index:-1;width:100%;height:100%;z-index:initial;background:url("data:image/svg+xml;utf8, <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 2 2\"><path fill=\"white\" d=\"M1,0H2V1H1V0ZM0,1H1V2H0V1Z\"/><path fill=\"gray\" d=\"M0,0H1V1H0V0ZM1,1H2V2H1V1Z\"/></svg>") 0 0/.5em;border-radius:.15em;position:absolute;top:0;left:0}.pickr .pcr-button:after{content:"";background:var(--pcr-color);border-radius:.15em;width:100%;height:100%;transition:background .3s;position:absolute;top:0;left:0}.pickr .pcr-button.clear{background-size:70%}.pickr .pcr-button.clear:before{opacity:0}.pickr .pcr-button.clear:focus{box-shadow:0 0 0 1px #ffffffd9,0 0 0 3px var(--pcr-color)}.pickr .pcr-button.disabled{cursor:not-allowed}.pickr *,.pcr-app *{box-sizing:border-box;-webkit-appearance:none;border:none;outline:none}.pickr input:focus,.pickr input.pcr-active,.pickr button:focus,.pickr button.pcr-active,.pcr-app input:focus,.pcr-app input.pcr-active,.pcr-app button:focus,.pcr-app button.pcr-active{box-shadow:0 0 0 1px #ffffffd9,0 0 0 3px var(--pcr-color)}.pickr .pcr-palette,.pickr .pcr-slider,.pcr-app .pcr-palette,.pcr-app .pcr-slider{transition:box-shadow .3s}.pickr .pcr-palette:focus,.pickr .pcr-slider:focus,.pcr-app .pcr-palette:focus,.pcr-app .pcr-slider:focus{box-shadow:0 0 0 1px #ffffffd9,0 0 0 3px #00000040}.pcr-app{z-index:10000;opacity:0;visibility:hidden;background:#fff;border-radius:.1em;flex-direction:column;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;transition:opacity .3s,visibility 0s .3s;display:flex;position:fixed;top:0;left:0;box-shadow:0 .15em 1.5em #0000001a,0 0 1em #00000008}.pcr-app.visible{visibility:visible;opacity:1;transition:opacity .3s}.pcr-app .pcr-swatches{flex-wrap:wrap;margin-top:.75em;display:flex}.pcr-app .pcr-swatches.pcr-last{margin:0}@supports (display:grid){.pcr-app .pcr-swatches{grid-template-columns:repeat(auto-fit,1.75em);align-items:center;display:grid}}.pcr-app .pcr-swatches>button{cursor:pointer;z-index:1;background:0 0;border-radius:.15em;flex-shrink:0;justify-self:center;width:calc(1.75em - 5px);height:calc(1.75em - 5px);margin:2.5px;font-size:1em;transition:all .15s;position:relative;overflow:hidden}.pcr-app .pcr-swatches>button:before{content:"";z-index:-1;background:url("data:image/svg+xml;utf8, <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 2 2\"><path fill=\"white\" d=\"M1,0H2V1H1V0ZM0,1H1V2H0V1Z\"/><path fill=\"gray\" d=\"M0,0H1V1H0V0ZM1,1H2V2H1V1Z\"/></svg>") 0 0/6px;border-radius:.15em;width:100%;height:100%;position:absolute;top:0;left:0}.pcr-app .pcr-swatches>button:after{content:"";background:var(--pcr-color);box-sizing:border-box;border:1px solid #0000000d;border-radius:.15em;width:100%;height:100%;position:absolute;top:0;left:0}.pcr-app .pcr-swatches>button:hover{filter:brightness(1.05)}.pcr-app .pcr-swatches>button:not(.pcr-active){box-shadow:none}.pcr-app .pcr-interaction{flex-wrap:wrap;align-items:center;margin:0 -.2em;display:flex}.pcr-app .pcr-interaction>*{margin:0 .2em}.pcr-app .pcr-interaction input{letter-spacing:.07em;text-align:center;cursor:pointer;color:#75797e;background:#f1f3f4;border-radius:.15em;margin-top:.75em;padding:.45em .5em;font-size:.75em;transition:all .15s}.pcr-app .pcr-interaction input:hover{filter:brightness(.975)}.pcr-app .pcr-interaction input:focus{box-shadow:0 0 0 1px #ffffffd9,0 0 0 3px #4285f4bf}.pcr-app .pcr-interaction .pcr-result{color:#75797e;text-align:left;cursor:text;background:#f1f3f4;border-radius:.15em;flex:8em;min-width:8em;transition:all .2s}.pcr-app .pcr-interaction .pcr-result::selection{color:#fff;background:#4285f4}.pcr-app .pcr-interaction .pcr-type.active{color:#fff;background:#4285f4}.pcr-app .pcr-interaction .pcr-save,.pcr-app .pcr-interaction .pcr-cancel,.pcr-app .pcr-interaction .pcr-clear{color:#fff;width:auto}.pcr-app .pcr-interaction .pcr-save:hover,.pcr-app .pcr-interaction .pcr-cancel:hover,.pcr-app .pcr-interaction .pcr-clear:hover{filter:brightness(.925)}.pcr-app .pcr-interaction .pcr-save{background:#4285f4}.pcr-app .pcr-interaction .pcr-clear,.pcr-app .pcr-interaction .pcr-cancel{background:#f44250}.pcr-app .pcr-interaction .pcr-clear:focus,.pcr-app .pcr-interaction .pcr-cancel:focus{box-shadow:0 0 0 1px #ffffffd9,0 0 0 3px #f44250bf}.pcr-app .pcr-selection .pcr-picker{-webkit-user-select:none;user-select:none;border:2px solid #fff;border-radius:100%;width:18px;height:18px;position:absolute}.pcr-app .pcr-selection .pcr-color-palette,.pcr-app .pcr-selection .pcr-color-chooser,.pcr-app .pcr-selection .pcr-color-opacity{-webkit-user-select:none;user-select:none;cursor:grab;cursor:-webkit-grab;flex-direction:column;display:flex;position:relative}.pcr-app .pcr-selection .pcr-color-palette:active,.pcr-app .pcr-selection .pcr-color-chooser:active,.pcr-app .pcr-selection .pcr-color-opacity:active{cursor:grabbing;cursor:-webkit-grabbing}.pcr-app[data-theme=nano]{width:14.25em;max-width:95vw}.pcr-app[data-theme=nano] .pcr-swatches{margin-top:.6em;padding:0 .6em}.pcr-app[data-theme=nano] .pcr-interaction{padding:0 .6em .6em}.pcr-app[data-theme=nano] .pcr-selection{grid-gap:.6em;grid-template-rows:5fr auto auto;grid-template-columns:1fr 4fr;align-self:flex-start;align-items:center;width:100%;height:10.5em;display:grid}.pcr-app[data-theme=nano] .pcr-selection .pcr-color-preview{flex-direction:row;grid-area:2/1/4/1;justify-content:center;width:100%;height:100%;margin-left:.6em;display:flex}.pcr-app[data-theme=nano] .pcr-selection .pcr-color-preview .pcr-last-color{display:none}.pcr-app[data-theme=nano] .pcr-selection .pcr-color-preview .pcr-current-color{background:var(--pcr-color);border-radius:50em;width:2em;height:2em;position:relative;overflow:hidden}.pcr-app[data-theme=nano] .pcr-selection .pcr-color-preview .pcr-current-color:before{content:"";z-index:-1;background:url("data:image/svg+xml;utf8, <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 2 2\"><path fill=\"white\" d=\"M1,0H2V1H1V0ZM0,1H1V2H0V1Z\"/><path fill=\"gray\" d=\"M0,0H1V1H0V0ZM1,1H2V2H1V1Z\"/></svg>") 0 0/.5em;border-radius:.15em;width:100%;height:100%;position:absolute;top:0;left:0}.pcr-app[data-theme=nano] .pcr-selection .pcr-color-palette{z-index:1;grid-area:1/1/2/3;width:100%;height:100%}.pcr-app[data-theme=nano] .pcr-selection .pcr-color-palette .pcr-palette{border-radius:.15em;width:100%;height:100%}.pcr-app[data-theme=nano] .pcr-selection .pcr-color-palette .pcr-palette:before{content:"";z-index:-1;background:url("data:image/svg+xml;utf8, <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 2 2\"><path fill=\"white\" d=\"M1,0H2V1H1V0ZM0,1H1V2H0V1Z\"/><path fill=\"gray\" d=\"M0,0H1V1H0V0ZM1,1H2V2H1V1Z\"/></svg>") 0 0/.5em;border-radius:.15em;width:100%;height:100%;position:absolute;top:0;left:0}.pcr-app[data-theme=nano] .pcr-selection .pcr-color-chooser{grid-area:2/2/2/2}.pcr-app[data-theme=nano] .pcr-selection .pcr-color-opacity{grid-area:3/2/3/2}.pcr-app[data-theme=nano] .pcr-selection .pcr-color-chooser,.pcr-app[data-theme=nano] .pcr-selection .pcr-color-opacity{height:.5em;margin:0 .6em}.pcr-app[data-theme=nano] .pcr-selection .pcr-color-chooser .pcr-picker,.pcr-app[data-theme=nano] .pcr-selection .pcr-color-opacity .pcr-picker{top:50%;transform:translateY(-50%)}.pcr-app[data-theme=nano] .pcr-selection .pcr-color-chooser .pcr-slider,.pcr-app[data-theme=nano] .pcr-selection .pcr-color-opacity .pcr-slider{border-radius:50em;flex-grow:1}.pcr-app[data-theme=nano] .pcr-selection .pcr-color-chooser .pcr-slider{background:linear-gradient(90deg,red,#ff0,#0f0,#0ff,#00f,#f0f,red)}.pcr-app[data-theme=nano] .pcr-selection .pcr-color-opacity .pcr-slider{background:linear-gradient(90deg,#0000,#000) 0 0/100%,url("data:image/svg+xml;utf8, <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 2 2\"><path fill=\"white\" d=\"M1,0H2V1H1V0ZM0,1H1V2H0V1Z\"/><path fill=\"gray\" d=\"M0,0H1V1H0V0ZM1,1H2V2H1V1Z\"/></svg>") 0 0/.25em}.handwriting-container{background:#fdfdfd;border:1px solid #e0e0e0;border-radius:12px;flex-direction:column;width:100%;height:100%;display:flex;position:relative;overflow:hidden;box-shadow:0 4px 20px #00000014}.handwriting-canvas{touch-action:none;cursor:crosshair;flex:1}.handwriting-toolbar{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:1000;background:#fffffff2;border:1px solid #ffffff4d;border-radius:50px;align-items:center;gap:12px;padding:8px 16px;transition:all .3s;display:flex;position:absolute;top:15px;left:50%;transform:translate(-50%);box-shadow:0 8px 32px #0000001f}.toolbar-group{border-right:1px solid #eee;align-items:center;gap:6px;padding-right:12px;display:flex}.toolbar-group:last-child{border-right:none;padding-right:0}.toolbar-btn{cursor:pointer;color:#555;background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;padding:8px;transition:all .2s;display:flex}.toolbar-btn:hover{color:#000;background:#f0f0f0}.toolbar-btn.active{color:#fff;background:#007bff}.quick-palette{gap:6px;display:flex}.palette-item{cursor:pointer;border:2px solid #0000;border-radius:50%;width:24px;height:24px;transition:transform .2s}.palette-item:hover{transform:scale(1.1)}.palette-item.active{border-color:#007bff;transform:scale(1.2)}.settings-dialog{z-index:1001;background:#fff;border:1px solid #eee;border-radius:16px;width:280px;padding:20px;position:absolute;top:70px;left:50%;transform:translate(-50%);box-shadow:0 10px 40px #00000026}.settings-row{margin-bottom:15px}.settings-row label{color:#666;margin-bottom:5px;font-size:12px;font-weight:600;display:block}.settings-row input[type=range]{width:100%}.color-grid{grid-template-columns:repeat(6,1fr);gap:8px;margin-top:10px;display:grid}.color-swatch{aspect-ratio:1;cursor:pointer;border:1px solid #0000000d;border-radius:4px;width:100%}.pickr{margin:0 auto}.handwriting-footer{color:#888;background:#f8f9fa;border-top:1px solid #eee;justify-content:space-between;align-items:center;padding:8px 16px;font-size:12px;display:flex}