:root { color-scheme: dark; --bg:#0a0d12; --panel:#121821; --line:#34404d; --text:#eef3f8; --muted:#9aa9b8; --cyan:#20c8f3; }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
body { margin:0; min-height:100vh; background:radial-gradient(circle at 50% -20%,#263443 0,#0a0d12 55%); color:var(--text); font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN",system-ui,sans-serif; }
body.busy,body.busy * { cursor:wait !important; }
.app-shell { width:calc(100% - 24px); margin:0 12px; padding:24px 0 40px; }
header { margin-bottom:24px; }
.eyebrow { color:var(--cyan); margin:0 0 6px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; }
h1 { margin:0; font-size:clamp(2rem,6vw,4.5rem); line-height:1; letter-spacing:-.04em; }
.lead { color:var(--muted); max-width:720px; }
.workspace { display:grid; grid-template-columns:320px auto; width:max-content; max-width:100%; margin-inline:auto; gap:24px; align-items:start; justify-content:center; }
.controls,.graph-card { background:rgba(18,24,33,.94); border:1px solid #29333e; border-radius:16px; box-shadow:0 18px 70px #0007; }
.controls { padding:20px; display:grid; gap:22px; align-content:start; }
.drop-zone { min-height:116px; display:flex; flex-direction:column; align-items:center; justify-content:center; border:1px dashed #506071; border-radius:12px; cursor:pointer; transition:.2s; }
.drop-zone:hover,.drop-zone.drag { border-color:var(--cyan); background:#20c8f310; }
.drop-zone.loading { border-color:var(--cyan); background:#20c8f310; }
.drop-zone.loading .drop-title::before { content:'⌛'; display:inline-block; margin-right:8px; }
.drop-zone input { position:absolute; width:1px; height:1px; opacity:0; }
.drop-title { font-size:1.1rem; font-weight:700; }
.drop-note,.status { color:var(--muted); font-size:.86rem; }
.lut-list-group { display:grid; gap:8px; color:var(--muted); }
.lut-list-heading { display:flex; align-items:center; justify-content:space-between; }
.lut-list-actions { display:flex; gap:7px; }
.button-help-wrap { position:relative; display:inline-block; }
.tab-help-wrap { flex:0 0 auto; }
.context-help-button { position:absolute; z-index:2; top:-7px; right:-7px; width:22px; height:22px; padding:0; color:var(--text); background:#111a23; border:1px solid #526b7c; border-radius:50%; font-size:.72rem; font-weight:700; line-height:20px; text-align:center; cursor:pointer; }
.context-help-button:hover { color:var(--cyan); border-color:var(--cyan); background:#17232e; }
.context-help-popup { position:fixed; z-index:2147483647; max-width:min(520px,calc(100vw - 32px)); padding:12px 16px; color:#fff; background:#464646; border:1px solid #69747b; border-radius:6px; box-shadow:0 8px 24px #0008; font-size:.86rem; line-height:1.7; white-space:pre-line; }
.list-button { min-width:58px; color:var(--text); background:#202a35; border:1px solid #3a4653; border-radius:7px; padding:5px 12px; font-weight:700; cursor:pointer; }
.list-button:hover:not(:disabled),.all-button.active,.combine-button.active { color:#071016; background:var(--cyan); border-color:var(--cyan); }
.delete-button:hover:not(:disabled) { color:#fff; background:#b73543; border-color:#d44b59; }
.list-button:disabled { cursor:not-allowed; opacity:.4; }
.lut-list { min-height:132px; }
.lut-list-group.drag .lut-list,.lut-list-group.loading .lut-list { border-color:var(--cyan); background:#20c8f310; }
.lut-list option { padding:8px; }
.preset-luts { display:grid; gap:6px; margin-top:2px; }
.preset-help-wrap { display:block; width:100%; }
.preset-select-row { display:flex; gap:6px; align-items:center; }
.preset-select-row select { min-width:0; flex:1; padding:7px 9px; }
.preset-luts .preset-select-row button:not(.context-help-button) { width:auto; flex:0 0 auto; padding:7px 12px; }
.preset-add-help-wrap { margin-right:7px; }
.preset-luts .preset-add-help-wrap #presetAddButton { min-width:58px; padding-right:24px; }
.preset-luts button:not(.context-help-button) { width:100%; color:var(--text); background:#18212b; border:1px solid #354252; border-radius:7px; padding:7px 9px; overflow:hidden; text-align:left; text-overflow:ellipsis; white-space:nowrap; cursor:pointer; }
.preset-luts .context-help-button { position:absolute; top:-7px; right:-7px; width:22px; height:22px; padding:0; overflow:visible; color:var(--text); background:#111a23; border:1px solid #526b7c; border-radius:50%; font-size:.72rem; font-weight:700; line-height:20px; text-align:center; cursor:pointer; }
.preset-set-button { width:100%; }
.preset-luts button:not(.context-help-button):hover:not(:disabled) { border-color:var(--cyan); background:#1d2b36; }
.preset-luts button:not(.context-help-button):disabled { cursor:wait; opacity:.55; }
.axis-controls { display:grid; gap:12px; }
.axis-controls label { display:grid; grid-template-columns:80px 1fr; align-items:center; gap:8px; color:var(--muted); }
.axis-label-help-wrap { width:max-content; padding-right:8px; }
.axis-label-help-wrap .context-help-button { top:-12px; right:-14px; }
.view3d-controls { display:grid; gap:10px; padding-top:2px; border-top:1px solid #29333e; }
.view3d-controls label:not(.check-control) { display:grid; grid-template-columns:110px 1fr; align-items:center; gap:8px; color:var(--muted); }
.view3d-controls input[type="number"] { width:100%; color:var(--text); background:#0b1017; border:1px solid #3a4653; border-radius:8px; padding:8px; }
.view3d-controls .check-control { display:flex; align-items:center; gap:8px; color:var(--muted); }
.view3d-controls .check-control input { accent-color:var(--cyan); }
.view3d-controls .list-button { width:100%; }
.point-info { display:block; width:100%; height:54px; overflow:hidden; padding:8px; border:1px solid #29333e; border-radius:8px; color:#c8d4df; background:#0b1017; font:12px/1.5 ui-monospace,Consolas,monospace; white-space:pre-line; }
select { width:100%; color:var(--text); background:#0b1017; border:1px solid #3a4653; border-radius:8px; padding:10px; }
.status { margin:0; min-height:1.4em; }
.status.error { color:#ff8f8f; }
.copy-button { width:100%; color:#071016; background:var(--cyan); border:0; border-radius:9px; padding:11px 14px; font-weight:700; cursor:pointer; }
.copy-help-wrap { display:block; width:100%; }
.copy-button:hover:not(:disabled) { filter:brightness(1.08); }
.copy-button:disabled { cursor:not-allowed; opacity:.4; }
.save-html-help-wrap { margin-top:-14px; }
.save-html-help-wrap #saveHtmlButton { width:100%; margin:0; }
.graph-card { width:calc(var(--graph-size,600px) + 42px); max-width:100%; padding:20px; justify-self:start; transition:width .2s ease-out; }
.view-tabs { display:flex; flex-wrap:wrap; gap:4px; margin:-8px 0 12px; border-bottom:1px solid #34404d; }
.view-tab { color:var(--muted); background:transparent; border:0; border-bottom:3px solid transparent; padding:10px 18px 9px; font-weight:700; cursor:pointer; }
.view-tab:hover { color:var(--text); }
.view-tab.active { color:var(--cyan); border-bottom-color:var(--cyan); }
.view-panel { width:100%; }
.graph-wrap { width:var(--graph-size,600px); height:var(--graph-size,600px); max-width:100%; overflow:hidden; border-radius:10px; background:#0c1117; transition:width .2s ease-out,height .2s ease-out; }
#graph { display:block; width:100%; height:100%; }
.view3d-wrap { position:relative; }
#lut3d { display:block; width:100%; height:100%; touch-action:none; cursor:grab; }
body.busy #lut3d { cursor:wait !important; }
#plainCanvas { display:block; width:100%; height:100%; cursor:crosshair; }
#lut3d.dragging { cursor:grabbing; }
.view3d-message { position:absolute; inset:0; display:grid; place-items:center; margin:0; color:var(--muted); pointer-events:none; }
.view3d-help { min-height:26px; padding-top:10px; color:var(--muted); font-size:.78rem; text-align:center; }
.legend { justify-content:center; align-items:center; gap:9px; margin-top:12px; color:var(--muted); font-size:.86rem; }
.line { width:35px; height:3px; display:inline-block; }
.neutral { background:#ffe900; }
.rgb-legend { display:inline-flex; align-items:center; gap:5px; margin-left:15px; }
.rgb-legend i { width:18px; height:3px; display:inline-block; margin-left:5px; }
.r { background:#ff4a55; }.g { background:#37db76;}.b { background:#43a4ff;}
@media(max-width:1020px){.workspace{grid-template-columns:1fr;width:100%;margin-inline:0}.controls{width:100%}.graph-card{width:100%}.graph-wrap{width:100%;height:auto;aspect-ratio:1}.graph-wrap #graph{width:100%;height:100%}}
@media(max-width:720px){.app-shell{width:calc(100% - 18px);margin:0 9px;padding-top:24px}.graph-card{padding:8px}.axis-controls label{grid-template-columns:66px 1fr}}