*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;-webkit-font-smoothing:antialiased}body{background:#0d0d0f;color:#e5e5e7;min-height:100vh;overflow:hidden}.app{display:flex;flex-direction:column;height:100vh}.header{display:flex;align-items:center;gap:12px;padding:0 20px;height:50px;flex-shrink:0;border-bottom:1px solid rgba(255,255,255,.07);background:#111113}.header-logo{display:flex;align-items:center;gap:7px;font-size:15px;font-weight:700;color:#f5f5f7}.header-sub{font-size:12px;color:#555}.header-links{margin-left:auto;display:flex;gap:14px}.header-links a{font-size:11px;color:#666;text-decoration:none;transition:color .12s}.header-links a:hover{color:#a5b4fc}.layout{display:flex;flex:1;overflow:hidden}.control-panel{width:240px;flex-shrink:0;border-right:1px solid rgba(255,255,255,.07);overflow-y:auto;padding:14px 12px 20px;background:#111113;display:flex;flex-direction:column}.panel-section{padding-bottom:14px;margin-bottom:14px;border-bottom:1px solid rgba(255,255,255,.06)}.panel-section:last-of-type{border-bottom:none}.panel-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:#555;margin-bottom:8px}.sub-label{font-size:11px;color:#666;margin-bottom:4px}.upload-btn{display:flex;flex-direction:column;align-items:center;gap:5px;padding:10px;border:1px dashed rgba(255,255,255,.15);border-radius:8px;cursor:pointer;font-size:12px;color:#888;transition:border-color .15s,background .15s,color .15s;width:100%;text-align:center}.upload-btn:hover{border-color:#6366f180;background:#6366f10f;color:#a5b4fc}.upload-btn--has-image{flex-direction:row;gap:8px;padding:6px 10px}.upload-hint{font-size:10px;color:#444}.upload-thumb{width:32px;height:32px;object-fit:cover;border-radius:4px;flex-shrink:0}.mode-row{display:flex;flex-direction:column;gap:4px}.mode-btn{display:flex;align-items:center;gap:6px;padding:7px 8px;border-radius:7px;width:100%;border:1px solid rgba(255,255,255,.1);background:#ffffff08;color:#999;font-size:12px;cursor:pointer;text-align:left;transition:background .12s,color .12s,border-color .12s}.mode-btn:hover{background:#ffffff0f;color:#ddd}.mode-btn--active{background:#6366f124;border-color:#6366f166;color:#a5b4fc}.mode-icon{font-size:14px}.frame-count-row{display:flex;gap:6px}.count-btn{flex:1;padding:6px 0;border-radius:6px;border:1px solid rgba(255,255,255,.1);background:#ffffff0a;color:#888;font-size:12px;cursor:pointer;transition:background .12s,color .12s,border-color .12s}.count-btn:hover{background:#ffffff12;color:#ddd}.count-btn--active{background:#6366f129;border-color:#6366f166;color:#a5b4fc}.hint-text{font-size:10px;color:#555;margin-top:6px;line-height:1.4}.span-row{display:flex;gap:6px}.span-btn{flex:1;padding:5px 0;border-radius:6px;font-size:11px;border:1px solid rgba(255,255,255,.1);background:#ffffff08;color:#888;cursor:pointer;transition:background .12s,color .12s,border-color .12s}.span-btn:hover{background:#ffffff0f;color:#ddd}.span-btn--active{background:#6366f129;border-color:#6366f166;color:#a5b4fc}.toggle-row{display:flex;align-items:center;gap:6px;cursor:pointer;font-size:12px;color:#999}.toggle-check{accent-color:#6366f1}.frame-group-label{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:#444;margin-bottom:4px}.frame-item{display:flex;align-items:center;gap:8px;width:100%;padding:5px 6px;border-radius:6px;border:1px solid transparent;background:transparent;color:#999;cursor:pointer;font-size:12px;text-align:left;transition:background .12s,color .12s,border-color .12s}.frame-item:hover{background:#ffffff0a;color:#ddd}.frame-item--active{background:#6366f11f;border-color:#6366f159;color:#a5b4fc}.frame-chip{width:10px;height:18px;border-radius:3px;flex-shrink:0;border:1px solid rgba(255,255,255,.1)}.frame-size{display:block;font-size:10px;color:#555;margin-top:1px}.frame-item--active .frame-size{color:#8b93d6}.notch-badge{font-size:9px;background:#ffffff14;padding:1px 4px;border-radius:3px;color:#666}.gradient-row{display:flex;align-items:center;gap:8px;margin-bottom:8px}.gradient-preview{flex:1;height:28px;border-radius:6px;border:1px solid rgba(255,255,255,.08)}.direction-row{display:flex;gap:4px}.dir-btn{flex:1;padding:4px 0;border-radius:5px;border:1px solid rgba(255,255,255,.1);background:#ffffff0a;color:#777;cursor:pointer;font-size:14px;transition:background .12s,color .12s}.dir-btn:hover{background:#ffffff14;color:#ddd}.dir-btn--active{background:#6366f12e;border-color:#6366f166;color:#a5b4fc}.color-picker{width:36px;height:28px;border-radius:6px;border:1px solid rgba(255,255,255,.12);cursor:pointer;padding:2px;background:none}.color-row{display:flex;gap:16px}.panel-label-tabs{display:inline-flex;gap:3px;margin-left:8px}.tab-btn{padding:1px 6px;border-radius:4px;font-size:10px;border:1px solid rgba(255,255,255,.1);background:#ffffff0a;color:#666;cursor:pointer;transition:background .1s,color .1s}.tab-btn:hover{color:#bbb}.tab-btn--active{background:#6366f133;border-color:#6366f166;color:#a5b4fc}.copy-text-btn{margin-top:8px;width:100%;padding:5px;border-radius:6px;border:1px solid rgba(255,255,255,.08);background:#ffffff08;color:#666;font-size:11px;cursor:pointer;transition:background .12s,color .12s}.copy-text-btn:hover{background:#ffffff0f;color:#bbb}.slider-row{margin-bottom:8px}.slider-labels{display:flex;justify-content:space-between;font-size:11px;color:#777;margin-bottom:3px}.slider-val{color:#aaa;font-variant-numeric:tabular-nums;min-width:36px;text-align:right}.slider{width:100%;height:3px;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#ffffff1a;border-radius:2px;outline:none;cursor:pointer}.slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:13px;height:13px;border-radius:50%;background:#6366f1;border:2px solid #fff;cursor:pointer;box-shadow:0 1px 4px #0006}.slider::-moz-range-thumb{width:13px;height:13px;border-radius:50%;background:#6366f1;border:2px solid #fff;cursor:pointer}.reset-btn{padding:2px 7px;border-radius:4px;font-size:10px;border:1px solid rgba(255,255,255,.1);background:#ffffff0a;color:#666;cursor:pointer;transition:color .12s,background .12s}.reset-btn:hover{color:#bbb;background:#ffffff14}.text-input{width:100%;background:#ffffff0a;border:1px solid rgba(255,255,255,.1);border-radius:6px;color:#ddd;font-size:12px;padding:6px 8px;font-family:inherit;resize:none;transition:border-color .15s}.text-input:focus{outline:none;border-color:#6366f180}.text-input::placeholder{color:#444}.info-row{display:flex;justify-content:space-between;font-size:11px;padding:3px 0;color:#555}.info-row span:last-child{color:#888}.export-btn{width:100%;padding:10px;border-radius:8px;border:none;background:#6366f1;color:#fff;font-size:13px;font-weight:600;cursor:pointer;transition:background .15s,opacity .15s;margin-top:4px}.export-btn:hover:not(:disabled){background:#4f52d3}.export-btn--loading,.export-btn:disabled{opacity:.55;cursor:not-allowed}.canvas-area{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#0d0d0f;background-image:radial-gradient(circle at 50% 40%,#161620,#0d0d0f 70%);overflow:auto;padding:24px;gap:10px}.canvas-row{display:flex;align-items:center;justify-content:center}.canvas-label{display:flex;gap:12px}.canvas-label span{display:inline-block;text-align:center;font-size:11px;color:#444}