/* Tenpai's appearance editor. All rules are scoped to the shared design dialog. */
dialog.tenpai-design{
 --paper:#faf8f1;--ink:#26392d;--muted:#617063;--line:#26392d26;
 --accent:#345943;--accent-text:#fffaf0;
 width:960px;max-width:calc(var(--app-width,100vw) - 20px);
 max-height:calc(var(--app-height,100dvh) - 20px);padding:0;
 border:1px solid #a5b29e;border-radius:18px;background:var(--paper);color:var(--ink);
 overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;
 scrollbar-color:#a8b59d transparent;box-shadow:0 18px 60px #10271d45;
}
.tenpai-design #dialog-body{margin:0;padding:0;min-width:0}
.tenpai-design #close-dialog{
 position:sticky;top:12px;float:right;margin:12px 12px -56px 0;
 width:44px;height:44px;min-width:44px;min-height:44px;
 border:1px solid var(--line);background:var(--paper);color:var(--ink);z-index:12;
}
.tenpai-design button{font-family:inherit;-webkit-tap-highlight-color:transparent}
.tenpai-design button:focus-visible{outline:3px solid #b68731;outline-offset:3px}
.tenpai-design button:disabled{cursor:wait;opacity:.55}
.tenpai-design .td-header{
 position:sticky;top:0;z-index:5;padding:17px 76px 15px 22px;
 background:var(--paper);border-bottom:1px solid var(--line);
}
.tenpai-design .td-header h2{font:normal 27px/1.15 Georgia,serif;letter-spacing:-.3px;margin:0}
.tenpai-design .td-subtitle{font:12px/1.4 Arial,sans-serif;margin:5px 0 0;color:var(--muted)}
.tenpai-design .td-layout{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:26px;padding:22px}
.tenpai-design .td-controls{min-width:0}
.tenpai-design .td-section{margin:0 0 24px}
.tenpai-design .td-section:last-child{margin-bottom:0}
.tenpai-design .td-section-title{font:600 13px/1.3 Arial,sans-serif;letter-spacing:0;text-transform:none;margin:0 0 10px;color:var(--ink)}
.tenpai-design .td-material-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.tenpai-design .td-material-choice{
 position:relative;display:flex;flex-direction:column;align-items:stretch;gap:0;overflow:hidden;
 min-width:0;min-height:76px;padding:0;border:1px solid #bbc4b4;border-radius:10px;
 background:#fffdf7;color:var(--ink);text-align:left;
}
.tenpai-design .td-material-swatch{display:block;width:100%;height:40px;pointer-events:none}
.tenpai-design .td-material-name{display:block;padding:8px 10px;font-size:12px;line-height:16px}
.tenpai-design .td-material-choice[aria-pressed=true],
.tenpai-design .td-set-choice[aria-pressed=true]{border-color:#345943;box-shadow:0 0 0 2px #345943}
.tenpai-design .td-material-choice:hover,.tenpai-design .td-set-choice:hover{border-color:#345943}
.tenpai-design .td-selection-check{
 position:absolute;right:6px;top:6px;display:none;align-items:center;justify-content:center;
 width:21px;height:21px;border-radius:50%;background:#345943;color:#fffaf0;
 font:bold 12px Arial,sans-serif;box-shadow:0 0 0 1px #fff7;
}
.tenpai-design button[aria-pressed=true]>.td-selection-check{display:flex}
.tenpai-design .td-color-grid{display:grid;grid-template-columns:repeat(var(--color-count,5),minmax(0,1fr));gap:5px}
.tenpai-design .td-color-choice{
 display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
 gap:7px;min-width:44px;min-height:66px;padding:4px 2px;border:0;background:transparent;color:var(--ink);
}
.tenpai-design .td-color-swatch{
 position:relative;display:block;flex:none;width:35px;height:35px;border:1px solid #445e3640;border-radius:50%;
 box-shadow:0 1px 2px #0002;pointer-events:none;
}
.tenpai-design .td-color-choice[aria-pressed=true] .td-color-swatch{box-shadow:0 0 0 3px var(--paper),0 0 0 5px #345943}
.tenpai-design .td-color-name{font-size:10px;line-height:1.3;text-align:center;overflow-wrap:normal}
.tenpai-design .td-colors--wood .td-color-name{font-size:11px}
.tenpai-design .td-set-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.tenpai-design .td-set-choice{
 position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
 min-width:0;min-height:116px;padding:14px 5px 11px;border:1px solid #bbc4b4;border-radius:10px;
 background:#e4e9db;color:var(--ink);
}
.tenpai-design .td-set-samples{display:flex;justify-content:center;align-items:center;width:100%;min-height:61px;padding-right:5px;pointer-events:none}
.tenpai-design .td-set-samples .td-tile{position:relative;flex:none;width:38px;height:50.16px}
.tenpai-design .td-set-samples .td-tile+.td-tile{margin-left:-12px}
.tenpai-design .td-set-samples .td-tile:nth-child(2){transform:translateY(-3px)}
.tenpai-design .td-set-name{font-size:12px;line-height:1.3}
.tenpai-design .td-preview-area{position:sticky;top:103px;align-self:start;min-width:0}
.tenpai-design .td-preview-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.tenpai-design .td-preview-heading h3{font:600 13px/1.3 Arial,sans-serif;text-transform:none;letter-spacing:0;margin:0}
.tenpai-design .td-preview-tag{font:10px/1.3 Arial,sans-serif;color:var(--muted)}
.tenpai-design .td-surface{
 background-color:var(--table,#b9c9b0);
 background-image:var(--surface-image,none),radial-gradient(ellipse at 45% 35%,var(--table-light,#d5deca),var(--table,#b9c9b0));
 background-size:var(--surface-size,auto),cover;background-position:center,center;
 background-repeat:var(--surface-repeat,repeat),no-repeat;background-blend-mode:var(--surface-blend,normal),normal;
}
.tenpai-design .td-preview{
 display:flex;align-items:center;justify-content:center;
 min-width:0;width:100%;height:228px;border-radius:14px;border:1px solid #52614b35;
 overflow:hidden;box-shadow:inset 0 0 24px #13291908;
}
.tenpai-design .td-arrangement{position:relative;width:91%;aspect-ratio:8/4.1}
.tenpai-design .td-arrangement .td-tile{
 position:absolute;left:calc(var(--x) * 12.5%);top:calc(var(--y) * 32.19512%);
 width:12.5%;height:32.19512%;
}
.tenpai-design .td-tile-front{
 position:absolute;inset:0 2px 4px 0;display:flex;align-items:center;justify-content:center;
 padding:8%;border:1px solid #fffaf0;border-radius:5px;
 background:linear-gradient(125deg,#fffdf4,#fff9e9);
 box-shadow:1px 2px 0 #c5c1a8,2px 4px 0 #78896d,3px 5px 3px #10291c30;
}
.tenpai-design .td-tile-front img{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none}
.tenpai-design .td-tile--exklusiv .td-tile-front{border-color:#ba9d62;background:linear-gradient(125deg,#293a31,#17251e);box-shadow:1px 2px 0 #7e744b,2px 4px 0 #384a38,3px 5px 3px #10291c30}
.tenpai-design .td-tile--jade .td-tile-front{padding:0;border:0;border-radius:0;background:transparent;box-shadow:none}
.tenpai-design .td-preview-label{margin:10px 0 0;font:12px/1.5 Arial,sans-serif;color:var(--muted)}
.tenpai-design .td-footer{
 position:sticky;bottom:0;z-index:7;padding:12px 22px 16px;
 background:var(--paper);border-top:1px solid var(--line);
}
.tenpai-design .td-status{margin:0;font:12px/1.4 Arial,sans-serif;color:var(--muted)}
.tenpai-design .td-status:empty{display:none}.tenpai-design .td-status:not(:empty){margin-bottom:10px}
.tenpai-design .td-status.td-error{color:#8d3828}
.tenpai-design .td-actions{display:flex;gap:10px;justify-content:flex-end}
.tenpai-design .td-actions button{min-height:44px;padding:10px 18px;border:1px solid #345943;border-radius:10px;font-size:13px;line-height:1.3}
.tenpai-design .td-apply{background:#345943;color:#fffaf0}
.tenpai-design .td-save-default{background:transparent;color:#284332}
@media(max-width:780px){
 .tenpai-design .td-layout{display:flex;flex-direction:column;gap:22px;padding:18px}
 .tenpai-design .td-preview-area{position:static;order:-1;width:100%;align-self:stretch}
 .tenpai-design .td-preview{height:174px}
 .tenpai-design .td-arrangement{width:min(82%,360px)}
 .tenpai-design .td-color-grid{grid-template-columns:repeat(4,minmax(0,1fr));row-gap:12px}
 .tenpai-design .td-colors--wood{grid-template-columns:repeat(3,minmax(0,1fr))}
 .tenpai-design .td-color-name{font-size:11px}
}
@media(max-width:480px){
 dialog.tenpai-design{max-width:calc(var(--app-width,100vw) - 12px);max-height:calc(var(--app-height,100dvh) - 12px);border-radius:14px}
 .tenpai-design .td-header{padding:16px 68px 14px 16px}.tenpai-design .td-header h2{font-size:25px}
 .tenpai-design .td-layout{padding:16px;gap:20px}.tenpai-design .td-section{margin-bottom:22px}
 .tenpai-design .td-material-grid,.tenpai-design .td-set-grid{gap:8px}
 .tenpai-design .td-material-name{padding:8px;font-size:12px}
 .tenpai-design .td-preview{height:152px}.tenpai-design .td-arrangement{width:88%}
 .tenpai-design .td-set-choice{min-height:112px}
 .tenpai-design .td-set-samples .td-tile{width:34px;height:44.88px}
 .tenpai-design .td-set-samples .td-tile+.td-tile{margin-left:-13px}
 .tenpai-design .td-footer{padding:10px 16px 12px}
 .tenpai-design .td-actions{display:grid;grid-template-columns:minmax(88px,.7fr) minmax(0,1.3fr);gap:8px}
 .tenpai-design .td-actions button{width:100%;font-size:12px;padding:8px 6px}
}
@media(min-width:650px) and (max-height:480px){
 dialog.tenpai-design{max-width:calc(var(--app-width,100vw) - 16px);max-height:calc(var(--app-height,100dvh) - 12px)}
 .tenpai-design .td-layout{display:grid;grid-template-columns:minmax(0,1fr) 240px;gap:18px;padding:16px}
 .tenpai-design .td-preview-area{position:sticky;top:86px;order:initial}
 .tenpai-design .td-preview{height:160px}.tenpai-design .td-arrangement{width:91%}
 .tenpai-design .td-header{padding-top:11px;padding-bottom:11px}
 .tenpai-design .td-header h2{font-size:24px}.tenpai-design .td-subtitle{display:none}
 .tenpai-design #close-dialog{top:4px;margin-top:4px}
 .tenpai-design .td-footer{padding:8px 16px}
 .tenpai-design .td-color-grid{grid-template-columns:repeat(var(--color-count,5),minmax(0,1fr))}
 .tenpai-design .td-color-name{font-size:10px}
}

@media(min-width:650px) and (max-height:340px){
 .tenpai-design .td-preview-area{top:64px}
 .tenpai-design .td-preview-heading{margin-bottom:6px}
 .tenpai-design .td-preview{height:calc(var(--app-height,100dvh) - 204px)}
 .tenpai-design .td-arrangement{width:min(91%,calc((var(--app-height,100dvh) - 204px) * 1.8))}
 .tenpai-design .td-preview-label{margin-top:6px;font-size:11px;line-height:1.3}
}