:root { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #20302e; background: #f5f7f6; line-height: 1.5; }
* { box-sizing: border-box; }
body { margin: 0; }
header { display: flex; justify-content: space-between; align-items: center; padding: 20px 28px; background: #fff; border-bottom: 1px solid #dbe4df; gap: 16px; }
header strong { font-size: 22px; letter-spacing: -.6px; }
header > span, .muted { color: #667773; font-size: 13px; }
.tag { display: inline-block; margin-left: 14px; padding: 3px 8px; border-radius: 5px; background: #eaf3ee; color: #28644e; font-size: 12px; }
.notice { padding: 10px 28px; font-size: 13px; color: #705326; background: #fff6df; }
#status { position: sticky; top: 0; z-index: 2; background: #f5f7f6; padding: 10px 28px; min-height: 44px; border-bottom: 1px solid #e0e7e3; overflow-wrap: anywhere; }
dialog { border: 1px solid #bccbc3; border-radius: 12px; padding: 24px; max-width: 480px; color: #20302e; }
dialog::backdrop { background: #152c2260; }
#status[data-error="true"] { color: #a12929; background: #fff0ef; }
.layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); min-height: 80vh; }
aside { padding: 22px; border-right: 1px solid #dbe4df; background: #fff; }
main { padding: 24px 30px 60px; max-width: 1500px; min-width: 0; width: 100%; }
h1 { font-size: 26px; margin: 0; letter-spacing: -.5px; } h2 { font-size: 17px; margin: 0; } h3 { font-size: 14px; }
.section-title, .toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.toolbar { justify-content: flex-start; margin-top: 14px; }
label { display: block; font-size: 13px; color: #4d625b; margin-bottom: 12px; }
input, textarea, select { display: block; width: 100%; background: #fff; border: 1px solid #bccbc3; border-radius: 6px; padding: 9px 10px; margin-top: 5px; color: #20302e; font: inherit; }
textarea { resize: vertical; min-height: 105px; font-family: ui-monospace, SFMono-Regular, monospace; font-size: 13px; line-height: 1.7; }
input:focus, textarea:focus, select:focus { outline: 2px solid #79b799; outline-offset: 1px; }
input[type="checkbox"] { display: inline; width: auto; margin-right: 7px; }
button { cursor: pointer; border: 1px solid #c4d1c9; background: #fff; color: #274a3b; border-radius: 6px; padding: 8px 12px; font: inherit; font-size: 13px; }
button:hover { background: #edf5ef; } button:disabled { opacity: .45; cursor: default; }
button.primary { color: #fff; background: #24684a; border-color: #24684a; }
button.danger { color: #a23d36; }
nav button { display: block; width: 100%; text-align: left; margin: 6px 0; overflow-wrap: anywhere; }
nav button.selected { background: #e9f4ec; border-color: #92b7a0; }
nav small { display: block; color: #6b7c73; }
aside form { margin-bottom: 26px; }
#create-form { border-top: 1px solid #e0e7e3; margin-top: 25px; padding-top: 8px; }
.columns { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.card { background: #fff; border: 1px solid #dbe4df; border-radius: 10px; padding: 20px; margin-bottom: 18px; min-width: 0; }
.block, .variable { border: 1px solid #e0e7e3; padding: 14px; border-radius: 7px; margin-top: 12px; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.row > * { min-width: 0; }
.compact { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 10px; }
.compact label { margin: 0 auto 0 0; }
pre { white-space: pre-wrap; overflow-wrap: anywhere; background: #f5f7f6; padding: 14px; border-radius: 6px; font: 13px/1.8 ui-monospace, SFMono-Regular, monospace; max-height: 500px; overflow: auto; }
.history { border-top: 1px solid #e0e7e3; padding: 12px 0; overflow-wrap: anywhere; font-size: 13px; }
.history p { margin: 4px 0; }
.empty { text-align: center; padding: 100px 20px; color: #728479; }
details summary { cursor: pointer; font-size: 13px; }
@media (max-width: 1100px) { .columns { grid-template-columns: 1fr; } }
@media (max-width: 700px) { .layout { grid-template-columns: 1fr; } aside { border-right: 0; } main { padding: 18px; } header { flex-wrap: wrap; } .row { grid-template-columns: 1fr; } }