:root{
  --bg:#070808;
  --nav-bg:#0f1114;
  --surface:#13181f;
  --surface-strong:#0f1114;
  --text:#e7eef7;
  --muted:#7d8ca3;
  --accent:#2d7d46;
  --accent-strong:#1f6036;
  --danger:#f14d4d;
  --border:#1c232b;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:Segoe UI,Arial,sans-serif;background:radial-gradient(circle at top left, rgba(45,119,70,0.16), transparent 20%),radial-gradient(circle at bottom right, rgba(22,68,40,0.12), transparent 20%),linear-gradient(180deg,#070808 0%,#0c1115 100%);color:var(--text)}
button,input,textarea{font:inherit}
button{cursor:pointer}
a{color:inherit;text-decoration:none}

.site-header{display:flex;align-items:center;justify-content:space-between;padding:16px 22px;background:var(--surface);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:10}
.logo{font-weight:700;color:var(--text);text-decoration:none;font-size:1rem;letter-spacing:0.06em}
.logo span{color:var(--accent);font-weight:700;margin-left:6px}
.header-right{display:flex;gap:12px;align-items:center;flex-wrap:wrap}

.btn{background:transparent;border:1px solid var(--border);color:var(--text);padding:8px 14px;min-height:38px;transition:background 0.2s ease,border-color 0.2s ease}
.btn.accent{background:var(--accent);border-color:var(--accent);color:#07131b}
.btn.secondary{background:rgba(255,255,255,0.04);border-color:var(--border)}
.btn:hover{background:rgba(255,255,255,0.08)}

.main-content{padding:24px;max-width:1260px;margin:0 auto;display:grid;gap:22px}
.panel{background:var(--surface-strong);border:1px solid var(--border);padding:18px;border-radius:0}
.panel-header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:18px;flex-wrap:wrap}
.panel-header h2,.json-panel-header h3{margin:0;font-size:1.15rem}
.panel-header p,.json-panel-header .hint{margin:8px 0 0;color:var(--muted);font-size:0.95rem;max-width:580px}

.project-area{display:flex;flex-direction:column;gap:18px}
.group-card{background:var(--surface);border:1px solid var(--border);padding:18px}
.group-header{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.group-header h3,.group-title{margin:0;font-size:1.05rem;font-weight:700}
.group-controls{display:flex;gap:10px;flex-wrap:wrap}
.group-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));align-items:start}
.input-label{display:grid;gap:8px}
.input-label span{font-size:0.85rem;color:var(--muted)}
.input-label input,
.input-label select{width:100%;appearance:none;border:1px solid var(--border);border-radius:0;background:var(--bg);color:var(--text);padding:10px 12px}
.input-label select{background-image:linear-gradient(45deg,transparent 50%,var(--text) 50%),linear-gradient(135deg,var(--text) 50%,transparent 50%);
  background-position:calc(100% - 16px) calc(1em + 2px),calc(100% - 11px) calc(1em + 2px);
  background-size:5px 5px,5px 5px;
  background-repeat:no-repeat;cursor:pointer}
  .input-grid{display:grid;gap:12px}
  .project-card{background:rgba(255,255,255,0.03);border:1px solid var(--border);padding:14px;position:relative;cursor:default}
  .group-card{background:var(--surface);border:1px solid var(--border);padding:18px;cursor:grab}
  .group-card.dragging{opacity:0.5}
  .group-card.drag-over{outline:2px dashed var(--accent);outline-offset:-2px}
  .project-row{display:grid;gap:12px;grid-template-columns:repeat(2,minmax(0,1fr))}
  .project-row .input-label{margin-bottom:0}
  .textarea-label{display:grid;gap:8px}
  textarea{width:100%;min-height:180px;resize:vertical;padding:14px;border:1px solid var(--border);background:var(--surface);color:var(--text);font-family:ui-monospace,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace}

  .preview{display:grid;gap:18px}
  .preview-card{border:1px solid var(--border);background:var(--surface);overflow:hidden}
  .preview-card-header{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px;background:rgba(255,255,255,0.02)}
  .preview-card-header h4{margin:0}
  .progress-bar{height:10px;background:var(--border);border-radius:0;overflow:hidden;position:relative}
  .progress-bar::after{content:"";position:absolute;top:0;left:0;height:100%;width:var(--progress,0%);background:linear-gradient(90deg,var(--accent),var(--accent-strong));transition:width 0.45s ease}
  .progress-value{font-size:0.88rem;color:var(--muted);margin-top:10px}
  .project-summary{display:grid;gap:14px;padding:16px}
  .project-line{display:flex;justify-content:space-between;gap:10px;align-items:center;flex-wrap:wrap}
  .project-meta{display:grid;gap:6px}
  .status-pill{padding:6px 12px;border-radius:999px;font-size:0.78rem;font-weight:700;text-transform:uppercase;letter-spacing:0.02em}
  .status-done{color:var(--accent)}
  .status-open{color:var(--accent)}
  .status-alert{color:var(--danger)}
  .status-normal{color:var(--text)}
  .text-muted{color:var(--muted)}
  .json-panel{display:grid;gap:12px}
  .json-panel-header{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap}
  textarea#json-output{min-height:260px;border:1px solid var(--border);background:var(--surface);color:var(--text);padding:14px}
  .tooltip{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:var(--surface);border:1px solid var(--border);padding:10px;min-width:220px;display:none;box-shadow:0 6px 18px rgba(0,0,0,0.4);z-index:10}
  .project-card:hover .tooltip{display:block}
  .site-footer{padding:12px 20px;background:var(--surface);border-top:1px solid var(--border);color:var(--muted);font-size:0.9rem}

  @media (max-width:980px){.main-content{padding:18px}}
  @media (max-width:840px){.project-row{grid-template-columns:1fr}}
  @media (max-width:720px){.panel-header,.group-header{flex-direction:column;align-items:stretch}}