/* Colorrow Design Token Generator — Phase 16 route-only styles. */
.cr-dt-page{background:var(--cr-canvas);color:var(--cr-ink);min-height:100vh}.cr-dt-shell{width:min(1280px,calc(100% - 40px));margin:0 auto;padding:clamp(32px,5vw,72px) 0 88px}.cr-dt-intro{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(280px,.7fr);gap:32px;align-items:end;margin-bottom:32px}.cr-dt-kicker{display:block;font-size:12px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:var(--cr-muted);margin-bottom:10px}.cr-dt-intro h1{font-size:clamp(38px,6vw,72px);line-height:.98;letter-spacing:-.055em;max-width:850px;margin:0 0 18px}.cr-dt-intro p{font-size:clamp(17px,2vw,20px);line-height:1.65;color:var(--cr-muted);max-width:760px;margin:0}.cr-dt-intro-note{border:1px solid var(--cr-border);border-radius:var(--cr-radius-lg);background:var(--cr-surface);padding:20px;box-shadow:var(--cr-shadow-xs);font-size:14px;line-height:1.6;color:var(--cr-muted)}.cr-dt-intro-note strong{color:var(--cr-ink)}
.cr-dt-workspace{display:grid;grid-template-columns:minmax(340px,.82fr) minmax(0,1.18fr);gap:20px;align-items:start}.cr-dt-sidebar,.cr-dt-main{display:grid;gap:20px}.cr-dt-panel{background:var(--cr-surface);border:1px solid var(--cr-border);border-radius:var(--cr-radius-xl);box-shadow:var(--cr-shadow-xs);overflow:hidden}.cr-dt-panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:22px 22px 18px;border-bottom:1px solid var(--cr-border)}.cr-dt-panel-head h2{font-size:22px;letter-spacing:-.025em;margin:0 0 5px}.cr-dt-panel-head p{font-size:14px;color:var(--cr-muted);line-height:1.5;margin:0}.cr-dt-summary{font-size:12px;font-weight:800;color:var(--cr-muted);white-space:nowrap}.cr-dt-palette-body{padding:18px 22px 22px;display:grid;gap:16px}.cr-dt-color-editor{display:grid;gap:10px}.cr-dt-color-row{display:grid;grid-template-columns:48px minmax(0,1fr) 40px;gap:10px;align-items:end}.cr-dt-picker{width:48px;height:48px;border:1px solid var(--cr-border);border-radius:12px;padding:3px;background:var(--cr-surface);cursor:pointer}.cr-dt-picker::-webkit-color-swatch-wrapper{padding:0}.cr-dt-picker::-webkit-color-swatch{border:0;border-radius:8px}.cr-dt-color-row label{display:block;font-size:12px;font-weight:800;margin-bottom:6px;color:var(--cr-muted)}.cr-dt-color-row .cr-field{height:48px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:700;text-transform:uppercase}.cr-dt-remove{height:40px;width:40px;margin-bottom:4px;font-size:22px}.cr-dt-remove:disabled{opacity:.35;cursor:not-allowed}.cr-dt-palette-actions{display:flex;gap:10px;flex-wrap:wrap}.cr-dt-bulk{display:grid;gap:7px;padding-top:14px;border-top:1px solid var(--cr-border)}.cr-dt-bulk label,.cr-dt-saved label{font-size:13px;font-weight:800}.cr-dt-bulk textarea{min-height:82px;resize:vertical;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;line-height:1.5}.cr-dt-help,.cr-dt-error{font-size:12px;line-height:1.5;color:var(--cr-muted);margin:0}.cr-dt-error{color:var(--cr-danger);font-weight:700;min-height:18px}.cr-dt-saved{display:grid;gap:7px}.cr-dt-select-shell{position:relative}.cr-dt-select-shell:after{content:"";position:absolute;right:16px;top:50%;width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-70%) rotate(45deg);pointer-events:none;color:var(--cr-muted)}.cr-dt-select-shell .cr-select{appearance:none;-webkit-appearance:none;padding-right:42px;width:100%}
.cr-dt-roles{padding:8px 22px 18px}.cr-dt-role-row{display:grid;grid-template-columns:34px minmax(0,1fr) minmax(150px,200px);gap:12px;align-items:center;padding:13px 0;border-bottom:1px solid var(--cr-border)}.cr-dt-role-row:last-child{border-bottom:0}.cr-dt-role-swatch{width:34px;height:34px;background:var(--dt-role);border:1px solid color-mix(in srgb,var(--cr-border),transparent 10%);border-radius:10px}.cr-dt-role-copy label{display:grid;gap:2px}.cr-dt-role-copy strong{font-size:14px}.cr-dt-role-copy span{font-size:11px;color:var(--cr-muted);line-height:1.35}.cr-dt-role-copy code{font-size:11px;color:var(--cr-muted)}
.cr-dt-preview-panel{padding:22px}.cr-dt-preview-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:18px}.cr-dt-preview-head h2{margin:0 0 5px;font-size:24px}.cr-dt-preview-head p{font-size:14px;color:var(--cr-muted);line-height:1.5;margin:0;max-width:620px}.cr-dt-preview{--dt-background:#F8FAFC;--dt-surface:#FFF;--dt-primary:#2563EB;--dt-secondary:#7C3AED;--dt-accent:#F59E0B;--dt-text:#0F172A;--dt-muted:#64748B;--dt-border:#CBD5E1;background:var(--dt-background);color:var(--dt-text);border:1px solid var(--dt-border);border-radius:20px;overflow:hidden;min-height:430px}.cr-dt-preview header{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;border-bottom:1px solid var(--dt-border);background:var(--dt-surface)}.cr-dt-brand{display:flex;align-items:center;gap:10px;font-weight:900}.cr-dt-brand i{width:18px;height:18px;border-radius:6px;background:var(--dt-primary);box-shadow:11px 0 0 var(--dt-accent)}.cr-dt-preview nav{display:flex;gap:18px;color:var(--dt-muted);font-size:13px;font-weight:700}.cr-dt-preview-body{display:grid;grid-template-columns:1.15fr .85fr;gap:18px;padding:22px}.cr-dt-hero{padding:28px;border:1px solid var(--dt-border);border-radius:18px;background:var(--dt-surface)}.cr-dt-hero small{color:var(--dt-secondary);font-weight:900;text-transform:uppercase;letter-spacing:.09em}.cr-dt-hero h3{font-size:clamp(28px,4vw,44px);letter-spacing:-.045em;line-height:1;margin:14px 0}.cr-dt-hero p{color:var(--dt-muted);line-height:1.55;max-width:560px}.cr-dt-preview-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}.cr-dt-preview-actions button{border:1px solid var(--dt-border);border-radius:10px;padding:11px 15px;font:inherit;font-weight:800;color:var(--dt-text);background:var(--dt-surface)}.cr-dt-preview-actions .primary{background:var(--dt-primary);border-color:var(--dt-primary);color:var(--dt-text)}.cr-dt-preview-actions .accent{background:var(--dt-accent);border-color:var(--dt-accent);color:var(--dt-text)}.cr-dt-side-card{display:grid;gap:12px}.cr-dt-stat,.cr-dt-form{border:1px solid var(--dt-border);border-radius:16px;background:var(--dt-surface);padding:18px}.cr-dt-stat span,.cr-dt-form label{font-size:12px;font-weight:800;color:var(--dt-muted)}.cr-dt-stat strong{display:block;font-size:30px;margin:8px 0 4px}.cr-dt-stat small,.cr-dt-form span{color:var(--dt-muted);font-size:12px;line-height:1.45}.cr-dt-stat i{display:block;height:8px;background:var(--dt-border);border-radius:99px;overflow:hidden}.cr-dt-stat i:after{content:"";display:block;width:68%;height:100%;background:var(--dt-secondary)}.cr-dt-form{display:grid;gap:8px}.cr-dt-form input{width:100%;padding:11px 12px;border:1px solid var(--dt-border);border-radius:9px;background:var(--dt-background);color:var(--dt-text);font:inherit}.cr-dt-audit{display:flex;gap:12px;align-items:flex-start;margin-top:14px;padding:14px 16px;border-radius:14px;border:1px solid var(--cr-border);background:var(--cr-surface)}.cr-dt-audit>span{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;font-weight:900}.cr-dt-audit[data-state="pass"]>span{background:var(--cr-success-soft);color:var(--cr-success)}.cr-dt-audit[data-state="warning"]>span{background:var(--cr-warning-soft);color:var(--cr-warning)}.cr-dt-audit strong{font-size:13px}.cr-dt-audit p{font-size:12px;line-height:1.45;color:var(--cr-muted);margin:3px 0 0}
.cr-dt-export-panel{padding:22px}.cr-dt-export-head{display:flex;justify-content:space-between;gap:20px;align-items:end;margin-bottom:18px}.cr-dt-export-head h2{font-size:24px;margin:0 0 5px}.cr-dt-export-head p{font-size:14px;color:var(--cr-muted);line-height:1.5;margin:0;max-width:620px}.cr-dt-export-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.cr-dt-export-card{border:1px solid var(--cr-border);border-radius:16px;overflow:hidden;background:var(--cr-canvas)}.cr-dt-export-card__head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 14px;border-bottom:1px solid var(--cr-border);background:var(--cr-surface)}.cr-dt-export-card__head strong{font-size:13px}.cr-dt-export-card__head span{display:block;font-size:11px;color:var(--cr-muted);margin-top:2px}.cr-dt-code{margin:0;min-height:210px;max-height:280px;overflow:auto;padding:15px;font-size:12px;line-height:1.55;background:transparent;color:var(--cr-ink);white-space:pre;tab-size:2}
.cr-dt-content{margin-top:44px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.cr-dt-content article{border-top:1px solid var(--cr-border);padding:25px 4px 0}.cr-dt-content h2{font-size:clamp(24px,3vw,34px);letter-spacing:-.035em;margin:0 0 12px}.cr-dt-content p,.cr-dt-content li{font-size:15px;line-height:1.7;color:var(--cr-muted)}.cr-dt-content ul{padding-left:20px}.cr-dt-related{grid-column:1/-1}.cr-dt-related-links{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:18px}.cr-dt-related-links a{display:block;border:1px solid var(--cr-border);border-radius:16px;padding:18px;background:var(--cr-surface);color:var(--cr-ink);text-decoration:none;transition:transform var(--cr-motion-fast) var(--cr-ease-standard),border-color var(--cr-motion-fast) var(--cr-ease-standard)}.cr-dt-related-links a:hover{transform:translateY(-2px);border-color:var(--cr-border-strong)}.cr-dt-related-links strong{display:block;font-size:14px;margin-bottom:6px}.cr-dt-related-links span{font-size:12px;line-height:1.45;color:var(--cr-muted)}
.cr-dt-page :is(button,a,input,select,textarea,pre):focus-visible{outline:3px solid var(--cr-focus);outline-offset:3px}.toast.error{background:var(--cr-danger);color:white}
@media(max-width:1040px){.cr-dt-workspace{grid-template-columns:1fr}.cr-dt-sidebar{grid-template-columns:repeat(2,minmax(0,1fr))}.cr-dt-main{grid-column:1/-1}.cr-dt-related-links{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.cr-dt-shell{width:min(100% - 24px,1280px);padding-top:28px}.cr-dt-intro{grid-template-columns:1fr;gap:18px}.cr-dt-sidebar{grid-template-columns:1fr}.cr-dt-role-row{grid-template-columns:34px minmax(0,1fr)}.cr-dt-role-row .cr-dt-select-shell{grid-column:2}.cr-dt-preview-body{grid-template-columns:1fr}.cr-dt-preview nav{display:none}.cr-dt-export-grid,.cr-dt-content{grid-template-columns:1fr}.cr-dt-related{grid-column:auto}.cr-dt-related-links{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.cr-dt-shell{width:min(100% - 18px,1280px)}.cr-dt-panel-head,.cr-dt-palette-body,.cr-dt-roles,.cr-dt-preview-panel,.cr-dt-export-panel{padding-left:15px;padding-right:15px}.cr-dt-color-row{grid-template-columns:44px minmax(0,1fr) 38px}.cr-dt-picker{width:44px;height:44px}.cr-dt-preview header{padding:15px}.cr-dt-preview-body{padding:14px}.cr-dt-hero{padding:20px}.cr-dt-related-links{grid-template-columns:1fr}.cr-dt-export-card__head{align-items:flex-start;flex-direction:column}.cr-dt-export-card__head .cr-btn{width:100%}}
@media(prefers-reduced-motion:reduce){.cr-dt-related-links a{transition:none}.cr-dt-related-links a:hover{transform:none}}