.app-layout{display:flex;flex-wrap:wrap;gap:var(--spacing-lg);align-items:flex-start}.controls{flex:0 0 350px;background-color:var(--card-bg);border:1px solid var(--border-color);border-radius:var(--border-radius);padding:var(--spacing-lg);box-shadow:var(--box-shadow-sm)}.controls h2{color:var(--primary);margin-top:0;margin-bottom:var(--spacing-md);padding-bottom:var(--spacing-sm);border-bottom:1px solid var(--border-color)}.button-group{display:flex;gap:var(--spacing-sm);margin-top:var(--spacing-md);flex-wrap:wrap}.button-group button{flex:1;min-width:120px}#printGraph,#createPdf{background-color:var(--success);border-color:var(--success);color:#fff}#printGraph:hover,#createPdf:hover{background-color:#05b386;border-color:#05b386}.graph-output{flex:1;min-width:300px;max-width:450px;background-color:var(--card-bg);border:1px solid var(--border-color);border-radius:var(--border-radius);padding:var(--spacing-lg);box-shadow:var(--box-shadow-sm)}.graph-output h2{color:var(--primary);margin-top:0;margin-bottom:var(--spacing-md);padding-bottom:var(--spacing-sm);border-bottom:1px solid var(--border-color)}#graphContainer{width:100%;height:380px;border:1px solid var(--border-color);overflow:hidden;background-color:#fff;box-shadow:inset 0 0 5px #0000001a;position:relative;border-radius:var(--border-radius-sm)}.full-page-graph{width:100%;height:100%;position:relative;box-sizing:border-box;padding:10px;--grid-color-thin: #eee;--grid-color-bold: #aaa;--grid-line-thickness: 1px;--grid-major-step: calc(10 * var(--grid-size));background-image:linear-gradient(to bottom,var(--grid-color-bold) var(--grid-line-thickness),transparent var(--grid-line-thickness)),linear-gradient(to right,var(--grid-color-bold) var(--grid-line-thickness),transparent var(--grid-line-thickness)),linear-gradient(to bottom,var(--grid-color-thin) var(--grid-line-thickness),transparent var(--grid-line-thickness)),linear-gradient(to right,var(--grid-color-thin) var(--grid-line-thickness),transparent var(--grid-line-thickness));background-size:100% var(--grid-major-step),var(--grid-major-step) 100%,100% var(--grid-size),var(--grid-size) 100%}.multi-grid-graph{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:flex-start;gap:20px;background-image:none;padding:20px;box-sizing:border-box}.multi-grid-preview-container{display:flex;justify-content:center;align-items:center;padding:10px;height:100%;background-image:none}.grid-item-wrapper{display:flex;flex-direction:column}.grid-unit{border:1px solid #ccc;background-size:var(--grid-size) var(--grid-size);background-image:linear-gradient(to right,#eee 1px,transparent 1px),linear-gradient(to bottom,#eee 1px,transparent 1px);box-sizing:border-box;position:relative;background-color:#fff}.grid-unit-user-description-area{margin-top:8px;width:100%}.grid-unit-user-input{width:100%;box-sizing:border-box;padding:8px;border:1px solid var(--border-color);border-radius:var(--border-radius-sm);font-size:.9em;min-height:40px;resize:vertical;background-color:var(--gray-100);font-family:inherit}.attribution{position:fixed;bottom:10px;right:15px;font-size:.8em;color:var(--text-muted);z-index:1001;text-align:right;display:none}.attribution a{color:var(--primary);text-decoration:none}.attribution a:hover{text-decoration:underline}body.dark-theme .controls,body.dark-theme .graph-output{background-color:var(--card-bg);border-color:var(--border-color)}body.dark-theme #graphContainer{background-color:var(--gray-100);border-color:var(--border-color)}body.dark-theme .grid-unit-user-input{background-color:var(--input-bg-color);color:var(--text-color);border-color:var(--input-border-color)}@media print{@page{margin:10mm}body{background-color:#fff;margin:0;padding:0;padding-top:0!important;padding-bottom:0!important}header,footer,.controls,.button-group,#toaster-container{display:none!important}.graph-output h2{display:none}html,body{width:100%!important;height:100%!important;margin:0!important;padding:0!important;overflow:visible!important}main{display:block!important;margin:0!important;padding:0!important;box-shadow:none!important;border-radius:0!important;max-width:100%!important;width:100%!important;height:100%!important;page-break-inside:avoid!important}.app-layout{display:block!important}.graph-output{padding:0;width:100%!important;box-sizing:border-box!important;page-break-inside:avoid!important;display:block!important;height:100%!important;border:none!important;box-shadow:none!important;background:none!important}#graphContainer{border:none!important;box-shadow:none!important;min-height:auto!important;overflow:visible!important;margin:0 auto!important;page-break-inside:avoid!important}#graphContainer.full-page-graph{-webkit-print-color-adjust:exact;print-color-adjust:exact;background-color:#fff!important;width:100%!important;height:100%!important;margin:0!important;box-sizing:border-box!important;padding:0!important}.multi-grid-graph{width:100%!important;height:auto!important;display:flex!important;flex-wrap:wrap!important;justify-content:flex-start!important;align-items:flex-start!important;gap:10px!important;padding:5mm!important;box-sizing:border-box!important}.grid-unit{-webkit-print-color-adjust:exact;print-color-adjust:exact;background-color:#fff!important;border:1px solid #bbb!important;padding:0!important}.grid-item-wrapper{page-break-inside:avoid}.grid-unit-user-description-area{margin-top:5px}.grid-unit-user-input{border:1px solid #bbb!important;background-color:#fff!important;color:#000!important;resize:none!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}.attribution{display:block!important}}@media (max-width: 850px){.app-layout{flex-direction:column}.controls{flex:1 1 100%}.graph-output{flex:1 1 100%;max-width:100%}.button-group{flex-direction:column}.button-group button{width:100%}}