@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;900&family=Playfair+Display:wght@600;700&family=Poppins:wght@400;600;700&family=Oswald:wght@400;600;700&family=Montserrat:wght@400;600;700;800&family=Lora:wght@400;600;700&family=Bebas+Neue&display=swap');

:root{--bg1:#0b0c15;--bg2:#121420;--bg3:#1a1c2a;--bg4:#22253d;--border:#2a2e45;--text-main:#e0e2ee;--text-muted:#7c8198;--accent:#00d4aa;--accent2:#3366ff;--accent-glow:rgba(0,212,170,0.15);--danger:#ff4757;--font:'Inter',system-ui,sans-serif;--radius:12px;--radius-sm:8px;--shadow:0 8px 30px rgba(0,0,0,0.4)}
.theme-light{--bg1:#f4f4f8;--bg2:#ffffff;--bg3:#eef0f5;--bg4:#e2e5ec;--border:#d0d4e0;--text-main:#1a1d2e;--text-muted:#5a5e75;--accent:#00b58c;--accent2:#2a5af0;--accent-glow:rgba(0,181,140,0.15)}
*{margin:0;padding:0;box-sizing:border-box;outline:none}
html,body{height:100%;font-family:var(--font);background:var(--bg1);color:var(--text-main);overflow:hidden}

/* Splash */
.splash-screen{position:fixed;inset:0;z-index:999;background:radial-gradient(circle at 50% 40%,#13162a,#0b0c15);display:flex;align-items:center;justify-content:center;flex-direction:column;transition:opacity .6s,transform .6s}
.splash-screen.hidden{opacity:0;transform:scale(1.05);pointer-events:none}
.logo-icon{width:120px;height:120px}
.splash-content h1{font-size:42px;font-weight:800;margin-top:20px;letter-spacing:-1px}
.splash-content p{color:var(--text-muted);font-size:16px;margin:8px 0 28px}

/* App layout */
.app{display:flex;flex-direction:column;position:absolute;top:0;left:0;right:0;bottom:0;overflow:hidden}
.body-row{flex:1;display:flex;overflow:hidden}
.hidden{display:none !important}

/* Top Bar */
.top-bar{height:56px;background:var(--bg2);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 18px;flex-shrink:0;gap:14px}
.brand{display:flex;align-items:center;gap:10px}
.logo-mini{width:32px;height:32px}
.brand-text{font-weight:700;font-size:15px;letter-spacing:0;white-space:nowrap}
.doc-controls{display:flex;align-items:center;gap:10px;min-width:0;flex:1;justify-content:center}
.doc-controls input[type=text]{min-width:170px;max-width:220px}
.doc-controls select{background:var(--bg3);border:1px solid var(--border);color:var(--text-main);border-radius:var(--radius-sm);padding:5px 10px;font-size:13px;cursor:pointer;max-width:300px}
.toggle-label{display:flex;align-items:center;gap:6px;cursor:pointer;font-size:12px;color:var(--text-muted)}
.toggle-label input{accent-color:var(--accent);transform:scale(1.1)}
.top-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}
.page-tabs{display:flex;align-items:center;gap:4px;max-width:min(520px,38vw);overflow-x:auto;padding-bottom:2px}
.page-tab-btn{height:34px;background:var(--bg3);border:1px solid var(--border);color:var(--text-main);border-radius:var(--radius-sm);padding:0 10px;font-size:12px;font-weight:700;white-space:nowrap;cursor:pointer}
.page-tab-btn:hover,.page-tab-btn.active{background:var(--accent);color:#000;border-color:var(--accent)}
.page-add{font-weight:900}
.btn-primary{background:var(--accent);border:none;color:#000;padding:8px 16px;border-radius:var(--radius-sm);font-weight:700;font-size:13px;cursor:pointer;transition:transform .1s,filter .2s}
.btn-primary:hover{filter:brightness(1.1);transform:translateY(-1px)}
.btn-secondary{background:var(--bg4);border:1px solid var(--border);color:var(--text-main);padding:8px 16px;border-radius:var(--radius-sm);font-weight:500;cursor:pointer}
.btn-icon{width:34px;height:34px;background:var(--bg3);border:1px solid var(--border);color:var(--text-main);border-radius:var(--radius-sm);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:15px}
.btn-icon:hover,.btn-icon.active{background:var(--accent);color:#000;border-color:var(--accent)}
#btn-settings{width:auto;padding:0 10px;font-size:12px;font-weight:700}
.btn-icon.page-tab{width:auto;min-width:72px;padding:0 10px;font-size:12px;font-weight:700;line-height:1.1}
.btn-large{padding:14px 36px;font-size:16px;border-radius:14px}

/* Sidebar & Canvas */
.sidebar-left{min-width:260px;width:260px;background:var(--bg2);border-right:1px solid var(--border);flex-shrink:0;padding:16px;overflow-y:auto;display:flex;flex-direction:column;gap:18px}
.sidebar-right{min-width:280px;width:280px;background:var(--bg2);border-left:1px solid var(--border);flex-shrink:0;padding:16px;overflow-y:auto}
.sidebar-right.panel-suppressed{display:none}
.canvas-area{flex:1;min-width:0;display:flex;flex-direction:column;background:var(--bg1);position:relative}
.canvas-container{flex:1;min-height:0;display:flex;align-items:flex-start;justify-content:center;overflow:auto;padding:40px}
.document-frame{margin:0 auto;position:relative;background:#fff;box-shadow:var(--shadow);transition:width .3s,height .3s}
#editor-canvas{display:block}
.canvas-footer{height:34px;background:var(--bg2);border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 16px;font-size:12px;color:var(--text-muted);flex-shrink:0}
.zoom-controls{display:flex;align-items:center;gap:6px}
.zoom-controls button{border:none;background:var(--bg3);color:var(--text-main);width:28px;height:22px;border-radius:4px;cursor:pointer;font-size:14px;line-height:1}
.zoom-controls span{min-width:36px;text-align:center}

/* Tools */
.tool-section .section-label{display:block;font-size:11px;text-transform:uppercase;color:var(--text-muted);letter-spacing:.5px;margin-bottom:10px;font-weight:600}
.section-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px}
.section-head .section-label{margin-bottom:0}
.mini-btn{height:24px;background:var(--bg3);border:1px solid var(--border);color:var(--text-muted);border-radius:6px;padding:0 8px;font-size:11px;font-weight:700;cursor:pointer}
.mini-btn:hover{color:var(--accent);border-color:var(--accent)}
.tool-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.tool{width:100%;aspect-ratio:1;background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius-sm);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:8px;transition:border-color .2s,background .2s}
.tool svg{fill:none;stroke:var(--text-main);stroke-width:1.8;width:20px;height:20px}
.tool.active{border-color:var(--accent);background:var(--accent-glow)}
.tool.active svg{stroke:var(--accent)}
.tool:hover{border-color:var(--accent)}

/* Generated assets */
.generated-section{padding-top:2px}
.generated-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.generated-card{appearance:none;background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius-sm);padding:6px;cursor:pointer;text-align:left;color:var(--text-main);display:flex;flex-direction:column;gap:6px;transition:border-color .2s,background .2s,transform .15s}
.generated-card:hover{border-color:var(--accent);transform:translateY(-1px)}
.generated-card.active{border-color:var(--accent);background:var(--accent-glow)}
.generated-card img{width:100%;aspect-ratio:.707;object-fit:contain;border-radius:6px;background:#fff;display:block}
.generated-meta{display:flex;align-items:center;justify-content:space-between;gap:6px;font-size:11px;font-weight:700;color:var(--text-main);line-height:1.25}
.generated-sub{font-size:10px;color:var(--text-muted);font-weight:600}
.generated-empty{grid-column:1/-1;border:1px dashed var(--border);border-radius:var(--radius-sm);color:var(--text-muted);font-size:12px;line-height:1.45;padding:12px;background:rgba(255,255,255,0.02)}
.generated-actions{display:flex;align-items:center;gap:4px}
.generated-ref{border:1px solid var(--border);border-radius:999px;padding:2px 6px;color:var(--accent);font-size:10px;background:rgba(0,212,170,.08)}
.generated-ref:hover{background:var(--accent);color:#000}
.generated-delete{border:1px solid rgba(255,71,87,.45);border-radius:999px;padding:2px 6px;color:#ff9ba5;font-size:10px;background:rgba(255,71,87,.08)}
.generated-delete:hover{background:var(--danger);border-color:var(--danger);color:#fff}

/* Templates */
.template-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.template-card{aspect-ratio:.75;background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;cursor:pointer;padding:8px;text-align:center;font-size:10px;font-weight:600;transition:border-color .2s,transform .15s}
.template-card:hover{border-color:var(--accent);transform:scale(1.02)}

/* Properties */
.panel-section{margin-bottom:18px}
.empty-msg{font-size:13px;color:var(--text-muted);line-height:1.6}
.prop-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px;min-height:34px}
.prop-row label{font-size:12px;color:var(--text-muted);flex-shrink:0}
.prop-row input[type=number],.prop-row select{background:var(--bg3);border:1px solid var(--border);color:var(--text-main);padding:6px 8px;border-radius:var(--radius-sm);font-size:13px;width:100px;text-align:right}
.prop-row input[type=color]{width:40px;height:32px;border:none;background:transparent;cursor:pointer}
.prop-row textarea{width:100%;background:var(--bg3);border:1px solid var(--border);color:var(--text-main);padding:8px;border-radius:var(--radius-sm);font-size:13px;resize:vertical}
.prop-row input[type=range]{flex:1}
.align-buttons{display:flex;gap:4px}
.align-buttons button{background:var(--bg3);border:1px solid var(--border);color:var(--text-main);width:30px;height:28px;border-radius:4px;cursor:pointer}
.align-buttons button.active{background:var(--accent);color:#000}
.arrange-row{display:flex;gap:6px;flex-wrap:wrap}
.arrange-row button{background:var(--bg3);border:1px solid var(--border);color:var(--text-main);padding:6px 12px;border-radius:6px;cursor:pointer;font-size:12px}
.arrange-row button.danger{background:var(--danger);color:#fff;border:none}

/* Bleed & Crop overlays */
.bleed-overlay,.crop-marks{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .3s}

/* AI Panel */
.ai-panel{position:fixed;right:0;top:56px;bottom:0;width:380px;background:var(--bg2);border-left:1px solid var(--border);z-index:200;display:flex;flex-direction:column;transition:transform .35s ease}
.ai-panel.hidden{transform:translateX(100%)}
.ai-header{height:50px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 18px;font-weight:700}
.ai-header button{background:none;border:none;color:var(--text-muted);font-size:22px;cursor:pointer}
.ai-body{flex:1;display:flex;flex-direction:column;overflow:hidden}
.ai-messages{flex:1;min-height:160px;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:14px}
.ai-msg{display:flex;gap:10px}
.ai-avatar{width:28px;height:28px;background:var(--accent);color:#000;border-radius:50%;font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ai-bubble{background:var(--bg3);border:1px solid var(--border);border-radius:14px;padding:12px 14px;font-size:13px;line-height:1.6;max-width:calc(100% - 40px)}
.ai-bubble-bot{border-top-left-radius:4px}
.ai-bubble-user{background:var(--accent-glow);border-color:var(--accent);border-top-right-radius:4px}
.ai-presets{display:flex;gap:6px;overflow-x:auto;padding:8px 14px;border-top:1px solid var(--border)}
.ai-preset{background:var(--bg3);border:1px solid var(--border);color:var(--text-muted);border-radius:14px;padding:5px 12px;font-size:11px;cursor:pointer;white-space:nowrap;transition:all .15s}
.ai-preset:hover{border-color:var(--accent);color:var(--accent)}
.ai-input-row{display:flex;gap:8px;padding:8px 14px;border-top:1px solid var(--border)}
.ai-input-row input{flex:1;background:var(--bg3);border:1px solid var(--border);color:var(--text-main);padding:10px 14px;border-radius:24px;font-size:13px}
.ai-input-row button{width:40px;background:var(--accent);border:none;color:#000;border-radius:50%;cursor:pointer;font-size:16px}
.ai-input-row .ai-upload-btn{background:var(--bg3);border:1px solid var(--border);color:var(--text-main);font-weight:700}
.ai-input-row .ai-upload-btn:hover{border-color:var(--accent);color:var(--accent)}
.ai-config{display:flex;gap:8px;padding:10px 14px;border-top:1px solid var(--border);align-items:center}
.ai-config select,.ai-config input{background:var(--bg3);border:1px solid var(--border);color:var(--text-main);padding:5px 8px;border-radius:var(--radius-sm);font-size:11px}
.reference-tray{border-top:1px solid var(--border);padding:12px 14px;display:flex;flex-direction:column;gap:9px;background:rgba(255,255,255,.015)}
.reference-head{display:flex;align-items:center;justify-content:space-between;font-size:12px;color:var(--text-muted);font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.reference-head strong{color:var(--accent);font-size:12px}
.reference-actions{display:flex;gap:6px;flex-wrap:wrap}
.reference-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;max-height:148px;overflow:auto}
.reference-empty{grid-column:1/-1;border:1px dashed var(--border);border-radius:var(--radius-sm);padding:10px;color:var(--text-muted);font-size:12px;line-height:1.4}
.reference-item{display:grid;grid-template-columns:42px 1fr 20px;gap:8px;align-items:center;background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius-sm);padding:6px;min-width:0}
.reference-item img{width:42px;height:42px;object-fit:cover;border-radius:6px;background:#fff}
.reference-item-meta{display:flex;flex-direction:column;gap:2px;min-width:0}
.reference-item-meta strong{font-size:11px;color:var(--text-main);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.reference-item-meta span{font-size:10px;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.reference-item button{width:20px;height:20px;border:1px solid var(--border);background:var(--bg2);color:var(--text-muted);border-radius:999px;cursor:pointer;line-height:1}
.reference-item button:hover{color:#fff;border-color:var(--danger);background:var(--danger)}
.brand-material-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;max-height:220px;overflow:auto;border-top:1px solid var(--border);padding-top:8px}
.brand-material-card{appearance:none;background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius-sm);padding:6px;color:var(--text-main);cursor:pointer;text-align:left;display:flex;flex-direction:column;gap:6px;min-width:0}
.brand-material-card:hover{border-color:var(--accent);background:var(--accent-glow)}
.brand-material-card img{width:100%;height:52px;object-fit:contain;border-radius:6px;background:#fff}
.brand-material-card span{font-size:10px;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Revise Panel */
.revise-panel{min-width:390px;width:390px;background:var(--bg2);border-left:1px solid var(--border);flex-shrink:0;display:flex;flex-direction:column;overflow:hidden}
.revise-panel-header{height:64px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 16px;gap:12px}
.revise-panel-header strong{display:block;font-size:15px;line-height:1.25}
.revise-panel-header span{display:block;color:var(--text-muted);font-size:12px;margin-top:2px;line-height:1.3}
.panel-close{background:none;border:none;color:var(--text-muted);font-size:24px;line-height:1;cursor:pointer;width:32px;height:32px;border-radius:8px}
.panel-close:hover{background:var(--bg3);color:var(--text-main)}
.revise-panel-body{flex:1;min-height:0;overflow:auto;padding:14px;display:flex;flex-direction:column;gap:12px}
.revise-scope-buttons{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.revise-scope-buttons button{background:var(--bg3);border:1px solid var(--border);color:var(--text-muted);border-radius:var(--radius-sm);height:34px;font-size:12px;font-weight:800;cursor:pointer}
.revise-scope-buttons button.active{background:var(--accent-glow);border-color:var(--accent);color:var(--accent)}
.revise-area-row{display:flex;gap:8px}
.revise-area-summary{font-size:12px;color:var(--text-muted);line-height:1.45;min-height:18px}
.revise-chat-log{flex:1;min-height:180px;border:1px solid var(--border);background:rgba(255,255,255,0.02);border-radius:var(--radius-sm);padding:10px;overflow:auto;display:flex;flex-direction:column;gap:8px}
.revise-chat-msg{font-size:12px;line-height:1.45;border-radius:12px;padding:9px 10px;max-width:92%}
.revise-chat-msg.bot{background:var(--bg3);border:1px solid var(--border);color:var(--text-main);align-self:flex-start}
.revise-chat-msg.user{background:var(--accent-glow);border:1px solid var(--accent);color:var(--text-main);align-self:flex-end}
.revise-presets{display:flex;flex-wrap:wrap;gap:8px}
.revise-compose{border-top:1px solid var(--border);padding:12px;display:flex;flex-direction:column;gap:10px}
.revise-compose textarea{width:100%;background:var(--bg3);border:1px solid var(--border);color:var(--text-main);padding:10px;border-radius:var(--radius-sm);font-size:13px;line-height:1.45;resize:vertical;min-height:78px;max-height:170px}
.revise-compose-actions{display:flex;align-items:center;justify-content:space-between;gap:10px}
.revise-compose-actions span{font-size:12px;color:var(--text-muted);line-height:1.35;min-width:0}

/* Modal */
.modal{position:fixed;inset:0;z-index:500;background:rgba(0,0,0,0.7);display:flex;align-items:center;justify-content:center}
.modal-content{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);width:480px;max-width:92vw;padding:24px;box-shadow:var(--shadow)}
.modal-content h3{margin-bottom:18px;font-size:18px}
.modal-subtitle{font-size:13px;color:var(--text-muted);line-height:1.45;margin:-8px 0 16px}
.load-modal-content{width:min(1040px,94vw)}
.settings-modal-content{width:560px}
.settings-grid{display:flex;flex-direction:column;gap:12px}
.settings-grid .opt-row{display:grid;grid-template-columns:150px 1fr;gap:12px;align-items:center;margin-bottom:0}
.settings-grid select,.settings-grid input{width:100%;background:var(--bg3);border:1px solid var(--border);color:var(--text-main);border-radius:var(--radius-sm);padding:8px 10px}
.settings-health{border:1px solid var(--border);border-radius:var(--radius-sm);padding:10px;color:var(--text-muted);font-size:12px;line-height:1.45;background:rgba(255,255,255,.02)}
.settings-health.danger{border-color:rgba(255,71,87,.5);color:#ff9ba5}
.saved-design-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;max-height:min(68vh,620px);overflow:auto;padding-right:4px}
.saved-design-card{appearance:none;background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius-sm);padding:0;text-align:left;color:var(--text-main);cursor:pointer;display:flex;flex-direction:column;overflow:hidden;min-height:274px}
.saved-design-card:hover{border-color:var(--accent);background:var(--accent-glow);transform:translateY(-1px)}
.saved-design-preview{height:168px;background:#0b0d16;display:flex;align-items:center;justify-content:center;border-bottom:1px solid var(--border);position:relative}
.saved-design-preview img{width:100%;height:100%;object-fit:contain;display:block}
.saved-design-preview.missing{font-size:12px;color:var(--text-muted)}
.saved-design-body{display:flex;flex-direction:column;gap:5px;padding:10px 12px 12px;min-height:68px}
.saved-design-title{font-weight:800;font-size:13px;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.saved-design-meta{font-size:12px;color:var(--text-muted);line-height:1.35}
.saved-design-actions{display:flex;gap:8px;margin-top:8px}
.saved-design-actions button{border:1px solid var(--border);border-radius:999px;padding:6px 10px;background:var(--bg2);color:var(--text-main);font-size:11px;font-weight:800;cursor:pointer}
.saved-design-actions button:hover{border-color:var(--accent);color:var(--accent)}
.saved-design-actions .saved-design-delete{border-color:rgba(255,71,87,.45);color:#ff9ba5}
.saved-design-actions .saved-design-delete:hover{background:var(--danger);border-color:var(--danger);color:#fff}
@media(max-width:900px){.saved-design-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.saved-design-list{grid-template-columns:1fr}.saved-design-preview{height:190px}}
.wide-select{width:100%;background:var(--bg3);border:1px solid var(--border);color:var(--text-main);padding:9px 10px;border-radius:var(--radius-sm);font-size:13px}
.working-overlay{position:fixed;inset:0;z-index:700;background:rgba(8,9,16,.62);display:flex;align-items:center;justify-content:center;backdrop-filter:blur(2px)}
.working-card{min-width:320px;max-width:460px;background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px;display:flex;align-items:center;gap:14px}
.working-card strong{display:block;font-size:14px;margin-bottom:4px}
.working-card span{display:block;font-size:12px;color:var(--text-muted);line-height:1.45}
.working-spinner{width:28px;height:28px;border:3px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite;flex-shrink:0}
@keyframes spin{to{transform:rotate(360deg)}}
.opt-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;gap:14px}
.opt-row label{font-size:13px;color:var(--text-muted)}
.opt-row select{background:var(--bg3);border:1px solid var(--border);color:var(--text-main);padding:6px 10px;border-radius:var(--radius-sm);min-width:220px}
.hint{font-size:11px;color:var(--text-muted);line-height:1.5;max-width:60%;text-align:right}
.modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:20px}

::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}