.color-section{padding-block:106px 120px}
.color-principles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:34px 0 40px}
.color-principles article{background:#f7f9f8;border:1px solid #e6eceb;border-radius:15px;padding:23px 24px;min-height:155px}
.color-principles b{font:700 12px 'DM Sans',sans-serif;color:#087e91}
.color-principles h3{font-size:18px;margin:13px 0 6px}.color-principles p{font-size:13px;color:#637276;line-height:1.75;margin:0}
.color-workshop{display:grid;grid-template-columns:minmax(300px,360px) 1fr;gap:24px;align-items:start}
.color-sidebar,.color-output{background:#fff;border:1px solid #dfe9e8;border-radius:18px;box-shadow:0 14px 40px #153f3e09}
.color-sidebar{padding:28px;position:sticky;top:115px}
.color-step{color:#087e91;font:700 11px 'DM Sans',Tajawal,sans-serif;letter-spacing:.06em}
.color-sidebar h3,.color-output h3{font-size:23px;margin:8px 0 8px}.color-sidebar-heading p,.color-output-head p{font-size:14px;color:#68777a;line-height:1.7;margin:0}
.base-color-field{margin-top:24px}.base-color-field label{display:block;font-weight:700;font-size:13px;margin-bottom:8px}
.base-color-field>div{display:flex;gap:9px;direction:ltr}
.base-color-field input[type=color]{width:62px;height:51px;padding:4px;background:#fff;border:1px solid #d8e4e2;border-radius:9px;cursor:pointer}
.base-color-field input[type=text]{flex:1;min-width:0;border:1px solid #d8e4e2;border-radius:9px;padding:10px 13px;font:700 15px 'DM Sans',sans-serif;color:#25393c}
.field-caption{font-size:12px;color:#667578;margin:20px 0 10px}
.color-presets{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}
.color-preset{border:1px solid #e2e9e8;background:#fff;border-radius:9px;padding:6px 4px;text-align:center;color:#58686b;font-size:10px;line-height:1.25}
.color-preset i{display:block;height:34px;border-radius:5px;margin-bottom:6px}
.color-preset[aria-pressed=true]{border-color:#087e91;box-shadow:0 0 0 2px #087e9126;color:#172b2f}
.image-pick{margin-top:27px;padding:20px 0;border-block:1px solid #e5eceb}
.image-pick>label{font-size:14px;font-weight:700;display:block;margin-bottom:9px}
.image-pick input{max-width:100%;font-size:12px;color:#495b5e}
.image-pick>p,.image-pick-panel p{font-size:11px;color:#718083;line-height:1.6;margin:8px 0 0}
#color-image-status{min-height:1em;color:#087e91;font-size:12px}
#color-image-panel{margin-top:14px}#color-image-panel[hidden]{display:none}
#color-sampler{display:block;width:100%;height:auto;max-height:210px;object-fit:contain;border-radius:8px;cursor:crosshair;background:#eff3f2}
#color-image-panel p{font-size:11px;color:#68777a;line-height:1.5}
.extracted-colors{display:flex;gap:7px;margin-top:9px}
.extracted-colors button{height:35px;flex:1;border:2px solid #fff;border-radius:6px;box-shadow:0 0 0 1px #dce6e5}
.extracted-colors button:hover,.extracted-colors button:focus-visible{transform:translateY(-2px)}
.harmony-choice{padding-top:23px}.harmony-options{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px}
.harmony-option{border:1px solid #dce6e4;border-radius:999px;padding:8px 12px;background:#fff;color:#4b6265;font-size:12px}
.harmony-option[aria-pressed=true]{color:#fff;background:#087e91;border-color:#087e91}
.wheel-row{display:flex;align-items:center;gap:16px;margin-top:18px;background:#f7f9f8;border-radius:11px;padding:13px}
.wheel-row p{font-size:12px;line-height:1.6;color:#52686b;margin:0;flex:1}
.harmony-wheel{width:76px;height:76px;flex:none;border-radius:50%;position:relative;background:conic-gradient(from 0deg,#f04a4a,#f2ca42,#65b75c,#4bbbbb,#5474d0,#b763b8,#f04a4a);box-shadow:inset 0 0 0 17px #ffffffba}
.harmony-wheel i{position:absolute;width:13px;height:13px;border:2px solid white;border-radius:50%;background:#172b2f;box-shadow:0 1px 5px #0006;transform:translate(-50%,-50%)}
.harmony-wheel #wheel-accent{background:#fff;border-color:#172b2f}
.color-output{padding:29px 29px 32px}.color-output-head{margin-bottom:23px}
.ratio-guide{height:32px;border-radius:999px;overflow:hidden;display:flex;background:#eaf2f0;margin-bottom:21px;color:#395b60;font-size:11px;font-weight:700;text-align:center;line-height:32px}
.ratio-guide span:first-child{width:60%;background:#eef4f0}.ratio-guide span:nth-child(2){width:30%;background:#dae7e2}.ratio-guide span:last-child{width:10%;min-width:95px;background:#bed6d0}
.generated-palettes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.generated-card{border:1px solid #e1e9e8;border-radius:12px;overflow:hidden;background:#fff;min-width:0}
.generated-scene{height:175px;position:relative;overflow:hidden}
.scene-molding{position:absolute;top:0;right:0;left:0;height:8px;opacity:.8}
.scene-picture{position:absolute;top:26px;left:50%;width:64px;height:88px;transform:translateX(-50%);border:8px solid #fafbf8;box-shadow:0 6px 15px #1f353327}
.scene-picture:after{content:"";position:absolute;inset:17% 11%;border:1px solid #ffffff66;transform:rotate(-18deg)}
.scene-sofa{position:absolute;bottom:20px;left:19%;width:62%;height:49px;border-radius:19px 19px 3px 3px;box-shadow:0 6px 10px #2533332b}
.scene-sofa:before,.scene-sofa:after{content:"";position:absolute;bottom:0;width:23px;height:32px;border-radius:10px 10px 1px 1px;background:inherit}
.scene-sofa:before{left:-12px}.scene-sofa:after{right:-12px}
.scene-cushion{position:absolute;bottom:34px;right:30%;width:27px;height:27px;border-radius:5px;transform:rotate(13deg);box-shadow:0 2px 5px #0002}
.scene-floor{position:absolute;inset:auto 0 0;height:18px;background:#d9d1c7}
.generated-body{padding:15px}.generated-heading{min-height:66px}
.generated-heading h4{font-size:18px;margin:0 0 4px}.generated-heading p{font-size:11px;color:#758184;line-height:1.5;margin:0}
.color-strip{height:12px;display:flex;overflow:hidden;border-radius:99px;margin:13px 0 12px}.color-strip span{height:100%}
.role-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.role-swatch{display:grid;grid-template-columns:18px 1fr;gap:2px 5px;align-items:center;text-align:right;border:1px solid #e6eceb;background:#fff;border-radius:7px;padding:6px;min-width:0}
.role-swatch:hover{border-color:#087e91}.role-swatch i{width:18px;height:18px;border-radius:4px;border:1px solid #0001;grid-row:1/3}
.role-swatch span{font-size:10px;color:#6c7a7d}.role-swatch code{font:600 10px 'DM Sans',monospace;color:#1d3639;direction:ltr;white-space:nowrap}
.generated-body .palette-action{font-size:12px;margin-top:17px;text-align:right;line-height:1.5}
.color-disclaimer{border-right:3px solid #a7c3c0;padding:4px 15px;margin:27px 0 0;font-size:13px;line-height:1.8;color:#657578}
@media(max-width:1150px){.generated-palettes{grid-template-columns:1fr}.generated-card{display:grid;grid-template-columns:38% 1fr}.generated-scene{height:100%;min-height:190px}.generated-body{padding:18px}.generated-heading{min-height:0}}
@media(max-width:820px){.color-principles{grid-template-columns:1fr}.color-principles article{min-height:0}.color-workshop{grid-template-columns:1fr}.color-sidebar{position:static}.generated-palettes{grid-template-columns:repeat(3,minmax(0,1fr))}.generated-card{display:block}.generated-scene{height:150px;min-height:0}}
@media(max-width:700px){.generated-palettes{grid-template-columns:1fr}.generated-card{display:grid;grid-template-columns:37% 1fr}.generated-scene{height:100%;min-height:210px}.color-principles{gap:9px}.color-principles article{padding:16px}.color-sidebar,.color-output{padding:20px}.ratio-guide span:last-child{min-width:72px;font-size:10px}.role-swatch code{font-size:9px}}
@media(max-width:430px){.generated-card{display:block}.generated-scene{height:165px;min-height:0}.color-presets{grid-template-columns:repeat(4,1fr)}.color-output h3{font-size:21px}}