*{box-sizing:border-box}body{margin:0;color:#20242b;background:#e8edf1;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}button{align-items:center;border:1px solid #c8d0d8;background:#fbfcfe;color:#20242b;cursor:pointer;display:inline-flex;font:inherit;gap:8px;min-height:36px;justify-content:center;padding:8px 10px}input,select,textarea{border:1px solid #c8d0d8;background:#fbfcfe;color:#20242b;font:inherit;min-height:34px;padding:6px 8px;width:100%}textarea{min-height:72px;resize:vertical}input[type=range]{min-height:0;padding:0}input[type=color]{min-height:34px;padding:2px}button:hover:not(:disabled),button.active{background:#24313b;border-color:#24313b;color:#fbfcfe}button:disabled{cursor:not-allowed;opacity:.48}.portal-frame{background:#e8edf1;min-height:100vh}.portal-nav{align-items:center;background:#fbfcfe;border-bottom:1px solid #c8d0d8;display:flex;gap:14px;height:58px;padding:0 18px;position:sticky;top:0;z-index:8}.portal-brand{border:0;background:transparent;font-weight:800;gap:10px;min-height:44px;padding:0}.portal-brand:hover{background:transparent;color:#20242b}.portal-brand img{height:38px;width:38px}.portal-links{display:flex;gap:6px;margin-left:auto}.portal-links button{border:0;min-height:36px}.portal-links button.active{background:#24313b;color:#fbfcfe}.user-menu{position:relative}.user-menu summary{align-items:center;border:1px solid #c8d0d8;cursor:pointer;display:flex;height:38px;justify-content:center;list-style:none;width:38px}.user-menu summary::-webkit-details-marker{display:none}.user-avatar{border-radius:50%;display:block;height:28px;object-fit:cover;width:28px}.user-menu-panel{background:#fbfcfe;border:1px solid #c8d0d8;box-shadow:0 16px 42px #20242b2e;display:grid;gap:8px;min-width:240px;padding:12px;position:absolute;right:0;top:44px}.user-menu-panel span{color:#5f6873;font-size:12px}.landing{min-height:calc(100vh - 58px)}.landing-hero{display:grid;grid-template-columns:minmax(360px,.85fr) minmax(420px,1.15fr);min-height:calc(100vh - 250px);overflow:hidden}.hero-glass{background:#20242b;display:grid;grid-template-columns:1.1fr .8fr 1fr;grid-template-rows:.8fr 1fr .9fr;gap:10px;padding:18px}.pane{border:8px solid #20242b;box-shadow:inset 0 0 42px #ffffff38}.pane-a{background:#7ac7b7;grid-column:1 / 3}.pane-b{background:#f1b95c;grid-row:1 / 3}.pane-c{background:#dbe7ee}.pane-d{background:#9bb8d6;grid-column:1 / 3}.pane-e{background:#e26d5a}.landing-copy{align-content:center;background:#fbfcfe;display:grid;gap:18px;padding:clamp(36px,7vw,96px)}.landing-copy h1{font-size:clamp(48px,7vw,92px);line-height:.95}.landing-copy p{color:#44515f;font-size:20px;line-height:1.55;max-width:720px}.landing-actions,.card-actions,.gallery-metrics{display:flex;flex-wrap:wrap;gap:10px}.example-strip,.library-grid,.gallery-grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));padding:24px}.example-card,.pattern-card,.auth-panel,.gallery-detail{background:#fbfcfe;border:1px solid #c8d0d8;display:grid;gap:10px;padding:16px}.example-card,.pattern-card{border-radius:8px}.example-art,.pattern-preview{aspect-ratio:4 / 3;background:linear-gradient(135deg,#7ac7b7 0 32%,#20242b 32% 36%,#f1b95c 36% 62%,#20242b 62% 66%,#9bb8d6 66%);border:6px solid #20242b}.example-art-2{background:radial-gradient(circle at 70% 25%,#f1b95c 0 14%,#20242b 15% 18%,transparent 19%),linear-gradient(135deg,#9bb8d6 0 42%,#20242b 42% 46%,#7ac7b7 46%)}.example-art-3{background:linear-gradient(90deg,#e26d5a 0 30%,#20242b 30% 34%,#dbe7ee 34% 64%,#20242b 64% 68%,#7ac7b7 68%)}.pattern-preview{align-items:center;display:flex;justify-content:center;overflow:hidden}.pattern-preview span{background:#fbfcfedb;border:1px solid #20242b;font-size:28px;font-weight:800;padding:10px 12px}.svg-preview{background:#f8faf9;padding:0}.svg-preview svg{display:block;height:100%;width:100%}.portal-page{display:grid;gap:18px;padding:24px}.auth-panel{justify-self:center;max-width:520px;width:min(520px,100%)}.auth-panel label,.comments label{display:grid;gap:5px}.portal-page-header{align-items:end;display:flex;gap:16px;justify-content:space-between}.portal-page-header p,.pattern-card p,.example-card p,.gallery-detail p{color:#5f6873}.portal-page-header .library-count{margin:6px 0 0}.credit-line{color:#0f766e!important;font-weight:700}.pattern-card.selected{border-color:#0f766e;box-shadow:0 0 0 2px #0f766e26}.gallery-layout{align-items:start;display:grid;gap:18px;grid-template-columns:minmax(0,1fr) 360px}.gallery-toolbar{align-items:end;border-bottom:1px solid #d7dde3;display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;padding-bottom:12px}.gallery-grid{padding:0}.gallery-metrics{align-items:center}.gallery-metrics span{align-items:center;display:inline-flex;gap:6px}.gallery-search{align-items:end;display:flex;flex-wrap:wrap;gap:10px;min-width:min(520px,100%)}.gallery-search label{display:grid;gap:5px;min-width:min(320px,100%)}.gallery-search span{color:#5f6873;font-size:12px;font-weight:700;text-transform:uppercase}.comments{border-top:1px solid #d7dde3;display:grid;gap:10px;padding-top:12px}.comment{background:#eef3f5;border:1px solid #d7dde3;display:grid;gap:4px;padding:10px}.admin-tabs{align-items:center;display:flex;gap:8px}.admin-tabs button.active{background:#20242b;border-color:#20242b;color:#fff}.admin-table-panel{background:#fbfcfe;border:1px solid #c8d0d8;display:grid;gap:12px;padding:16px}.admin-table-wrap{overflow-x:auto}.admin-table{border-collapse:collapse;min-width:760px;width:100%}.admin-table th,.admin-table td{border-bottom:1px solid #d7dde3;padding:10px;text-align:left;vertical-align:middle}.admin-table th{color:#44515f;font-size:12px;text-transform:uppercase}.table-actions{display:flex;flex-wrap:wrap;gap:8px}.pagination-controls{align-items:center;color:#5f6873;display:flex;gap:12px;justify-content:space-between}.pagination-controls div{display:flex;gap:8px}.status-row{align-items:center;display:flex;flex-wrap:wrap;gap:8px}.status-pill{background:#eef3f5;border:1px solid #c8d0d8;color:#44515f;display:inline-flex;font-size:12px;font-weight:700;line-height:1;padding:6px 8px;text-transform:uppercase}.status-pill.admin{background:#e8f2ff;border-color:#9bb8d6;color:#244b74}.status-pill.ok{background:#e8f7f3;border-color:#7ac7b7;color:#0f766e}.status-pill.warning{background:#fff3d4;border-color:#d6a52f;color:#6f4b00}.status-pill.danger{background:#fde8e6;border-color:#e26d5a;color:#8f2d20}.empty-state{background:#fbfcfe;border:1px dashed #9aa6b2;color:#5f6873;padding:18px}.app{display:grid;grid-template-columns:292px 1fr;height:calc(100vh - 58px);min-width:980px;overflow:hidden}.sidebar{background:#fff;border-right:1px solid #c8d0d8;display:flex;flex-direction:column;gap:18px;max-height:calc(100vh - 58px);min-height:0;overflow-y:scroll;padding:18px;scrollbar-gutter:stable;scrollbar-color:#8a97a5 #eef3f5;scrollbar-width:thin}.sidebar::-webkit-scrollbar,.canvas-shell::-webkit-scrollbar{height:12px;width:12px}.sidebar::-webkit-scrollbar-track,.canvas-shell::-webkit-scrollbar-track{background:#eef3f5}.sidebar::-webkit-scrollbar-thumb,.canvas-shell::-webkit-scrollbar-thumb{background:#8a97a5;border:3px solid #eef3f5}.sidebar::-webkit-scrollbar-thumb:hover,.canvas-shell::-webkit-scrollbar-thumb:hover{background:#667381}.brand{align-items:flex-start;display:grid;gap:5px}.brand-title{align-items:center;display:flex;gap:10px}.brand-mark{height:46px;object-fit:contain;-webkit-user-select:none;user-select:none;width:46px}h1,h2,p{margin:0}h1{font-size:22px;line-height:1.1}.alpha-badge{align-self:start;background:#fff3d4;border:1px solid #d6a52f;color:#6f4b00;display:inline-flex;font-size:11px;font-weight:700;line-height:1;padding:4px 6px;text-transform:uppercase}.alpha-note{color:#6f4b00;font-size:12px;line-height:1.4}h2{font-size:13px;letter-spacing:0;text-transform:uppercase}.brand p,.panel p,.status,.topbar{color:#5f6873;font-size:13px}.tool-grid{display:grid;gap:8px;grid-template-columns:1fr 1fr}.tool-grid button{flex-direction:column;gap:5px;height:68px}.tool-grid span{font-size:12px}.panel{display:grid;gap:8px}.panel summary{align-items:center;cursor:pointer;display:flex;justify-content:space-between;list-style:none}.panel summary::-webkit-details-marker{display:none}.panel summary:after{color:#5f6873;content:"+";font-size:16px;line-height:1}.panel[open] summary:after{content:"-"}.panel-body{display:grid;gap:8px}.panel label{color:#44515f;display:grid;font-size:12px;gap:4px}.panel button{justify-content:flex-start}.input-row{display:grid;gap:8px;grid-template-columns:1fr 1fr}.inspector-grid{display:grid;gap:6px;margin:0}.inspector-grid div{align-items:baseline;border-bottom:1px solid #eef3f5;display:grid;gap:8px;grid-template-columns:72px 1fr;padding-bottom:6px}.inspector-grid dt{color:#5f6873;font-size:12px}.inspector-grid dd{color:#20242b;font-size:12px;margin:0;min-width:0;overflow-wrap:anywhere}.tile-count{background:#eef3f5;border:1px solid #d7dde3;color:#20242b;font-size:13px;padding:8px}.tile-count strong,.tile-count span{display:block}.tile-count span{color:#5f6873;font-size:12px;margin-top:3px;overflow-wrap:anywhere}.helper-text{color:#5f6873;font-size:12px;line-height:1.4}.file-cloud-status{border:1px solid #d7dde3;display:grid;gap:8px;padding:8px}.file-cloud-status .helper-text{margin:0}.panel.muted{border-top:1px solid #d7dde3;padding-top:14px}.swatches{display:flex;flex-wrap:wrap;gap:8px}.swatch{background-blend-mode:multiply;background-size:12px 12px;border:2px solid #fbfcfe;box-shadow:0 0 0 1px #9aa6b2;height:30px;min-height:30px;padding:0;width:30px}.swatch.active{border-color:#20242b}.workspace{display:grid;grid-template-rows:46px 1fr 34px;min-height:0;min-width:0}.topbar,.status{align-items:center;background:#fbfcfe;border-bottom:1px solid #d7dde3;display:flex;gap:18px;padding:0 16px}.topbar div,.status span{align-items:center;display:inline-flex;gap:6px}.topbar strong{color:#20242b}.status-warning{color:#f59f00;font-weight:700}.topbar-button{min-height:30px;padding:5px 9px}.design-canvas{cursor:crosshair;display:block;touch-action:none}.canvas-shell{min-height:0;overflow:scroll;scrollbar-gutter:stable both-edges;scrollbar-color:#8a97a5 #d7dde3;scrollbar-width:thin}.zoom-control{align-items:center;display:flex;gap:10px;margin-left:auto;min-width:240px}.zoom-control input{width:150px}.modal-backdrop{align-items:center;background:#20242b61;display:flex;inset:0;justify-content:center;padding:24px;position:fixed;z-index:10}.modal{background:#fbfcfe;border:1px solid #9aa6b2;box-shadow:0 18px 52px #20242b38;display:grid;gap:14px;max-height:min(720px,90vh);max-width:860px;overflow:auto;padding:18px;width:min(860px,96vw)}.modal-header,.color-row{align-items:center;display:flex;gap:10px}.modal-header{justify-content:space-between}.confirm-modal{max-width:560px;width:min(560px,94vw)}.confirm-body{display:grid;gap:12px}.confirm-body label{display:grid;gap:6px}.modal-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end}.danger-button{background:#b45309;border-color:#92400e;color:#fff}.danger-button:hover:not(:disabled){background:#92400e}.color-list{display:grid;gap:8px}.color-row,.add-color-row{align-items:center;display:grid;grid-template-columns:48px 1.2fr .8fr .9fr 36px;gap:10px}.add-color-row{border-top:1px solid #d7dde3;padding-top:10px}.color-texture-cell{align-items:center;display:flex;gap:6px}.color-picker-trigger{cursor:pointer;position:relative}.color-picker-input{height:1px;opacity:0;pointer-events:none;position:absolute;width:1px}.texture-preview{border:1px solid #b9c3ce;border-radius:4px;display:inline-block;flex:0 0 auto;height:32px;width:32px}.color-picker-trigger:hover .texture-preview,.color-picker-trigger:focus-within .texture-preview{border-color:#20242b;box-shadow:0 0 0 2px #0f766e2e}.color-row-header{color:#5f6873;font-size:.78rem;font-weight:700;padding:0 0 2px;text-transform:uppercase}.icon-button{min-height:34px;padding:6px}.status{border-bottom:none;border-top:1px solid #d7dde3;min-width:0;overflow:hidden}.status-hint{color:#44515f;flex:1 1 auto;justify-content:flex-end;min-width:280px;overflow:hidden;text-align:right;text-overflow:ellipsis;white-space:nowrap}.hint-fade{animation:hint-fade 12s ease-in-out}@keyframes hint-fade{0%{opacity:.72}18%,to{opacity:1}}@media(prefers-reduced-motion:reduce){.hint-fade{animation:none}}@media(max-width:900px){.app{grid-template-columns:220px 1fr;min-width:760px}.tool-grid{grid-template-columns:1fr}.status-hint{min-width:180px}}