/* ========== THEME ========== */
[data-theme="light"] {
  --bg: #f5f5f0; --surface: #ffffff; --surface-2: #f0efeb; --surface-3: #e8e7e2; --surface-4: #d6d5d0;
  --accent: #2e2e32; --accent-hover: #45454c; --accent-soft: rgba(46,46,50,0.07); --accent-text: #2e2e32;
  --danger: #c0392b; --danger-dim: rgba(192,57,43,0.08);
  --warning: #b8860b; --warning-dim: rgba(184,134,11,0.08);
  --info: #4a6fa5; --info-dim: rgba(74,111,165,0.08);
  --text: #1c1c1e; --text-dim: #6e6e73; --text-muted: #aeaeb2;
  --border: #e5e4e0; --border-focus: #d0cfca;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.04),0 2px 8px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 14px rgba(0,0,0,0.07),0 2px 5px rgba(0,0,0,0.04);
  --shadow-lg: 0 14px 40px rgba(0,0,0,0.10),0 4px 12px rgba(0,0,0,0.06);
  --shadow-xl: 0 24px 70px rgba(0,0,0,0.13),0 8px 24px rgba(0,0,0,0.08);
  --cm-bg: #fafaf8; --cm-gutter: #f0efe9; --cm-line: #b0b0b8; --cm-cur: #2e2e32; --cm-sel: rgba(46,46,50,0.08);
  --cm-str: #7a9a5a; --cm-num: #c97d3a; --cm-prop: #c0392b; --cm-kw: #7c5a9a; --cm-atom: #4a8fa5;
  --overlay: rgba(0,0,0,0.25); --backdrop: rgba(0,0,0,0.15);
  --grad: linear-gradient(135deg,#2e2e32 0%,#48484f 100%);
  --grad-soft: linear-gradient(135deg,rgba(46,46,50,0.9) 0%,rgba(72,72,79,0.9) 100%);
  --glass: rgba(255,255,255,0.78);
  --tab-bg: rgba(255,255,255,0.92);
  --safe-bottom: env(safe-area-inset-bottom,0px);
}
[data-theme="dark"] {
  --bg: #161618; --surface: #1e1e21; --surface-2: #26262a; --surface-3: #2f2f34; --surface-4: #3d3d43;
  --accent: #e5e5ea; --accent-hover: #f5f5f7; --accent-soft: rgba(229,229,234,0.10); --accent-text: #e5e5ea;
  --danger: #e74c3c; --danger-dim: rgba(231,76,60,0.1);
  --warning: #d4a017; --warning-dim: rgba(212,160,23,0.1);
  --info: #5a8ab5; --info-dim: rgba(90,138,181,0.1);
  --text: #ececf1; --text-dim: #98989d; --text-muted: #6e6e73;
  --border: #33333a; --border-focus: #45454c;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.3),0 2px 8px rgba(0,0,0,0.25);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.4),0 2px 6px rgba(0,0,0,0.3);
  --shadow-lg: 0 16px 44px rgba(0,0,0,0.5),0 4px 14px rgba(0,0,0,0.4);
  --shadow-xl: 0 24px 70px rgba(0,0,0,0.55),0 8px 24px rgba(0,0,0,0.45);
  --cm-bg: #1e1e21; --cm-gutter: #1e1e21; --cm-line: #4a4a52; --cm-cur: #e5e5ea; --cm-sel: rgba(229,229,234,0.12);
  --cm-str: #8ab46a; --cm-num: #d49a4a; --cm-prop: #e06c75; --cm-kw: #b08ad4; --cm-atom: #5aa8c5;
  --overlay: rgba(0,0,0,0.6); --backdrop: rgba(0,0,0,0.4);
  --grad: linear-gradient(135deg,#f5f5f7 0%,#c8c8cf 100%);
  --grad-soft: linear-gradient(135deg,rgba(245,245,247,0.92) 0%,rgba(200,200,207,0.92) 100%);
  --glass: rgba(30,30,33,0.78);
  --tab-bg: rgba(30,30,33,0.92);
  --safe-bottom: env(safe-area-inset-bottom,0px);
}

/* ========== RESET ========== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{font-size:14px;-webkit-text-size-adjust:100%}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--text);height:100vh;height:100dvh;overflow:hidden;line-height:1.5;transition:background .35s,color .35s;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
::selection{background:var(--accent-soft);color:var(--accent-text)}
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--surface-4);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}
input,select,textarea,button{font-family:inherit;font-size:inherit}
input::placeholder{color:var(--text-muted)}
a{color:var(--accent-text);text-decoration:none;touch-action:manipulation}
button{outline:none;cursor:pointer;touch-action:manipulation}
:focus{outline:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
input,select,textarea{touch-action:manipulation}

#app{display:flex;flex-direction:column;height:100vh;height:100dvh}

/* ========== ENTRANCE ANIMATION ========== */
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes popIn{0%{opacity:0;transform:scale(.93)}60%{transform:scale(1.03)}100%{opacity:1;transform:scale(1)}}
@keyframes toastIn{from{opacity:0;transform:translateY(-14px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes spin{to{transform:rotate(360deg)}}

/* ========== HEADER ========== */
header{height:56px;background:var(--glass);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 16px;gap:10px;flex-shrink:0;z-index:30;transition:background .35s,border-color .35s}
.logo{display:flex;align-items:center;gap:10px;cursor:pointer;user-select:none}
.logo-img{width:28px;height:28px;border-radius:8px;object-fit:cover;flex-shrink:0}
.logo-text{font-size:15px;font-weight:700;letter-spacing:-.3px;color:var(--text)}
.logo-text small{font-weight:400;font-size:11px;color:var(--text-dim);margin-left:4px}
.header-right{display:flex;gap:8px;margin-left:auto;align-items:center}

/* ========== NAV MENU ========== */
.nav-wrap{position:relative}
.nav-menu{position:absolute;top:calc(100% + 10px);right:0;min-width:180px;background:var(--surface);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow-lg);padding:6px;z-index:60;display:none;animation:popIn .25s cubic-bezier(.2,.8,.3,1.1) both}
.nav-menu.open{display:block}
.nav-menu a,.nav-menu button{display:flex;align-items:center;gap:10px;width:100%;padding:10px 13px;border:none;background:none;border-radius:10px;font-family:inherit;font-size:13px;color:var(--text-dim);cursor:pointer;transition:all .2s;text-align:left;-webkit-tap-highlight-color:transparent}
.nav-menu a i,.nav-menu button i{width:17px;text-align:center;font-size:13px;color:var(--accent-text)}
.nav-menu a:hover,.nav-menu button:hover{background:var(--accent-soft);color:var(--accent-text)}

/* ========== BOTTOM TAB BAR ========== */
.tab-bar{display:flex;align-items:center;justify-content:center;height:56px;background:var(--tab-bg);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-top:1px solid var(--border);flex-shrink:0;padding:0 8px;padding-bottom:var(--safe-bottom);gap:4px;z-index:30;transition:background .35s,border-color .35s;position:relative}
.tab-btn{flex:1;max-width:120px;padding:8px 4px;font-size:11px;font-weight:500;color:var(--text-muted);cursor:pointer;border:none;background:none;border-radius:10px;transition:all .25s;font-family:inherit;display:flex;flex-direction:column;align-items:center;gap:3px;-webkit-tap-highlight-color:transparent;min-height:44px;justify-content:center}
.tab-btn i{font-size:18px;transition:transform .25s}
.tab-btn:hover{color:var(--text-dim)}
.tab-btn.active{color:var(--accent-text);font-weight:600}
.tab-btn.active i{transform:scale(1.05)}
.tab-btn:active i{transform:scale(.9)}

/* ========== MAIN ========== */
.main{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0}
.editor-content{flex:1;overflow:hidden;position:relative}
.tab-panel{display:none;height:100%;overflow-y:auto;-webkit-overflow-scrolling:touch}
.tab-panel.active{display:block;animation:fadeIn .3s ease}

/* ========== SIDEBAR ========== */
.sidebar-backdrop{display:none;position:fixed;inset:0;background:var(--backdrop);z-index:40;opacity:0;transition:opacity .3s;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.sidebar-backdrop.show{display:block;opacity:1}
.sidebar{width:280px;min-width:280px;background:var(--surface);border-right:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden;flex-shrink:0;transition:background .35s,border-color .35s}
.sidebar-header{padding:12px;border-bottom:1px solid var(--border)}
.search-box{width:100%;padding:9px 12px;background:var(--surface-2);border:1px solid var(--border);border-radius:10px;color:var(--text);font-size:13px;outline:none;transition:border-color .2s,box-shadow .2s,background .3s}
.search-box:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.config-list{flex:1;overflow-y:auto;padding:8px;-webkit-overflow-scrolling:touch}
.config-item{padding:12px;border-radius:10px;cursor:pointer;margin-bottom:5px;border:1px solid transparent;transition:all .22s cubic-bezier(.2,.7,.3,1);position:relative;-webkit-tap-highlight-color:transparent;animation:fadeUp .3s ease both}
.config-item:hover{background:var(--surface-2);border-color:var(--border);transform:translateY(-1px)}
.config-item.active{background:var(--accent-soft);border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}
.config-item .name{font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-right:50px}
.config-item .meta{font-size:11px;color:var(--text-dim);margin-top:4px;display:flex;gap:6px;flex-wrap:wrap}
.config-item .meta .sep{color:var(--text-muted)}
.config-item .actions{position:absolute;top:9px;right:7px;display:none;gap:2px}
.config-item:hover .actions,.config-item.active .actions{display:flex;animation:fadeIn .2s ease}
.config-item .actions button{width:24px;height:24px;border:none;background:var(--surface-3);border-radius:6px;color:var(--text-dim);cursor:pointer;font-size:10px;display:flex;align-items:center;justify-content:center;transition:all .18s}
.config-item .actions button:hover{background:var(--accent);color:#fff;transform:scale(1.1)}
.sidebar-footer{padding:8px 10px;border-top:1px solid var(--border);display:flex;gap:6px}
.empty-list{text-align:center;padding:40px 16px;color:var(--text-muted);font-size:12px;line-height:1.9}

/* ========== WELCOME ========== */
.welcome-screen{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;text-align:center;padding:32px 24px;animation:fadeUp .5s ease both}
.welcome-icon{width:80px;height:80px;border-radius:22px;background:var(--grad);display:flex;align-items:center;justify-content:center;color:var(--surface);font-size:32px;margin-bottom:20px;box-shadow:var(--shadow-lg);animation:popIn .5s cubic-bezier(.2,.8,.3,1.2) both}
.welcome-screen h2{font-size:20px;font-weight:700;margin-bottom:8px}
.welcome-screen .accent-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.welcome-screen p{color:var(--text-dim);font-size:13px;margin-bottom:24px;max-width:380px;line-height:1.8}
.welcome-screen .actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}

/* ========== BUTTONS ========== */
.btn{padding:9px 18px;border-radius:10px;font-size:13px;font-weight:500;cursor:pointer;transition:all .22s cubic-bezier(.2,.7,.3,1);border:1px solid transparent;display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap;-webkit-tap-highlight-color:transparent;min-height:40px}
.btn:active{transform:scale(.96)}
.btn i{font-size:13px}
.btn-primary{background:var(--grad);color:var(--surface);border-color:transparent;box-shadow:var(--shadow-sm)}
.btn-primary:hover{filter:brightness(1.06);transform:translateY(-2px);box-shadow:var(--shadow-md)}
.btn-primary:disabled{opacity:.55;cursor:not-allowed;transform:none;box-shadow:none}
.btn-ghost{background:transparent;color:var(--text-dim);border-color:var(--border)}
.btn-ghost:hover{color:var(--text);border-color:var(--border-focus);background:var(--surface-2);transform:translateY(-1px)}
.btn-sm{padding:6px 12px;font-size:12px;min-height:34px;border-radius:8px}
.btn-icon{width:36px;height:36px;padding:0;display:flex;align-items:center;justify-content:center;background:transparent;border:1px solid var(--border);border-radius:10px;color:var(--text-dim);cursor:pointer;transition:all .22s cubic-bezier(.2,.7,.3,1);font-size:14px;-webkit-tap-highlight-color:transparent;flex-shrink:0}
.btn-icon:active{transform:scale(.9)}
.btn-icon:hover{color:var(--accent-text);border-color:var(--accent);background:var(--accent-soft);transform:translateY(-1px);box-shadow:var(--shadow-sm)}

/* ========== FORMS ========== */
.form-row{display:flex;gap:12px;margin-bottom:10px;align-items:flex-start}
.form-group{flex:1;min-width:0}
.form-group label{display:block;font-size:11px;color:var(--text-dim);margin-bottom:5px;font-weight:600;letter-spacing:.4px}
.form-input,.form-select{width:100%;padding:9px 12px;background:var(--surface-2);border:1px solid var(--border);border-radius:10px;color:var(--text);font-size:14px;outline:none;transition:border-color .2s,box-shadow .2s,background .3s}
.form-input:focus,.form-select:focus{border-color:var(--accent);background:var(--surface);box-shadow:0 0 0 3px var(--accent-soft)}
.form-select{cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%236e6e73'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:32px}
.form-check{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:13px;color:var(--text-dim);padding:5px 0;-webkit-tap-highlight-color:transparent;transition:color .2s}
.form-check:hover{color:var(--text)}
.form-check input[type="checkbox"]{width:18px;height:18px;accent-color:var(--accent);cursor:pointer;flex-shrink:0}

/* ========== CARDS ========== */
.item-card{border:1px solid var(--border);border-radius:12px;padding:14px 16px;margin-bottom:8px;background:var(--surface);box-shadow:var(--shadow-sm);position:relative;transition:transform .25s cubic-bezier(.2,.7,.3,1),box-shadow .25s,border-color .25s;animation:fadeUp .3s ease both}
.item-card:hover{border-color:var(--border-focus);box-shadow:var(--shadow-md);transform:translateY(-2px)}
.item-card .item-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.item-card .item-label{font-size:13px;font-weight:600;color:var(--text);display:flex;align-items:center;gap:8px}
.item-card .item-label::before{content:'';width:3px;height:13px;background:var(--grad);border-radius:2px;flex-shrink:0}
.item-card .item-actions{display:flex;gap:4px}
.add-btn{width:100%;padding:12px;background:var(--surface-2);border:1.5px dashed var(--border);border-radius:12px;color:var(--text-dim);cursor:pointer;font-family:inherit;font-size:13px;transition:all .25s;text-align:center;-webkit-tap-highlight-color:transparent;min-height:48px;display:flex;align-items:center;justify-content:center;gap:8px}
.add-btn i{transition:transform .25s}
.add-btn:hover{border-color:var(--accent);color:var(--accent-text);background:var(--accent-soft)}
.add-btn:hover i{transform:rotate(90deg)}

/* ========== TAGS ========== */
.tag-container{display:flex;flex-wrap:wrap;gap:5px;padding:5px 0}
.tag{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;background:var(--surface-3);border:1px solid var(--border);border-radius:999px;font-size:12px;color:var(--text);transition:all .2s;animation:popIn .25s ease both}
.tag:hover{border-color:var(--border-focus)}
.tag .remove{cursor:pointer;color:var(--text-muted);font-size:12px;line-height:1;padding:0 2px;transition:all .2s}
.tag .remove:hover{color:var(--danger);transform:scale(1.2)}
.tag-input-wrap{display:flex;gap:6px;margin-top:5px}
.tag-input-wrap input{flex:1}

/* ========== SECTIONS ========== */
.section{margin-bottom:14px;border:1px solid var(--border);border-radius:16px;overflow:hidden;background:var(--surface);box-shadow:var(--shadow-sm);transition:transform .25s cubic-bezier(.2,.7,.3,1),box-shadow .25s,border-color .25s;animation:fadeUp .35s ease both}
.section:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:var(--border-focus)}
.section-header{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;background:var(--surface-2);border-bottom:1px solid var(--border);cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent;transition:background .2s}
.section-header:active{background:var(--surface-3)}
.section-title{font-size:13px;font-weight:600;display:flex;align-items:center;gap:8px}
.section-title i{color:var(--accent-text);font-size:14px}
.section-title .badge{background:var(--accent-soft);color:var(--accent-text);padding:2px 8px;border-radius:999px;font-size:11px;font-weight:600}
.section-toggle{color:var(--text-dim);font-size:10px;transition:transform .3s}
.section-toggle.collapsed{transform:rotate(-90deg)}
.section-body{padding:14px;transition:background .3s}
.section-body.collapsed{display:none}
.visual-editor{padding:16px;max-width:960px;margin:0 auto}

/* ========== CODEMIRROR ========== */
.raw-editor-wrap{height:100%;display:flex;flex-direction:column}
.raw-editor-wrap .CodeMirror{flex:1;height:auto;font-size:13px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,monospace;background:var(--cm-bg)!important;color:var(--text)!important;transition:background .3s}
.CodeMirror-gutters{background:var(--cm-gutter)!important;border-right:1px solid var(--border)!important}
.CodeMirror-linenumber{color:var(--cm-line)!important}
.CodeMirror-cursor{border-left-color:var(--cm-cur)!important}
.CodeMirror-selected{background:var(--cm-sel)!important}
.CodeMirror-matchingbracket{color:var(--cm-cur)!important;text-decoration:underline}
.cm-s-default .cm-string{color:var(--cm-str)!important}
.cm-s-default .cm-number{color:var(--cm-num)!important}
.cm-s-default .cm-keyword{color:var(--cm-kw)!important}
.cm-s-default .cm-atom{color:var(--cm-atom)!important}
.cm-s-default .cm-property{color:var(--cm-prop)!important}
.raw-fallback{width:100%;flex:1;resize:none;background:var(--cm-bg);color:var(--text);border:none;outline:none;padding:14px;font-family:monospace;font-size:13px;line-height:1.6;tab-size:2}

/* ========== PREVIEW ========== */
.preview-panel{padding:16px;max-width:960px;margin:0 auto}
.preview-card{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:16px;margin-bottom:12px;box-shadow:var(--shadow-sm);transition:transform .25s,box-shadow .25s,border-color .25s;animation:fadeUp .3s ease both}
.preview-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:var(--border-focus)}
.preview-card h3{font-size:14px;font-weight:600;margin-bottom:12px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.preview-card h3 i{color:var(--accent-text)}
.preview-card h3 .count{background:var(--accent-soft);color:var(--accent-text);padding:2px 8px;border-radius:999px;font-size:11px}
.preview-stats{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.preview-stat{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;background:var(--surface);border:1px solid var(--border);border-radius:10px;font-size:12px;transition:all .22s;animation:fadeUp .3s ease both}
.preview-stat:hover{transform:translateY(-2px);box-shadow:var(--shadow-sm);border-color:var(--border-focus)}
.preview-stat i{color:var(--accent-text)}
.preview-stat .num{color:var(--accent-text);font-weight:700;font-size:14px}
.preview-table{width:100%;border-collapse:collapse;table-layout:fixed}
.preview-table th{text-align:left;font-size:11px;color:var(--text-dim);padding:7px;border-bottom:1px solid var(--border);font-weight:600}
.preview-table td{padding:7px;font-size:12px;border-bottom:1px solid var(--border);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.preview-table tr:last-child td{border-bottom:none}
.preview-table tr:hover td{background:var(--surface-2)}

/* ========== VALIDATION ========== */
.validation-panel{padding:12px 14px;background:var(--surface);border-top:1px solid var(--border);max-height:180px;overflow-y:auto;display:none;transition:background .3s}
.validation-panel.show{display:block;animation:fadeIn .3s ease}
.validation-item{padding:6px 0;font-size:12px;display:flex;align-items:flex-start;gap:8px;border-bottom:1px solid var(--border);animation:fadeUp .25s ease both}
.validation-item:last-child{border-bottom:none}
.validation-item .v-icon{flex-shrink:0;margin-top:1px;font-size:12px}
.validation-item.error .v-icon{color:var(--danger)}
.validation-item.warn .v-icon{color:var(--warning)}
.validation-item.ok .v-icon{color:var(--accent)}

/* ========== STATUS ========== */
.status-bar{height:34px;background:var(--glass);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-top:1px solid var(--border);display:flex;align-items:center;padding:0 14px;gap:14px;font-size:11px;color:var(--text-dim);flex-shrink:0;transition:background .35s}
.status-dot{width:6px;height:6px;border-radius:50%;display:inline-block;margin-right:4px}
.status-dot.valid{background:var(--accent);box-shadow:0 0 6px var(--accent)}
.status-item{display:flex;align-items:center;gap:4px;white-space:nowrap}
.status-spacer{flex:1}

/* ========== MODAL ========== */
.modal-overlay{position:fixed;inset:0;background:var(--overlay);display:flex;align-items:flex-end;justify-content:center;z-index:100;opacity:0;pointer-events:none;transition:opacity .28s;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.modal-overlay.show{opacity:1;pointer-events:auto}
.modal{background:var(--surface);border:1px solid var(--border);border-radius:18px 18px 0 0;padding:24px;width:100%;max-width:500px;max-height:88vh;overflow-y:auto;transform:translateY(100%);transition:transform .35s cubic-bezier(.3,.7,.3,1.1),background .3s;box-shadow:var(--shadow-xl)}
.modal-overlay.show .modal{transform:translateY(0)}
.modal h3{font-size:15px;font-weight:700;margin-bottom:18px;display:flex;align-items:center;gap:10px}
.modal h3 i{color:var(--accent-text)}
.modal .form-group{margin-bottom:14px}
.modal .modal-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:20px}
.modal .modal-actions .btn{flex:1}
.modal .handle{width:36px;height:4px;background:var(--surface-4);border-radius:2px;margin:0 auto 16px}

/* ========== CREATE TABS ========== */
.create-tabs{display:flex;gap:4px;margin-bottom:14px;background:var(--surface-2);border-radius:10px;padding:4px}
.create-tab{flex:1;padding:9px 6px;border:none;background:transparent;border-radius:8px;font-family:inherit;font-size:12px;color:var(--text-dim);cursor:pointer;transition:all .25s;white-space:nowrap;-webkit-tap-highlight-color:transparent;display:flex;align-items:center;justify-content:center;gap:5px}
.create-tab i{font-size:12px}
.create-tab.active{background:var(--surface);color:var(--accent-text);font-weight:600;box-shadow:var(--shadow-sm)}
.create-panel{display:none}
.create-panel.active{display:block;animation:fadeIn .25s ease}

/* ========== FILE DROP ZONE ========== */
.file-drop-zone{border:2px dashed var(--border);border-radius:12px;padding:28px 16px;text-align:center;cursor:pointer;transition:all .25s;color:var(--text-dim);font-size:13px;-webkit-tap-highlight-color:transparent}
.file-drop-zone:hover,.file-drop-zone.dragover{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-text);transform:scale(1.01)}
.file-drop-zone i{font-size:28px;display:block;margin-bottom:8px;opacity:.5}
.file-info{display:flex;align-items:center;gap:8px;padding:10px 14px;background:var(--accent-soft);border:1px solid var(--accent);border-radius:10px;margin-top:10px;font-size:13px;color:var(--accent-text);animation:popIn .3s ease both}

/* ========== TOAST ========== */
.toast-container{position:fixed;top:68px;left:16px;right:16px;display:flex;flex-direction:column;align-items:center;gap:8px;z-index:200;pointer-events:none}
.toast{padding:10px 18px;border-radius:12px;font-size:13px;font-family:inherit;border:1px solid;pointer-events:auto;animation:toastIn .35s cubic-bezier(.2,.8,.3,1.1) both;text-align:center;max-width:380px;box-shadow:var(--shadow-md);display:flex;align-items:center;gap:8px}
.toast i{font-size:13px}
.toast.success{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-text)}
.toast.error{background:var(--danger-dim);border-color:var(--danger);color:var(--danger)}
.toast.info{background:var(--info-dim);border-color:var(--info);color:var(--info)}
.toast.warning{background:var(--warning-dim);border-color:var(--warning);color:var(--warning)}

.spinner{display:inline-block;width:14px;height:14px;border:2px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .6s linear infinite}
input[type="file"]{display:none}

/* ========== RESPONSIVE ========== */
@media(min-width:769px){
  .modal{border-radius:18px;align-self:center;max-height:80vh}
  .modal .handle{display:none}
  .modal-overlay{align-items:center}
}
@media(max-width:768px){
  .sidebar{position:fixed;top:0;left:0;bottom:0;width:280px;max-width:80vw;transform:translateX(-100%);transition:transform .32s cubic-bezier(.3,.7,.3,1),background .3s;z-index:50;box-shadow:var(--shadow-lg)}
  .sidebar.open{transform:translateX(0)}
  .form-row{flex-direction:column;gap:8px}
  .form-group{max-width:100%!important}
  .status-bar{font-size:10px;gap:8px;padding:0 10px;height:30px}
  .status-shortcuts{display:none}
}
@media(max-width:480px){
  header{padding:0 12px;gap:6px;height:50px}
  .logo-img{width:24px;height:24px;border-radius:7px}
  .logo-text{font-size:14px}
  .logo-text small{display:none}
  .tab-bar{height:52px;padding:0 6px}
  .tab-btn{font-size:10px;max-width:100px;min-height:44px}
  .tab-btn i{font-size:20px}
  .btn{padding:8px 14px;font-size:13px;min-height:42px}
  .btn-sm{min-height:36px}
  .btn-icon{width:38px;height:38px;font-size:15px}
  .section-header{padding:12px}
  .section-body{padding:12px}
  .item-card{padding:12px}
  .form-input,.form-select{padding:11px 12px;font-size:16px}
  .preview-panel,.visual-editor{padding:10px}
  .status-bar{display:none}
  .welcome-icon{width:64px;height:64px;font-size:26px;border-radius:18px}
  .welcome-screen h2{font-size:18px}
  .welcome-screen{padding:20px 16px}
  .toast-container{top:56px;left:12px;right:12px}
  .create-tab{font-size:11px;padding:8px 4px}
  .modal{padding:18px 14px}
  .preview-table td{white-space:normal}
}
@supports(padding:env(safe-area-inset-bottom)){
  .tab-bar{padding-bottom:env(safe-area-inset-bottom)}
  .toast-container{padding-top:env(safe-area-inset-top)}
}