:root{--font-xs: clamp(.625rem, .5rem + .3vw, .75rem);--font-sm: clamp(.75rem, .65rem + .3vw, .875rem);--font-base: clamp(.8125rem, .75rem + .3vw, .9375rem);--font-md: clamp(.875rem, .8rem + .35vw, 1rem);--font-lg: clamp(1rem, .9rem + .4vw, 1.25rem);--font-xl: clamp(1.125rem, 1rem + .5vw, 1.5rem);--font-2xl: clamp(1.25rem, 1.1rem + .6vw, 1.75rem);--font-3xl: clamp(1.5rem, 1.3rem + .8vw, 2rem);--font-4xl: clamp(1.875rem, 1.5rem + 1vw, 2.5rem);--space-xs: clamp(.25rem, .2rem + .2vw, .375rem);--space-sm: clamp(.5rem, .4rem + .3vw, .75rem);--space-md: clamp(.75rem, .6rem + .4vw, 1rem);--space-lg: clamp(1rem, .8rem + .5vw, 1.5rem);--space-xl: clamp(1.5rem, 1.2rem + .7vw, 2rem);--space-2xl: clamp(2rem, 1.5rem + 1vw, 3rem);--space-3xl: clamp(2.5rem, 2rem + 1.2vw, 3.5rem);--radius-sm: clamp(.5rem, .4rem + .2vw, .625rem);--radius-md: clamp(.75rem, .6rem + .3vw, 1rem);--radius-lg: clamp(1rem, .85rem + .4vw, 1.375rem);--radius-xl: clamp(1.25rem, 1rem + .5vw, 1.75rem);--radius-2xl: clamp(1.5rem, 1.2rem + .7vw, 2rem);--icon-xs: clamp(.875rem, .75rem + .3vw, 1rem);--icon-sm: clamp(1rem, .9rem + .3vw, 1.25rem);--icon-md: clamp(1.25rem, 1.1rem + .4vw, 1.5rem);--icon-lg: clamp(1.5rem, 1.3rem + .5vw, 2rem);--icon-xl: clamp(2rem, 1.75rem + .6vw, 2.5rem);--card-padding: clamp(1rem, .8rem + .5vw, 1.5rem);--modal-padding: clamp(1.25rem, 1rem + .6vw, 1.875rem);--button-padding-x: clamp(.875rem, .75rem + .35vw, 1.125rem);--button-padding-y: clamp(.5rem, .45rem + .25vw, .75rem);--grid-gap: clamp(.875rem, .75rem + .4vw, 1.375rem);--section-gap: clamp(1.5rem, 1.2rem + .7vw, 2.25rem);--scale-factor: 1}@media (min-width: 1024px) and (max-width: 1440px){:root{--scale-factor: .9}}@media (min-width: 1441px) and (max-width: 1920px){:root{--scale-factor: 1}}@media (min-width: 1921px) and (max-width: 2560px){:root{--scale-factor: 1.1}}@media (min-width: 2561px){:root{--scale-factor: 1.2}}.text-xs{font-size:var(--font-xs)}.text-sm{font-size:var(--font-sm)}.text-base{font-size:var(--font-base)}.text-md{font-size:var(--font-md)}.text-lg{font-size:var(--font-lg)}.text-xl{font-size:var(--font-xl)}.text-2xl{font-size:var(--font-2xl)}.text-3xl{font-size:var(--font-3xl)}.text-4xl{font-size:var(--font-4xl)}.gap-xs{gap:var(--space-xs)}.gap-sm{gap:var(--space-sm)}.gap-md{gap:var(--space-md)}.gap-lg{gap:var(--space-lg)}.gap-xl{gap:var(--space-xl)}.p-xs{padding:var(--space-xs)}.p-sm{padding:var(--space-sm)}.p-md{padding:var(--space-md)}.p-lg{padding:var(--space-lg)}.p-xl{padding:var(--space-xl)}.responsive-grid{display:grid;gap:var(--grid-gap)}.grid-auto-fit{grid-template-columns:repeat(auto-fit,minmax(min(100%,var(--min-col-width, 280px)),1fr))}.grid-auto-fill{grid-template-columns:repeat(auto-fill,minmax(min(100%,var(--min-col-width, 280px)),1fr))}.grid-2-col{grid-template-columns:repeat(auto-fit,minmax(min(100%,350px),1fr))}.grid-3-col{grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}.grid-4-col{grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}.container-responsive{container-type:inline-size;container-name:responsive-container}@container responsive-container (max-width: 600px){.pattern-card{min-width:100%}}@container responsive-container (min-width: 601px) and (max-width: 900px){.pattern-card{min-width:calc(50% - var(--grid-gap))}}@container responsive-container (min-width: 901px){.pattern-card{min-width:calc(33.333% - var(--grid-gap))}}.vw-size-sm{width:clamp(200px,20vw,400px)}.vw-size-md{width:clamp(300px,40vw,600px)}.vw-size-lg{width:clamp(400px,60vw,900px)}.vw-size-xl{width:clamp(600px,80vw,1200px)}.vw-size-full{width:clamp(800px,95vw,1600px)}.modal-responsive{width:clamp(320px,90vw,800px);max-height:clamp(400px,85vh,900px);padding:var(--modal-padding);border-radius:var(--radius-xl)}.modal-responsive.modal-lg{width:clamp(480px,92vw,1200px)}.modal-responsive.modal-xl{width:clamp(600px,95vw,1400px)}.modal-responsive.modal-full{width:clamp(800px,98vw,1800px);max-height:95vh}h1,.h1{font-size:var(--font-4xl)}h2,.h2{font-size:var(--font-3xl)}h3,.h3{font-size:var(--font-2xl)}h4,.h4{font-size:var(--font-xl)}h5,.h5{font-size:var(--font-lg)}h6,.h6{font-size:var(--font-md)}body,.body{font-size:var(--font-base)}small,.small{font-size:var(--font-sm)}.tiny{font-size:var(--font-xs)}.btn-responsive{padding:var(--button-padding-y) var(--button-padding-x);font-size:var(--font-base);border-radius:var(--radius-md)}.btn-responsive.btn-sm{padding:calc(var(--button-padding-y) * .75) calc(var(--button-padding-x) * .75);font-size:var(--font-sm)}.btn-responsive.btn-lg{padding:calc(var(--button-padding-y) * 1.25) calc(var(--button-padding-x) * 1.5);font-size:var(--font-md)}@media (max-width: 1440px){body{font-size:13px}.hide-on-small-screen{display:none}}@media (min-width: 1921px){body{font-size:15px}.show-only-large{display:block}}@supports (zoom: 1){@media (min-width: 1921px) and (max-width: 2560px){html{zoom:1.05}}@media (min-width: 2561px){html{zoom:1.1}}}.density-compact{--space-xs: .25rem;--space-sm: .5rem;--space-md: .75rem;--space-lg: 1rem;--space-xl: 1.25rem}.density-comfortable{--space-xs: .5rem;--space-sm: .875rem;--space-md: 1.25rem;--space-lg: 1.75rem;--space-xl: 2.25rem}@media print{:root{--font-base: 10pt;--font-sm: 9pt;--font-lg: 12pt}.no-print{display:none!important}}:root,:root.theme-light{--transition-speed: .35s;--accent-color:#3b82f6;--accent-color-hover:#2563eb;--danger-color:#dc2626;--danger-color-hover:#b91c1c;--surface:#1d1f24;--surface-alt:#23262d;--border-color:#2d3038;--text-color:#f1f5f9;--text-dim:#94a3b8;--radius:clamp(4px, .4vw, 6px);--gradient-primary: linear-gradient(135deg, #6366f1, #8b5cf6, #ec4899);--gradient-primary-hover: linear-gradient(135deg, #818cf8, #a78bfa, #f472b6);--gradient-border: linear-gradient(135deg, rgba(99,102,241,.5), rgba(139,92,246,.4), rgba(236,72,153,.4));--shadow-primary: 0 4px 14px -4px rgba(99,102,241,.45);--shadow-primary-hover: 0 6px 18px -6px rgba(99,102,241,.55);--modal-radius: 24px;--modal-border: 1px solid rgba(255, 255, 255, .1);--modal-bg: rgba(22, 24, 30, .96)}html,body{margin:0;padding:0;font-family:system-ui,Segoe UI,Roboto,Arial,sans-serif;background:#121417;color:var(--text-color);font-size:clamp(13px,.85vw,15px)}*{box-sizing:border-box}body,.app-wrapper,.topbar,.card,.modal,.sub-nav,.footer{transition:background var(--transition-speed) ease,color var(--transition-speed) ease,border-color var(--transition-speed) ease}.pro-btn{appearance:none;border:1px solid var(--border-color);background:var(--surface-alt);color:var(--text-color);padding:clamp(5px,.4vw,6px) clamp(12px,1vw,14px);font-size:clamp(12px,.85vw,13px);border-radius:var(--radius);cursor:pointer;line-height:1.2;display:inline-flex;align-items:center;gap:clamp(5px,.4vw,6px);font-weight:500;position:relative}.pro-btn.small{padding:clamp(3px,.3vw,4px) clamp(8px,.7vw,10px);font-size:clamp(11px,.75vw,12px)}.pro-btn.tiny{padding:clamp(2px,.25vw,3px) clamp(6px,.6vw,8px);font-size:clamp(10px,.7vw,11px)}.pro-btn.compact{padding:clamp(3px,.3vw,4px) clamp(8px,.7vw,10px);font-size:clamp(11px,.75vw,12px)}.pro-btn svg{width:clamp(14px,1vw,16px);height:clamp(14px,1vw,16px);stroke:currentColor}.pro-btn.primary{background:var(--gradient-primary);border-color:transparent;color:#fff;box-shadow:var(--shadow-primary);border-radius:14px}.pro-btn.primary:hover{background:var(--gradient-primary-hover);box-shadow:var(--shadow-primary-hover)}.pro-btn.danger{background:var(--danger-color);border-color:var(--danger-color);color:#fff}.pro-btn.danger:hover{background:var(--danger-color-hover)}.pro-btn.ghost{background:transparent;border-color:var(--border-color);color:var(--text-dim)}.pro-btn.ghost:hover{color:var(--text-color);border-color:var(--accent-color)}.pro-btn[disabled]{opacity:.55;cursor:not-allowed}.pro-btn:focus-visible{outline:2px solid var(--accent-color);outline-offset:2px}.gradient-modal{background:var(--modal-bg);border-radius:var(--modal-radius);border:1px solid rgba(255,255,255,.08);position:relative;overflow:hidden}.gradient-modal:before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;background:var(--gradient-border);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;z-index:1}.icon-btn{background:var(--surface-alt);border:1px solid var(--border-color);color:var(--text-dim);padding:4px 6px;border-radius:var(--radius);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;font-size:13px}.icon-btn svg{width:16px;height:16px;stroke:currentColor}.icon-btn:hover{color:var(--text-color);border-color:var(--accent-color)}.icon-btn:disabled{opacity:.5;cursor:not-allowed}.loading{font-size:12px;opacity:.75;padding:8px 4px}.card-surface{background:var(--surface);border:1px solid var(--border-color);border-radius:var(--radius)}.pro-actions,.actions{display:flex;align-items:center;gap:10px}.topbar{background:#1a1c20;border-bottom:1px solid var(--border-color);display:flex;align-items:center;justify-content:space-between;padding:6px 14px}.main-nav a{color:var(--text-dim);text-decoration:none;margin-right:16px;font-size:14px;font-weight:500}.main-nav a.active,.main-nav a:hover{color:var(--text-color)}.modal{background:var(--surface);color:var(--text-color)}.modal .actions .pro-btn{min-width:90px;justify-content:center}.mini-badge{background:var(--accent-color);color:#fff;padding:2px 8px;border-radius:12px;font-size:11px;display:inline-flex;align-items:center;gap:4px}*::-webkit-scrollbar{width:10px;height:10px}*::-webkit-scrollbar-track{background:#16181c}*::-webkit-scrollbar-thumb{background:#2d3138;border-radius:6px}*::-webkit-scrollbar-thumb:hover{background:#38404a}select{appearance:none;-webkit-appearance:none;-moz-appearance:none;width:100%;padding:10px 36px 10px 14px;background:#0f172a99;border:1px solid rgba(255,255,255,.1);border-radius:14px;color:#f1f5f9;font-size:clamp(12px,.82vw,13px);font-family:inherit;cursor:pointer;transition:border-color .2s ease,box-shadow .2s ease,background .2s ease;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236366f1' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:14px 14px;line-height:1.4}select:hover{border-color:#6366f166;background-color:#0f172abf}select:focus{outline:none;border-color:#6366f1;box-shadow:0 0 0 1px #6366f1,0 0 0 4px #6366f133}select:disabled{opacity:.5;cursor:not-allowed}select option{background:#1e293b;color:#e2e8f0;padding:8px}select.compact,select.small{padding:6px 30px 6px 10px;font-size:clamp(11px,.75vw,12px);border-radius:10px}.theme-light{--surface: #ffffff;--surface-alt: #f8fafc;--border-color: #e2e8f0;--text-color: #0f172a;--text-dim: #64748b;--modal-bg: rgba(255, 255, 255, .97);--modal-border: 1px solid #e2e8f0;--shadow-primary: 0 4px 14px -4px rgba(99,102,241,.25);--shadow-primary-hover: 0 6px 18px -6px rgba(99,102,241,.35)}.theme-light select{background:#f8fafce6;color:#0f172a;border-color:#cbd5e1;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%234f46e5' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E")}.theme-light select:hover{border-color:#4f46e566;background-color:#fff}.theme-light select:focus{border-color:#4f46e5;box-shadow:0 0 0 1px #4f46e5,0 0 0 4px #4f46e526}.theme-light select option{background:#fff;color:#0f172a}.theme-light,html.theme-light,body.theme-light{background:#f1f5f9;color:#0f172a}.theme-light .topbar{background:#fff;border-bottom-color:#e2e8f0}.theme-light .main-nav a{color:#64748b}.theme-light .main-nav a.active,.theme-light .main-nav a:hover{color:#0f172a}.theme-light .card-surface{background:#fff;border-color:#e2e8f0}.theme-light .icon-btn{background:#f1f5f9;border-color:#e2e8f0;color:#64748b}.theme-light .icon-btn:hover{color:#0f172a;border-color:#6366f1}.theme-light .pro-btn.ghost{border-color:#e2e8f0;color:#64748b}.theme-light .pro-btn.ghost:hover{color:#0f172a;border-color:#6366f1}.theme-light .pro-btn{background:#f1f5f9;border-color:#e2e8f0;color:#0f172a}.theme-light .pro-btn.primary{background:var(--gradient-primary);color:#fff;border-color:transparent}.theme-light .modal{background:#fff;color:#0f172a;border-color:#e2e8f0}.theme-light .gradient-modal{background:#fffffff7;border-color:#e2e8f0}.theme-light .mini-badge{background:#6366f1}.theme-light .loading{color:#64748b}.theme-light *::-webkit-scrollbar-track{background:#f1f5f9}.theme-light *::-webkit-scrollbar-thumb{background:#cbd5e1}.theme-light *::-webkit-scrollbar-thumb:hover{background:#94a3b8}.theme-light .tool-pill{background:#e0e7ff;color:#3730a3}.theme-light input,.theme-light textarea{color:#0f172a;background:#fff;border-color:#e2e8f0}.theme-light input::placeholder,.theme-light textarea::placeholder{color:#94a3b8}.theme-light h1,.theme-light h2,.theme-light h3,.theme-light h4,.theme-light h5,.theme-light h6{color:#0f172a}.theme-light p,.theme-light span,.theme-light label,.theme-light div{color:inherit}.theme-light a{color:#4f46e5}.theme-light a:hover{color:#4338ca}.theme-light .subtitle,.theme-light .description,.theme-light .helper,.theme-light .hint,.theme-light .meta,.theme-light .muted,.theme-light small,.theme-light .text-secondary,.theme-light .text-muted{color:#475569!important}@media (max-width: 1440px){html,body{font-size:clamp(11px,.75vw,13px)}:root{--radius: clamp(3px, .35vw, 5px)}.pro-btn{padding:clamp(4px,.35vw,5px) clamp(10px,.85vw,12px);font-size:clamp(11px,.75vw,12px);gap:clamp(4px,.35vw,5px)}.pro-btn svg{width:clamp(12px,.85vw,14px);height:clamp(12px,.85vw,14px)}.topbar{padding:5px 12px}.main-nav a{font-size:12px;margin-right:14px}.mini-badge{padding:2px 6px;font-size:10px}}@media (max-width: 1366px){html,body{font-size:11px}:root{--radius: 3px}.pro-btn{padding:4px 10px;font-size:11px;gap:4px}.pro-btn.small{padding:3px 7px;font-size:10px}.pro-btn svg{width:12px;height:12px}.topbar{padding:4px 10px}.main-nav a{font-size:11px;margin-right:12px}.icon-btn{padding:3px 5px;font-size:11px}.icon-btn svg{width:14px;height:14px}.mini-badge{padding:1px 6px;font-size:9px}}@media (min-width: 1920px) and (max-width: 2560px){html,body{font-size:clamp(14px,.9vw,16px)}:root{--radius: clamp(5px, .45vw, 7px)}.pro-btn{padding:clamp(6px,.45vw,7px) clamp(14px,1.1vw,16px);font-size:clamp(13px,.9vw,14px)}.main-nav a{font-size:15px;margin-right:18px}}@media (min-width: 2561px){html,body{font-size:clamp(15px,.95vw,17px)}:root{--radius: clamp(6px, .5vw, 8px)}.pro-btn{padding:clamp(7px,.5vw,8px) clamp(15px,1.2vw,18px);font-size:clamp(14px,.95vw,16px)}.pro-btn svg{width:clamp(17px,1.2vw,20px);height:clamp(17px,1.2vw,20px)}.main-nav a{font-size:16px;margin-right:20px}.icon-btn{padding:6px 8px;font-size:15px}.icon-btn svg{width:18px;height:18px}.mini-badge{padding:3px 10px;font-size:12px}}