:root{--font-sans:"PingFang SC", "HarmonyOS_Regular", "Helvetica Neue", "Microsoft YaHei", "Noto Sans SC", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;--radius-xs:4px;--radius-sm:6px;--radius-md:8px;--shadow-sm:0 1px 2px #0000000a;--shadow-md:0 4px 16px #00000014;--shadow-lg:0 12px 40px #00000029}:root[data-theme=light]{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--bg:#f6f7f8;--surface:#fff;--surface-2:#f1f2f3;--surface-3:#e3e5e7;--text:#18191c;--text-dim:#61666d;--text-faint:#9499a0;--border:#e3e5e7;--border-strong:#c9ccd0;--accent:#97e763;--accent-hover:#7fd64e;--accent-active:#6fc53e;--accent-text:#4e9a22;--accent-text-hover:#3d7d19;--accent-soft:#edf9e0;--accent-contrast:#173207;--danger:#e23d3d;--danger-soft:#fdecec;--success:#2ac864;--success-soft:#e4f8ea;--info:#00a1d6;--info-soft:#e6f6fc;--warning:#9a7b0a;--warning-soft:#fff6d9;--overlay:#18191c80;--topbar-bg:#fff;--topbar-border:#e3e5e7;--topbar-text:#18191c}:root[data-theme=dark]{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--bg:#0e0f12;--surface:#17191d;--surface-2:#1f2227;--surface-3:#292d33;--text:#e8eaed;--text-dim:#a3aab4;--text-faint:#6c737d;--border:#282c32;--border-strong:#3a3f47;--accent:#97e763;--accent-hover:#abf07f;--accent-active:#bdf592;--accent-text:#97e763;--accent-text-hover:#baf28c;--accent-soft:#24331a;--accent-contrast:#14290a;--danger:#f1645c;--danger-soft:#34191b;--success:#3dd177;--success-soft:#14281c;--info:#23ade5;--info-soft:#122430;--warning:#ffd666;--warning-soft:#33290f;--overlay:#0000009e;--shadow-sm:0 1px 2px #0006;--shadow-md:0 4px 16px #00000073;--shadow-lg:0 12px 40px #0000008c;--topbar-bg:#0f0f0f;--topbar-border:#282c32;--topbar-text:#eaeaed}*{box-sizing:border-box}html,body{margin:0;padding:0}body{font-family:var(--font-sans);color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased;text-rendering:optimizelegibility;font-size:14px;line-height:1.5}#app{min-height:100vh}button,input,textarea,select{font:inherit}button{cursor:pointer}h1,h2,h3{margin:0;font-weight:600;line-height:1.3}p{margin:0}::selection{background:var(--accent-soft)}.btn{border:1px solid var(--border-strong);border-radius:var(--radius-sm);background:var(--surface);color:var(--text);cursor:pointer;white-space:nowrap;-webkit-user-select:none;user-select:none;justify-content:center;align-items:center;gap:6px;padding:6px 14px;font-family:inherit;font-size:13px;line-height:1.5;transition:background .15s,border-color .15s,color .15s,opacity .15s;display:inline-flex}.btn:hover{background:var(--surface-2);border-color:var(--border-strong);color:var(--text)}.btn:active{background:var(--surface-3)}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background:var(--accent);border-color:var(--accent);color:var(--accent-contrast);font-weight:600}.btn-primary:hover{background:var(--accent-hover);border-color:var(--accent-hover);color:var(--accent-contrast)}.btn-primary:active{background:var(--accent-active);border-color:var(--accent-active)}.btn-danger{border-color:var(--danger);color:var(--danger);background:0 0}.btn-danger:hover{background:var(--danger-soft);border-color:var(--danger);color:var(--danger)}.btn-ghost{color:var(--text-dim);background:0 0;border-color:#0000}.btn-ghost:hover{background:var(--surface-2);color:var(--text);border-color:#0000}.btn-sm{padding:4px 10px;font-size:12px}.field{flex-direction:column;gap:6px;margin-bottom:14px;display:flex}.label{color:var(--text-dim);font-size:13px;font-weight:500}.input,.select,.textarea{border:1px solid var(--border-strong);border-radius:var(--radius-sm);background:var(--surface);width:100%;color:var(--text);padding:7px 12px;font-family:inherit;font-size:13px;line-height:1.5;transition:border-color .15s,box-shadow .15s,background .15s}.input:hover:not(:disabled):not(:focus),.select:hover:not(:disabled):not(:focus),.textarea:hover:not(:disabled):not(:focus){border-color:var(--text-faint)}.input:focus,.select:focus,.textarea:focus{border-color:var(--accent-text);box-shadow:0 0 0 2px var(--accent-soft);outline:none}.input::placeholder,.select::placeholder,.textarea::placeholder{color:var(--text-faint)}.input:disabled,.select:disabled,.textarea:disabled{background:var(--surface-2);color:var(--text-faint);cursor:not-allowed}.select{appearance:none;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239499a0' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-position:right 10px center;background-repeat:no-repeat;padding-right:30px}.textarea{resize:vertical;min-height:96px}.textarea.config-code{min-height:220px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px}.check-field{color:var(--text);cursor:pointer;align-items:center;gap:8px;margin-bottom:14px;font-size:13px;display:flex}.check-field input{width:16px;height:16px;accent-color:var(--accent);cursor:pointer}.field-row{grid-template-columns:1fr 1fr;gap:12px;display:grid}.segmented{border-radius:var(--radius-sm);background:var(--surface-2);border:1px solid var(--border);gap:2px;padding:2px;display:inline-flex}.segmented button{color:var(--text-dim);border-radius:var(--radius-xs);cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;padding:5px 12px;font-family:inherit;font-size:13px;line-height:1.5;transition:background .15s,color .15s;display:inline-flex}.segmented button:hover:not(.active){color:var(--text)}.segmented button.active{background:var(--surface);color:var(--text);box-shadow:var(--shadow-sm);font-weight:500}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm)}.card-pad{padding:16px 20px}.page{width:100%;max-width:1400px;margin:0 auto;padding:20px 24px 32px}.page-header{flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:12px;margin-bottom:16px;display:flex}.page-header h1{font-size:20px}.subtitle{color:var(--text-faint);margin-top:2px;font-size:13px}.badge{white-space:nowrap;color:var(--text-dim);background:var(--surface-2);border-radius:999px;align-items:center;gap:5px;padding:1px 9px;font-size:12px;font-weight:500;line-height:1.6;display:inline-flex}.badge:before{content:"";background:currentColor;border-radius:50%;width:5px;height:5px}.badge-success{color:var(--success);background:var(--success-soft)}.badge-danger{color:var(--danger);background:var(--danger-soft)}.shell{min-height:100vh;display:flex}.sidebar{background:var(--surface);border-right:1px solid var(--border);z-index:90;flex-direction:column;flex:none;width:216px;height:100vh;display:flex;position:sticky;top:0}.sidebar-brand{background:var(--topbar-bg);border-bottom:1px solid var(--topbar-border);align-items:center;min-height:53px;padding:11px 18px;display:flex}.sidebar-brand .brand-logo{object-fit:contain;width:auto;max-width:100%;height:22px;display:block}.sidebar-nav{flex-direction:column;flex:1;gap:1px;padding:4px 10px;display:flex;overflow-y:auto}.nav-item{border-radius:var(--radius-sm);color:var(--text-dim);text-align:left;background:0 0;border:none;align-items:center;gap:10px;width:100%;padding:7px 12px;font-size:14px;transition:background .12s,color .12s;display:flex}.nav-item:hover{background:var(--surface-2);color:var(--text);text-decoration:none}.nav-item.active{background:var(--accent-soft);color:var(--accent-text);font-weight:600}.nav-icon{flex:none;width:16px;height:16px}.sidebar-footer{border-top:1px solid var(--border);justify-content:space-between;align-items:center;gap:8px;padding:10px 12px;display:flex}.sidebar-footer .user-name{color:var(--text-dim);text-overflow:ellipsis;white-space:nowrap;font-size:13px;overflow:hidden}.shell-main{flex-direction:column;flex:1;min-width:0;display:flex}.shell-topbar{background:var(--topbar-bg);border-bottom:1px solid var(--topbar-border);z-index:80;align-items:center;gap:10px;padding:8px 24px;display:flex;position:sticky;top:0}.topbar-title{min-width:0;color:var(--topbar-text);flex:1;align-items:center;gap:9px;font-size:13px;font-weight:600;display:flex}.topbar-title .topbar-logo{object-fit:contain;flex:none;width:auto;max-width:100%;height:18px;display:block}.topbar-actions{align-items:center;gap:12px;display:flex}.topbar-menu{color:var(--topbar-text);padding:5px;display:none}.topbar-menu:hover{color:var(--topbar-text);background:var(--surface-2)}.sidebar-backdrop{display:none}.auth-layout{background:radial-gradient(circle at 50% 30%, var(--surface-2) 0, var(--bg) 46%);place-items:center;min-height:100vh;padding:24px;display:grid}.auth-card{width:min(380px,100%);padding:28px}.auth-brand{justify-content:center;align-items:center;margin-bottom:10px;display:flex}.auth-brand img{object-fit:contain;width:auto;max-width:100%;height:30px;display:block}.auth-card>p{color:var(--text-dim);text-align:center;margin:0 0 24px;font-size:13px}.auth-card form>.btn{width:100%;margin-top:5px}.form-error{min-height:21px;color:var(--danger);margin:-4px 0 8px;font-size:12px}.cover-layout{grid-template-columns:320px 1fr;align-items:start;gap:16px;display:grid}.editor-column{flex-direction:column;gap:12px;display:flex}.preview-column{position:sticky;top:70px}.preview-heading{color:var(--text-dim);justify-content:space-between;align-items:center;margin-bottom:8px;font-size:13px;display:flex}.canvas-wrap{border-radius:var(--radius-sm);border:1px solid var(--border);background:#0b0c0f;overflow:hidden}.canvas-wrap.dragging{cursor:move}#coverCanvas{aspect-ratio:16/9;width:100%;height:auto;display:block}.preview-footer{color:var(--text-faint);justify-content:space-between;align-items:center;margin-top:8px;font-size:12px;display:flex}.editor-heading{align-items:center;gap:12px;display:flex}.section-title{margin-bottom:12px;font-size:15px;font-weight:600}.element-actions{gap:8px;margin-bottom:12px;display:flex}.element-list{flex-direction:column;gap:4px;margin-bottom:14px;display:flex}.element-row.drop-before .element-item{border-top:2px solid var(--accent)}.element-row.drop-after .element-item{border-bottom:2px solid var(--accent)}.element-item{border-radius:var(--radius-sm);color:var(--text-dim);text-align:left;background:0 0;border:1px solid #0000;flex:1;align-items:center;gap:10px;padding:7px 10px;font-size:13px;transition:background .12s,color .12s,border-color .12s;display:flex}.element-item:hover{background:var(--surface-2);color:var(--text)}.element-item.active{background:var(--accent-soft);color:var(--accent-text);border-color:var(--accent-soft);font-weight:600}.element-item small{color:var(--text-faint);margin-left:auto;font-size:11px}.element-delete{color:var(--text-faint);padding:4px 8px}.element-delete:hover{color:var(--danger);background:var(--danger-soft)}.image-source-actions{grid-template-columns:1fr 1fr;gap:8px;margin:-5px 0 14px;display:grid}.background-row{flex-wrap:wrap;gap:6px;margin-bottom:14px;display:flex}.background{border-radius:var(--radius-sm);border:1px solid var(--border-strong);background:var(--surface);color:var(--text-dim);cursor:pointer;padding:5px 10px;font-size:12px;transition:all .15s}.background:hover{background:var(--surface-2);color:var(--text)}.background.active{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-text);font-weight:600}.color-row{grid-template-columns:1fr 1fr;gap:12px;margin-bottom:14px;display:grid}.color-picker{border-radius:var(--radius-sm);border:1px solid var(--border-strong);cursor:pointer;width:32px;height:32px}.palette-row{flex-wrap:wrap;align-items:center;gap:10px;margin-top:12px;display:flex}.palette-list{flex-wrap:wrap;gap:8px;display:flex}.saved-palette{position:relative}.palette-swatch{border-radius:var(--radius-sm);border:1px solid var(--border-strong);cursor:pointer;width:28px;height:28px}.palette-delete{background:var(--danger);color:#fff;cursor:pointer;border:none;border-radius:50%;width:16px;height:16px;padding:0;font-size:11px;line-height:1;position:absolute;top:-6px;right:-6px}.grid-settings{margin-bottom:14px}.glow-settings{border-top:1px solid var(--border);margin-top:14px;padding-top:14px}.reset-button{width:100%}#legacyTemplateControls{display:none}.template-item{border-radius:var(--radius-sm);color:var(--text-dim);text-align:left;background:0 0;border:1px solid #0000;flex:1;justify-content:space-between;align-items:center;gap:8px;padding:7px 10px;font-size:13px;transition:background .12s,color .12s,border-color .12s;display:flex}.template-item:hover{background:var(--surface-2);color:var(--text)}.template-item.active{background:var(--accent-soft);color:var(--accent-text);border-color:var(--accent-soft);font-weight:600}.template-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.template-meta{color:var(--text-faint);flex:none;font-size:11px}.template-delete{color:var(--text-faint);padding:4px 8px}.template-delete:hover{color:var(--danger);background:var(--danger-soft)}.cover-grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;display:grid}.cover-card{cursor:pointer;transition:border-color .15s,transform .15s,box-shadow .15s;overflow:hidden}.cover-card:hover,.cover-card:focus{border-color:var(--accent);box-shadow:var(--shadow-md);outline:none;transform:translateY(-2px)}.cover-card-preview{aspect-ratio:16/9;background:#0b0c0f;width:100%;height:auto;display:block}.cover-card-info{flex-direction:column;gap:5px;padding:13px;display:flex}.cover-card-info>strong{color:var(--text);font-size:14px}.cover-card-info>span{color:var(--text-faint);font-size:12px}.asset-actions{flex-wrap:wrap;gap:6px;margin-top:7px;display:flex}.cover-readonly .editor-column{pointer-events:none;opacity:.62}.cover-readonly #exportButton,.cover-readonly #draftBoxButton{pointer-events:auto;opacity:1}.cover-use-mode .editor-column>.card:nth-child(2),.cover-use-mode .editor-column>.reset-button,.cover-use-mode .element-actions,.cover-use-mode .element-delete{display:none}.asset-grid{grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px;display:grid}.asset-card{overflow:hidden}.asset-card>img{object-fit:contain;background:#0b0c0f;width:100%;height:150px;display:block}.asset-info{flex-direction:column;gap:4px;padding:12px;display:flex}.asset-info strong{text-overflow:ellipsis;white-space:nowrap;color:var(--text);font-size:13px;overflow:hidden}.asset-info small{color:var(--text-faint)}.empty-state{min-height:220px;color:var(--text-faint);place-items:center;display:grid}.inline-form{grid-template-columns:1fr 1fr auto;gap:10px;display:grid}.user-create-card{margin-bottom:14px}.user-list{gap:10px;display:grid}.user-card{justify-content:space-between;align-items:center;padding:14px 16px;display:flex}.user-card>div{align-items:center;gap:10px;display:flex}.user-card strong{color:var(--text);font-size:14px}.user-card span{color:var(--text-faint);font-size:12px}.permission-modal{width:min(560px,100%)}.permission-list{gap:10px;display:grid}.permission-row{grid-template-columns:1fr 160px;align-items:center;gap:14px;display:grid}.empty-copy{text-align:center;color:var(--text-faint);padding:24px}.draft-list{gap:10px;display:grid}.draft-row{background:var(--surface-2);border-radius:var(--radius-sm);border:1px solid var(--border);justify-content:space-between;align-items:center;padding:10px 12px;display:flex}.access-card{max-width:860px}.access-note{color:var(--text-faint);margin:4px 0 0;font-size:12px;line-height:1.7}.copy-field{grid-template-columns:minmax(0,1fr) auto auto;gap:8px;display:grid}.config-actions{gap:8px;margin-top:-8px;margin-bottom:14px;display:flex}.modal-overlay{z-index:100;background:var(--overlay);place-items:center;padding:24px;animation:.15s ease-out fade-in;display:grid;position:fixed;inset:0}.modal{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);width:min(900px,100%);max-height:min(720px,90vh);box-shadow:var(--shadow-lg);animation:.18s ease-out modal-in;overflow:auto}.modal-header{z-index:1;border-bottom:1px solid var(--border);background:var(--surface);justify-content:space-between;align-items:flex-start;gap:10px;padding:14px 16px;display:flex;position:sticky;top:0}.modal-header h2{font-size:15px}.confirm-message{color:var(--text-dim);margin-bottom:20px}.confirm-actions{justify-content:flex-end;gap:8px;display:flex}.confirm-danger{background:var(--danger);border-color:var(--danger);color:#fff}.confirm-danger:hover{background:#d93434;border-color:#d93434}.toast{border-radius:var(--radius-sm);background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--info);box-shadow:var(--shadow-md);z-index:200;padding:9px 14px;font-size:13px;animation:.2s ease-out toast-in;position:fixed;bottom:20px;right:20px}.chroma-error{min-height:18px;color:var(--danger);margin-top:8px;font-size:12px}.pcr-app[data-theme=monolith] .pcr-selection .pcr-picker{border:2px solid var(--surface);box-shadow:0 0 0 1px var(--border-strong)}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes modal-in{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}@keyframes toast-in{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}@media (width<=1000px){.cover-layout{grid-template-columns:280px 1fr}}@media (width<=860px){.sidebar{box-shadow:var(--shadow-lg);transition:transform .2s;position:fixed;top:0;bottom:0;left:0;transform:translate(-100%)}.sidebar.open{transform:none}.sidebar-backdrop.open{background:var(--overlay);z-index:85;display:block;position:fixed;inset:0}.topbar-menu{display:inline-flex}.shell-topbar{padding:8px 14px}}@media (width<=760px){.cover-layout{grid-template-columns:1fr}.page{padding:16px}.inline-form,.permission-row,.field-row,.color-row{grid-template-columns:1fr}.asset-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}[data-theme=light] .canvas-wrap,[data-theme=light] .cover-card-preview,[data-theme=light] .asset-card>img{background:#f0f1f4}.auth-theme-toggle{z-index:10;position:fixed;top:16px;right:16px}.background-row{grid-template-columns:repeat(3,1fr)}.color-picker{height:34px}.element-context-menu{z-index:1000;border:1px solid var(--border-strong);background:var(--surface);min-width:140px;box-shadow:var(--shadow-md);border-radius:6px;padding:4px;position:fixed}.element-context-menu button{text-align:left;width:100%;color:var(--text);background:0 0;border:0;border-radius:4px;padding:8px 12px}.element-context-menu button:hover{background:var(--surface-2)}#elementList{margin-bottom:16px}.template-row{align-items:center;gap:4px;display:flex}.template-row .template-item{flex:1;min-width:0}.element-row{align-items:center;gap:4px;display:flex}.element-row .element-item{flex:1;min-width:0}.template-delete{padding:8px}.element-item[draggable]{cursor:grab}.element-item{touch-action:none;-webkit-user-select:none;user-select:none}.element-row.drop-before{box-shadow:0 -3px 0 var(--accent)}.element-row.drop-after{box-shadow:0 3px 0 var(--accent)}.chroma-error{color:#ffb8b8;font-size:12px}[hidden]{display:none!important}.pcr-button{width:100%;height:34px;border:1px solid var(--border-strong)!important;border-radius:var(--radius-sm)!important}.pcr-app{background:var(--surface)!important;border:1px solid var(--border-strong)!important;color:var(--text)!important}.palette-row{margin-top:4px}.saved-palette{border:1px solid var(--border);border-radius:5px;align-items:center;gap:2px;padding:3px;display:inline-flex}.palette-delete{color:var(--text-dim);background:0 0;border:0;padding:0 4px;font-size:16px;line-height:22px}.palette-delete:hover{color:#ffb8b8;background:var(--surface-2)}.palette-list{flex-wrap:wrap;gap:6px;margin:7px 0 9px;display:flex}.palette-swatch{border:1px solid var(--border-strong);cursor:pointer;border-radius:4px;width:28px;height:22px}.palette-swatch.active{outline:2px solid var(--accent);outline-offset:1px}input[type=range]{width:100%;accent-color:var(--accent)}output{float:right;color:var(--accent)}canvas{cursor:grab}.canvas-wrap.dragging canvas{cursor:grabbing}.element-item{justify-content:space-between;align-items:center;gap:8px;display:flex}.element-delete{color:var(--text-faint);flex:none;padding:0 3px;font-size:18px;line-height:1}.element-delete:hover{color:var(--danger,#f1645c)}.check-field{color:var(--text-dim);flex-direction:row;align-items:center;gap:7px;margin:0 0 10px;font-size:13px;display:flex}.check-field input{accent-color:var(--accent)}.confirm-message{color:var(--text-dim);margin:0;font-size:14px;line-height:1.7}.confirm-actions{justify-content:flex-end;gap:8px;margin-top:24px;display:flex}.confirm-danger{color:#ffb8b8;background:#542929;border-color:#7a3636;font-weight:600}.confirm-danger:hover{background:#683232}