/* CSS Grid generator (#59) */
.container--grid-tool{max-width:1500px}.layout-mode-selector{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin:1rem 0 1.25rem;padding:1rem;border:1px solid #b9d8d3;border-radius:16px;background:#f4fbfa}.layout-mode-selector h2,.layout-mode-selector p{margin:.1rem 0}.layout-mode-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem;min-width:min(100%,24rem)}.layout-mode-tabs [role=tab]{min-width:0;padding:.75rem .9rem;border:1px solid #9fc8c2;border-radius:999px;background:#fff;color:#164e49;font:inherit;font-weight:800;cursor:pointer}.layout-mode-tabs [role=tab][aria-selected=true]{border-color:#146b63;background:#146b63;color:#fff}.layout-mode-tabs [role=tab]:focus-visible{outline:3px solid rgba(20,107,99,.32);outline-offset:3px}.layout-mode-panel[hidden]{display:none}.grid-generator-panel{margin:1.5rem 0 2.5rem;padding:clamp(1rem,2.8vw,2rem);border:1px solid #b9d8d3;border-radius:24px;background:linear-gradient(155deg,#f4fbfa 0,#fff 48%,#f7faf9 100%);box-shadow:0 18px 48px rgba(19,73,68,.09);overflow:hidden}.grid-generator-heading,.grid-generator-card-heading,.grid-track-heading,.grid-code-block>div,.grid-item-toolbar{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem}.grid-generator-heading h2,.grid-generator-card-heading h3,.grid-track-heading h4,.grid-code-block h4{margin:0}.grid-generator-heading>div,.grid-generator-card-heading>div,.grid-item-toolbar>div{min-width:0}.grid-generator-step{margin:0 0 .3rem;color:#146b63;font-size:.78rem;font-weight:800;letter-spacing:.12em}.grid-preset-section{margin:1.25rem 0}.grid-preset-section h3{margin:0 0 .7rem}.grid-presets{display:flex;flex-wrap:wrap;gap:.55rem}.grid-presets button,.grid-item-tab{min-height:42px;padding:.55rem .8rem;border:1px solid #9fc8c2;border-radius:10px;background:#fff;color:#164e49;font:inherit;font-weight:700;cursor:pointer}.grid-presets button:hover,.grid-item-tab:hover{border-color:#146b63;background:#ecf8f6}.grid-generator-workspace{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(360px,.92fr);gap:1rem;align-items:start}.grid-generator-settings,.grid-generator-results{display:grid;gap:1rem;min-width:0}.grid-generator-card{min-width:0;padding:1.15rem;border:1px solid #cae0dc;border-radius:18px;background:#fff;box-shadow:0 8px 24px rgba(21,80,73,.06)}.grid-generator-card-heading{margin-bottom:1rem}.grid-generator-card-heading>span{display:grid;flex:0 0 32px;width:32px;height:32px;place-items:center;border-radius:50%;background:#146b63;color:#fff;font-weight:800}.grid-generator-card-heading p{margin:.25rem 0 0;color:#566a67;font-size:.92rem}.grid-control-grid,.grid-placement-grid,.grid-track-groups{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem}.grid-control-grid>label,.grid-placement-grid label,.grid-track-editor label{display:grid;gap:.35rem;min-width:0;color:#314d49;font-size:.88rem;font-weight:700}.grid-control-grid input,.grid-control-grid select,.grid-placement-grid input,.grid-placement-grid select,.grid-track-editor input,.grid-track-editor select{width:100%;max-width:100%;min-width:0;min-height:44px;padding:.55rem .65rem;border:1px solid #9ebdb8;border-radius:9px;background:#fff;color:#183c38;font:inherit}.grid-control-grid input:focus,.grid-control-grid select:focus,.grid-placement-grid input:focus,.grid-placement-grid select:focus,.grid-track-editor input:focus,.grid-track-editor select:focus{border-color:#146b63;outline:3px solid rgba(20,107,99,.18);outline-offset:1px}.grid-control-grid [aria-invalid=true],.grid-placement-grid [aria-invalid=true],.grid-track-editor [aria-invalid=true]{border-color:#b42318;background:#fff5f4}.grid-track-groups,.grid-gap-settings,.grid-responsive-settings,.grid-implicit-settings,.grid-preview-size{margin-top:1rem}.grid-track-groups>section,.grid-gap-settings,.grid-responsive-settings,.grid-implicit-settings,.grid-preview-size,.grid-placement-grid>fieldset{min-width:0;padding:1rem;border:1px solid #d2e3e0;border-radius:13px;background:#f9fcfb}.grid-track-heading{align-items:center}.grid-track-heading h4{font-size:1rem}.grid-track-list{display:grid;gap:.7rem;margin-top:.7rem}.grid-track-editor{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.65rem;min-width:0;margin:0;padding:.75rem;border:1px solid #cee1de;border-radius:11px;background:#fff}.grid-track-editor legend,.grid-gap-settings legend,.grid-responsive-settings legend,.grid-implicit-settings legend,.grid-preview-size legend,.grid-placement-grid legend{padding:0 .35rem;color:#164e49;font-weight:800}.grid-check{display:flex!important;align-items:center!important;gap:.5rem!important;min-width:0;font-size:.88rem;font-weight:700}.grid-check input{width:1.1rem!important;min-height:auto!important;height:1.1rem;accent-color:#146b63}.grid-gap-settings>.grid-check{margin-bottom:.8rem}.grid-gap-settings p,.grid-responsive-settings p,.grid-implicit-settings p,.grid-preview-size p{margin:.75rem 0 0;color:#596f6b;font-size:.88rem}.grid-range-label{display:grid;gap:.35rem;margin-top:.85rem;color:#314d49;font-size:.88rem;font-weight:700}.grid-range-label input{width:100%;accent-color:#146b63}.grid-inline-warning,.grid-warning{margin:.8rem 0 0;padding:.75rem .85rem;border-left:4px solid #b7791f;border-radius:7px;background:#fff8e7;color:#664d14}.grid-warning strong{display:block;margin-bottom:.2rem}.grid-warning p{margin:0}.grid-item-list{display:flex;flex-wrap:wrap;gap:.45rem}.grid-item-tab[aria-pressed=true]{border-color:#146b63;background:#146b63;color:#fff}.grid-item-tab:focus-visible,.grid-preview-item:focus-visible,.grid-presets button:focus-visible{outline:3px solid #f3a712;outline-offset:3px}.grid-item-actions{display:flex;flex:0 0 auto;gap:.5rem}.grid-item-actions button{white-space:nowrap}.grid-placement-grid{margin-bottom:1rem}.grid-placement-grid>fieldset{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem}.grid-placement-grid>fieldset>button{align-self:end;min-height:44px}.grid-advanced-details{min-width:0;margin-top:1rem;border:1px solid #b9d8d3;border-radius:13px;background:#f3f9f8;overflow:hidden}.grid-advanced-details summary{display:flex;min-height:44px;align-items:center;justify-content:space-between;gap:.75rem;padding:.65rem .85rem;color:#164e49;font-weight:800;cursor:pointer;list-style:none}.grid-advanced-details summary::-webkit-details-marker{display:none}.grid-advanced-details summary::after{content:"＋";flex:0 0 auto;font-size:1.25rem;line-height:1}.grid-advanced-details[open] summary::after{content:"−"}.grid-advanced-details summary:focus-visible{outline:3px solid #f3a712;outline-offset:-3px}.grid-details-body{padding:0 .85rem .85rem}.grid-item-advanced{margin-top:1rem}.grid-preview-scroll{max-width:100%;overflow:auto;padding:.25rem;border-radius:12px;background:#e8f1ef;overscroll-behavior:contain}.grid-preview{position:relative;box-sizing:border-box;max-width:none;padding:12px;border:2px solid #146b63;border-radius:10px;background:#f4faf9}.grid-preview--show-lines{background-image:linear-gradient(rgba(20,107,99,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(20,107,99,.06) 1px,transparent 1px);background-size:24px 24px}.grid-preview-item{box-sizing:border-box;min-width:0;min-height:52px;padding:.6rem;border:1px solid #5daaa2;border-radius:8px;background:linear-gradient(145deg,#d6f1ed,#b8e0da);color:#123f3b;font:inherit;font-weight:800;cursor:pointer;overflow-wrap:anywhere}.grid-preview-item:nth-child(3n+2){background:linear-gradient(145deg,#e6f1cf,#d2e6a9)}.grid-preview-item:nth-child(3n){background:linear-gradient(145deg,#f7dfc0,#f2c990)}.grid-preview-item[aria-pressed=true]{outline:3px solid #146b63;outline-offset:-4px}.grid-code-card{position:sticky;top:1rem}.grid-code-block{min-width:0;margin-top:.9rem;border:1px solid #d1e2df;border-radius:12px;overflow:hidden}.grid-code-block>div{align-items:center;padding:.7rem .8rem;background:#eef7f5}.grid-code-block pre{max-width:100%;max-height:330px;margin:0;padding:1rem;overflow:auto;background:#172724;color:#effaf8;font-size:.82rem;line-height:1.55;white-space:pre}.grid-code-block code{font-family:ui-monospace,SFMono-Regular,Consolas,monospace}.grid-code-block button{flex:0 0 auto}.grid-generator-panel [hidden]{display:none!important}
@media(max-width:1080px){.grid-generator-workspace{grid-template-columns:1fr}.grid-code-card{position:static}.grid-generator-results{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-code-card{grid-column:1/-1}}
@media(max-width:720px){.layout-mode-selector{align-items:stretch;flex-direction:column}.layout-mode-tabs{width:100%;min-width:0}.grid-generator-heading,.grid-item-toolbar{align-items:stretch;flex-direction:column}.grid-control-grid,.grid-placement-grid,.grid-track-groups,.grid-generator-results{grid-template-columns:1fr}.grid-track-editor{grid-template-columns:1fr}.grid-item-actions{width:100%;flex-wrap:wrap}.grid-generator-heading>button{align-self:flex-start}.grid-code-block>div{align-items:stretch;flex-direction:column}.grid-code-block button{width:100%}}
@media(max-width:720px){#grid-reset,#grid-add-item,#grid-remove-item,#grid-copy-container,#grid-copy-all,#grid-copy-html{min-height:44px}}
@media(max-width:360px){.container--grid-tool{max-width:100%;padding-inline:12px}.grid-generator-panel,.grid-generator-workspace,.grid-generator-settings,.grid-generator-results,.grid-generator-card,.grid-preview-scroll,.grid-code-block,.grid-track-groups,.grid-placement-grid{width:100%;max-width:100%;min-width:0}.grid-generator-panel{padding:.8rem}.grid-generator-card{padding:.8rem}.grid-presets{display:grid;grid-template-columns:1fr 1fr}.grid-presets button{min-width:0;padding:.5rem .3rem;overflow-wrap:anywhere}.grid-item-actions{display:grid;grid-template-columns:1fr}.grid-item-actions button{width:100%;white-space:normal}.grid-placement-grid>fieldset{grid-template-columns:1fr}.grid-generator-heading>button{width:100%}}