.ah-coloring-editor-page { padding-bottom: 72px; }
.ah-editor-header { padding: 38px 0 30px; }
.ah-editor-header-inner { display:flex; align-items:center; justify-content:space-between; gap:28px; padding:30px; border:1px solid var(--kh-border); border-radius:24px; background:var(--kh-surface); box-shadow:var(--kh-shadow); }
.ah-editor-header h1 { margin:4px 0 8px; font-size:clamp(1.7rem,4vw,2.6rem); }
.ah-editor-header p { margin:0; color:var(--kh-muted); }
.ah-editor-layout { display:grid; grid-template-columns:270px minmax(0,1fr); align-items:start; gap:24px; }
.ah-editor-tools,.ah-canvas-panel { border:1px solid var(--kh-border); border-radius:22px; background:var(--kh-surface); box-shadow:var(--kh-shadow); }
.ah-editor-tools { display:grid; gap:24px; position:sticky; top:24px; padding:22px; }
.ah-tool-group { display:grid; gap:12px; }
.ah-tool-label { color:var(--kh-primary); font-size:.86rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase; }
.ah-tool-buttons,.ah-history-buttons { display:grid; gap:8px; }
.ah-tool-button { min-height:42px; padding:10px 13px; border:1px solid var(--kh-border-strong); border-radius:11px; background:#fff; color:var(--kh-primary); cursor:pointer; font:inherit; font-weight:750; text-align:left; }
.ah-tool-button:hover,.ah-tool-button.is-active { border-color:var(--kh-primary); background:var(--kh-primary); color:#fff; }
.ah-color-palette { display:grid; grid-template-columns:repeat(5,1fr); gap:9px; }
.ah-color,.ah-custom-color { display:grid; width:38px; height:38px; padding:0; place-items:center; border:2px solid #fff; border-radius:50%; background:var(--ah-color,#fff); box-shadow:0 0 0 1px var(--kh-border-strong); cursor:pointer; }
.ah-color:hover,.ah-color:focus,.ah-color:active,.ah-custom-color:hover,.ah-custom-color:focus,.ah-custom-color:active { background:var(--ah-color,#fff) !important; color:var(--kh-primary) !important; filter:none !important; transform:none !important; }
.ah-color.is-active,.ah-custom-color.is-active { box-shadow:0 0 0 3px var(--kh-primary); }
.ah-custom-color { position:relative; border-style:dashed; color:var(--kh-primary); font-size:1.4rem; font-weight:800; }
.ah-custom-color input { position:absolute; inset:0; z-index:2; width:100%; height:100%; padding:0; border:0; opacity:0; cursor:pointer; }
.ah-canvas-panel { min-width:0; padding:20px; }
.ah-editor-status { margin-bottom:14px; padding:10px 14px; border-radius:10px; background:var(--kh-surface-soft); color:var(--kh-muted); font-size:.9rem; }
.ah-editor-status.is-ready { background:#ecfdf5; color:#047857; }
.ah-editor-status.is-error { background:#fef2f2; color:#b91c1c; }
.ah-canvas-stage { position:relative; overflow:auto; max-height:75vh; padding:12px; border:1px solid var(--kh-border); border-radius:16px; background:#dfe8f3; text-align:left; }
.ah-coloring-canvas { display:block; width:100%; height:auto; max-width:none; margin-inline:auto; background:#fff; box-shadow:0 8px 28px rgba(32,56,100,.14); cursor:crosshair; touch-action:none; }
.ah-coloring-canvas.is-drawing-tool { cursor:none; }
.ah-coloring-canvas.is-pan-tool { cursor:grab; }
.ah-coloring-canvas.is-pan-tool:active { cursor:grabbing; }
.ah-brush-cursor { position:absolute; z-index:3; display:none; border:2px solid rgba(255,255,255,.95); border-radius:50%; background:rgba(32,56,100,.08); box-shadow:0 0 0 1px rgba(32,56,100,.9); pointer-events:none; transform:translate(-50%,-50%); }
.ah-brush-cursor.is-visible { display:block; }
.ah-zoom-value { min-width:46px; color:var(--kh-primary); font-weight:800; }
.ah-canvas-controls { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-top:18px; }
.ah-canvas-controls label,.ah-canvas-controls>div { display:flex; align-items:center; gap:12px; }
.ah-pan-hint { margin:12px 0 0; color:var(--kh-muted); font-size:.86rem; }
@media(max-width:900px){.ah-editor-header-inner,.ah-canvas-controls{align-items:stretch;flex-direction:column}.ah-editor-layout{grid-template-columns:1fr}.ah-editor-tools{position:static}.ah-tool-buttons{grid-template-columns:repeat(2,1fr)}.ah-history-buttons{grid-template-columns:repeat(3,1fr)}.ah-color-palette{display:flex;overflow-x:auto;padding:4px}.ah-canvas-stage{max-height:68vh}}
@media(max-width:560px){.ah-editor-header{padding-top:20px}.ah-editor-header-inner,.ah-editor-tools,.ah-canvas-panel{padding:16px}.ah-tool-buttons,.ah-history-buttons{grid-template-columns:1fr}.ah-canvas-controls>div{display:grid;grid-template-columns:1fr}.ah-canvas-controls .kh-button{width:100%}}