*{box-sizing:border-box}
body{margin:0;font-family:Arial,"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;background:#fff7ed;color:#111827}
a{color:#2563eb;text-decoration:none}
button,input,textarea{font:inherit}
button{border:0;background:#7c2d12;color:#fff;border-radius:6px;padding:10px 14px;cursor:pointer;box-shadow:0 2px 0 rgba(124,45,18,.22)}
button:hover{background:#9a3412}
button.danger{background:#dc2626}
button.danger:hover{background:#991b1b}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:18px 24px;background:linear-gradient(135deg,#7f1d1d,#f97316);color:#fff;box-shadow:0 10px 30px rgba(127,29,29,.18)}
.topbar h1{font-size:22px;margin:0;letter-spacing:0}
.topbar span{font-size:13px;color:#ffedd5}
.wrap{max-width:1120px;margin:24px auto;padding:0 18px}
.panel{background:#fff;border:1px solid #fed7aa;border-radius:8px;padding:18px;margin-bottom:18px;box-shadow:0 10px 30px rgba(124,45,18,.08)}
.panel h2{font-size:18px;margin:0 0 14px}
.form-row{display:grid;grid-template-columns:1fr 240px auto;gap:12px;align-items:end}
label{display:block;font-size:12px;font-weight:700;color:#374151}
input{display:block;width:100%;margin-top:6px;border:1px solid #d1d5db;border-radius:6px;padding:10px;background:#fff}
.notice{padding:12px 14px;background:#fef3c7;border:1px solid #f59e0b;border-radius:6px}
.table{width:100%}
.tr{display:grid;grid-template-columns:1.4fr 1fr 1.4fr 1.6fr;gap:12px;align-items:center;padding:12px 0;border-top:1px solid #e5e7eb}
.tr.head{font-weight:700;color:#4b5563;border-top:0}
.actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.actions form{display:inline}
.actions button{padding:6px 10px;background:#4b5563}
.empty{color:#6b7280}
.editor-page{overflow:hidden}
.editor-shell{display:grid;grid-template-columns:292px minmax(430px,1fr) 372px;height:100vh}
.sidebar{background:#fffdf8;border-right:1px solid #fed7aa;padding:16px;overflow:auto}
.sidebar h1{font-size:18px;margin:18px 0}
.sidebar h2{font-size:14px;margin:0 0 10px}
.back{display:inline-block;margin-bottom:4px}
.button-stack{display:grid;grid-template-columns:1fr;gap:8px;margin-top:16px}
.button-stack a{display:block;text-align:center;border:1px solid #f97316;border-radius:6px;padding:10px;background:#fff7ed;color:#9a3412;font-weight:700}
.status{min-height:22px;font-weight:700;color:#047857}
.hint{font-size:12px;line-height:1.6;color:#6b7280}
.advanced-settings{margin-top:10px}
.advanced-settings summary,.editor-panel summary{cursor:pointer;font-size:13px;font-weight:700}
.editor-panel{border-top:1px solid #fed7aa;margin-top:16px;padding-top:14px}
.gjs-blocks-c{display:grid;grid-template-columns:1fr;gap:8px}
.gjs-block{width:auto;min-height:42px;margin:0;padding:10px 12px;font-size:12px;line-height:1.35;border-radius:8px;border:1px solid #fed7aa;background:#fff;color:#7c2d12;text-align:left}
.gjs-block-label{white-space:normal;line-height:1.35}
.gjs-block-category .gjs-title{padding:8px 0;font-size:12px;font-weight:700}
.gjs-sm-sector .gjs-sm-title,.gjs-layer-title{font-size:12px}
.canvas-area{min-width:0}
#gjs{height:100vh}
.gjs-cv-canvas{background:#f1f5f9}
.gjs-frame-wrapper{box-shadow:0 0 0 1px #9ca3af,0 10px 30px rgba(0,0,0,.16)}
.gjs-breadcrumbs{display:none!important}
.design-dock{background:#fffdf8;color:#111827;border-left:1px solid #fed7aa;padding:14px;overflow:auto}
.design-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.design-head h2{font-size:16px;margin:0}
.design-head button,.code-actions button,.code-tabs button,.class-tool button,.mini-buttons button,.preset-grid button{padding:8px 10px;border-radius:6px;background:#7c2d12;color:#fff}
.selected-card{margin:12px 0;padding:12px;border:1px solid #fed7aa;border-radius:8px;background:#fff7ed}
.selected-card dl{display:grid;grid-template-columns:54px 1fr;gap:8px;margin:0;font-size:12px}
.selected-card dt{font-weight:700;color:#64748b}
.selected-card dd{margin:0;word-break:break-all}
.style-box{border-top:1px solid #fed7aa;margin-top:14px;padding-top:14px}
.style-box h3{font-size:14px;margin:0 0 10px}
.control-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.control-grid label{font-size:11px}
.control-grid input{padding:8px}
.control-grid input[type=color]{height:38px;padding:3px}
.mini-buttons,.preset-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.mini-buttons button,.preset-grid button{font-size:12px;background:#334155}
.preset-grid button{background:#be123c}
.swatch-box{margin-top:12px}
.swatch-box p{margin:8px 0 6px;font-size:11px;font-weight:700;color:#64748b}
.swatches{display:flex;gap:7px;flex-wrap:wrap}
.swatches button{width:28px;height:28px;padding:0;border-radius:8px;border:1px solid #cbd5e1;background:var(--swatch);box-shadow:0 1px 0 rgba(15,23,42,.15)}
.swatches button:hover{outline:2px solid #f97316;outline-offset:2px}
.code-panel{border-top:1px solid #fed7aa;margin-top:14px;padding-top:14px}
.code-panel summary{cursor:pointer;font-size:13px;font-weight:700}
.code-tabs{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0}
.code-tabs button.active{background:#2563eb}
.auto-apply{display:flex;align-items:center;gap:8px;color:#475569;margin:0 0 12px}
.auto-apply input{width:auto;margin:0}
.class-tool{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:end;margin-bottom:12px}
.class-tool label{color:#374151}
.class-tool input{background:#fff;color:#111827;border-color:#d1d5db}
.code-editor{display:block;width:100%;height:280px;min-height:240px;resize:vertical;border:1px solid #334155;border-radius:6px;padding:12px;background:#020617;color:#d1fae5;font-family:Consolas,"Courier New",monospace;font-size:12px;line-height:1.55;tab-size:2}
.code-editor.hidden{display:none}
.code-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.design-dock .hint{color:#64748b}
.selected-css{max-height:220px;overflow:auto;margin:0;padding:12px;border-radius:8px;border:1px solid #334155;background:#020617;color:#bfdbfe;font-family:Consolas,"Courier New",monospace;font-size:11px;line-height:1.65;white-space:pre-wrap}
.export-note{margin-top:14px;padding:10px;border-radius:8px;background:#fffbeb;border:1px solid #fde68a;color:#92400e;font-size:12px;line-height:1.6}
.export-note p{margin:0}
.exporter-page{display:grid;place-items:center;height:100vh}
.exporter-box{width:360px;background:#fff;border:1px solid #e5e7eb;border-radius:8px;padding:24px;text-align:center}
.exporter-box h1{font-size:20px;margin:0 0 10px}
.exporter-box #gjs{height:1px;overflow:hidden;opacity:0}
@media (max-width: 800px){
  .form-row,.tr,.editor-shell{grid-template-columns:1fr}
  .editor-shell{height:auto}
  .sidebar{border-right:0;border-bottom:1px solid #d1d5db}
  .canvas-area,#gjs{height:calc(100vh - 260px)}
  .design-dock{border-left:0}
  .code-editor{height:360px}
}