:root{font-family:system-ui,-apple-system,Segoe UI,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color-scheme:dark;--bg-primary: #141414;--bg-secondary: #1e1e1e;--bg-tertiary: #2a2a2a;--bg-hover: #333333;--text-primary: #f0f0f0;--text-secondary: #a0a0a0;--text-tertiary: #636363;--border-color: #333333;--border-focus: #6366f1;--input-bg: #1e1e1e;--input-text: #f0f0f0;--accent: #6366f1;--accent-hover: #4f52d4;--error-color: #f87171;--error-bg: #2d1515;--warning-color:#fbbf24;--warning-bg: #2d2010;--success-color:#4ade80;--info-color: #60a5fa;--sp-1: 4px;--sp-2: 8px;--sp-3: 12px;--sp-4: 16px;--r-sm: 4px;--r-md: 6px;--r-lg: 8px;--shadow-sm: 0 1px 3px rgba(0,0,0,.4);--shadow-md: 0 4px 12px rgba(0,0,0,.5);color:var(--text-primary);background-color:var(--bg-primary)}:root[data-theme=light]{color-scheme:light;--bg-primary: #f8f8f8;--bg-secondary: #ffffff;--bg-tertiary: #efefef;--bg-hover: #e4e4e4;--text-primary: #111111;--text-secondary: #555555;--text-tertiary: #909090;--border-color: #dedede;--input-bg: #ffffff;--input-text: #111111;--error-color: #dc2626;--error-bg: #fef2f2;--warning-color:#d97706;--warning-bg: #fffbeb;--success-color:#16a34a;--info-color: #2563eb}*,*:before,*:after{box-sizing:border-box}html,body,#root{margin:0;padding:0;width:100%;height:100%;height:100dvh;overflow:hidden}input,select,textarea{background-color:var(--input-bg);border:1px solid var(--border-color);color:var(--input-text);border-radius:var(--r-sm);font-family:inherit;font-size:13px;padding:5px 8px;transition:border-color .15s}input:focus,select:focus,textarea:focus{outline:none;border-color:var(--border-focus);box-shadow:0 0 0 2px color-mix(in srgb,var(--border-focus) 25%,transparent)}input::placeholder{color:var(--text-tertiary)}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--text-tertiary)}.app-root{display:flex;flex-direction:column;height:100vh;height:100dvh;width:100%;overflow:hidden}.app-body{display:flex;flex:1;overflow:hidden;position:relative}.toolbar{display:flex;align-items:center;gap:var(--sp-2);padding:7px 12px;padding-top:max(7px,env(safe-area-inset-top));padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right));border-bottom:1px solid var(--border-color);background:var(--bg-secondary);flex-shrink:0;min-height:48px;flex-wrap:wrap}.toolbar-sep{width:1px;height:20px;background:var(--border-color);flex-shrink:0}.toolbar-spacer{flex:1}.btn{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;font-size:13px;font-weight:500;font-family:inherit;border-radius:var(--r-md);border:1px solid transparent;cursor:pointer;white-space:nowrap;transition:background-color .15s,box-shadow .15s,opacity .15s;flex-shrink:0;-webkit-user-select:none;user-select:none;text-decoration:none}.btn:disabled{opacity:.45;cursor:not-allowed;pointer-events:none}.btn:focus-visible{outline:2px solid var(--border-focus);outline-offset:2px}.btn-default{background:var(--bg-tertiary);color:var(--text-primary);border-color:var(--border-color)}.btn-default:hover{background:var(--bg-hover)}.btn-primary{background:var(--accent);color:#fff}.btn-primary:hover{background:var(--accent-hover)}.btn-success{background:#16a34a;color:#fff}.btn-success:hover{background:#15803d}.btn-info{background:#2563eb;color:#fff}.btn-info:hover{background:#1d4ed8}.btn-ghost{background:transparent;color:var(--text-secondary);border-color:transparent}.btn-ghost:hover{background:var(--bg-tertiary);color:var(--text-primary)}.btn-icon{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border-radius:var(--r-md);border:none;background:transparent;color:var(--text-secondary);font-size:16px;cursor:pointer;flex-shrink:0;transition:background-color .15s,color .15s}.btn-icon:hover{background:var(--bg-hover);color:var(--text-primary)}.btn-icon:focus-visible{outline:2px solid var(--border-focus);outline-offset:2px}.btn-label{cursor:pointer}.btn-label input[type=file]{display:none}.dtd-panel{display:flex;flex-direction:column;width:280px;min-width:280px;border-right:1px solid var(--border-color);background:var(--bg-secondary);overflow:hidden;transition:width .2s ease,min-width .2s ease;flex-shrink:0}.dtd-panel.collapsed{width:0;min-width:0}.dtd-panel-header{display:flex;align-items:center;gap:var(--sp-1);padding:6px 8px 6px 12px;border-bottom:1px solid var(--border-color);min-height:36px;flex-shrink:0}.dtd-panel-title{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text-tertiary);flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dtd-mobile-chevron{display:none;font-size:10px;color:var(--text-tertiary);flex-shrink:0}.dtd-panel-title span{font-weight:400;text-transform:none;letter-spacing:0;color:var(--text-secondary);margin-left:6px}.dtd-panel-content{flex:1;overflow-y:auto;padding:8px}.dtd-show-btn{position:absolute;left:0;top:50%;transform:translateY(-50%);z-index:10;writing-mode:vertical-lr;rotate:180deg;height:80px;width:20px;font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;background:var(--bg-secondary);color:var(--text-tertiary);border:1px solid var(--border-color);border-left:none;border-radius:0 var(--r-sm) var(--r-sm) 0;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:color .15s,background .15s}.dtd-show-btn:hover{color:var(--text-primary);background:var(--bg-hover)}.editor-panel{flex:1;overflow-y:auto;background:var(--bg-primary);min-width:0;padding-bottom:env(safe-area-inset-bottom);padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}.error-banner{display:flex;align-items:center;justify-content:space-between;padding:6px 12px;font-size:13px;background:var(--error-bg);color:var(--error-color);border-bottom:1px solid var(--error-color);flex-shrink:0}@media(max-width:639px){.toolbar{padding:6px 8px;padding-top:max(6px,env(safe-area-inset-top));padding-left:max(8px,env(safe-area-inset-left));padding-right:max(8px,env(safe-area-inset-right));gap:6px;min-height:44px}.toolbar-sep{display:none}.dtd-toolbar-toggle{display:none!important}.app-body{flex-direction:column}.dtd-mobile-chevron{display:inline}.dtd-panel-close{display:none}.dtd-panel{width:100%!important;min-width:0!important;border-right:none;border-bottom:1px solid var(--border-color);max-height:35vh;transition:none}.dtd-panel.collapsed{width:100%!important;min-width:0!important}.dtd-panel.collapsed .dtd-panel-content{display:none}.dtd-panel-header{cursor:pointer}.dtd-show-btn{display:none}.editor-panel{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch}}@media(min-width:640px)and (max-width:1023px){.dtd-panel{width:240px;min-width:240px}.dtd-panel.collapsed{width:0;min-width:0}}