/* «شكلي»: her colours (set on <body> as --m-*), shaped like the seasons */
body[data-palette="mono"][data-season="mine"]{--s-dark:var(--m-dark);--s-acc:var(--m-acc);--s-light:var(--m-light);--s-c1:var(--m-acc);--s-c2:var(--m-c2);--s-c3:var(--m-c3);--s-c4:var(--m-c4);--s-c5:var(--m-dark)}
body[data-palette="mono"][data-season="mine"][data-theme="light"]{--bg:var(--m-bg);--surface:color-mix(in srgb,var(--m-light) 70%,#fff);--surface-2:var(--m-light);--surface-3:color-mix(in srgb,var(--m-light) 60%,#fff);
 --border:color-mix(in srgb,var(--m-c2) 70%,#fff);--text:var(--m-text);--muted:color-mix(in srgb,var(--m-text) 70%,var(--m-c2));--muted-2:color-mix(in srgb,var(--m-text) 55%,var(--m-c2));--button-bg:var(--m-acc);--button-text:#fff}
body[data-palette="mono"][data-season="mine"][data-theme="dark"]{--s-acc:color-mix(in srgb,var(--m-acc) 80%,#fff);--s-c1:color-mix(in srgb,var(--m-acc) 80%,#fff);--s-c3:color-mix(in srgb,var(--m-c3) 70%,#fff);
 --bg:var(--m-nbg);--surface:var(--m-ncard);--surface-2:color-mix(in srgb,var(--m-ntext) 6%,var(--m-ncard));--surface-3:color-mix(in srgb,var(--m-ntext) 10%,var(--m-ncard));--border:color-mix(in srgb,var(--m-ntext) 16%,var(--m-ncard));
 --text:var(--m-ntext);--muted:color-mix(in srgb,var(--m-ntext) 68%,var(--m-ncard));--muted-2:color-mix(in srgb,var(--m-ntext) 52%,var(--m-ncard));--button-bg:var(--m-ntext);--button-text:var(--m-nbg)}
body[data-palette="mono"][data-season="mine"][data-theme="dark"] .sidebar{background:var(--m-nside)!important}
body[data-palette="mono"][data-season="mine"]:not([data-theme="dark"]) .sidebar{background:var(--m-dark)!important}
.look-panel{margin-top:12px;display:flex;flex-direction:column;gap:12px;padding:14px;border:1px solid var(--border);border-radius:14px;background:var(--surface-2)}
.look-top{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.look-top small{color:var(--muted);font-size:12px}
.look-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px}
.look-pick{display:flex;align-items:center;gap:10px;padding:8px;border-radius:12px;background:var(--surface);border:1px solid var(--border);cursor:pointer}
.look-pick input{width:38px;height:38px;border:0;padding:0;background:none;border-radius:10px;cursor:pointer;flex:none}
.look-pick span{display:flex;flex-direction:column;line-height:1.35}.look-pick b{font-size:13px}.look-pick small{font-size:11px;color:var(--muted)}
/* the bookcase in her wood colour (day and night) */
body[data-palette="mono"][data-season="mine"]{--sh-top:color-mix(in srgb,var(--m-wood) 62%,#fff);--sh-front:var(--m-wood);--sh-edge:color-mix(in srgb,var(--m-wood) 70%,#000);--sh-wall:var(--m-wall)}
body[data-palette="mono"][data-season="mine"][data-theme="dark"]{--sh-top:color-mix(in srgb,var(--m-wood) 80%,#fff);--sh-front:color-mix(in srgb,var(--m-wood) 85%,#000);--sh-edge:color-mix(in srgb,var(--m-wood) 55%,#000);--sh-wall:color-mix(in srgb,var(--m-wall) 22%,var(--m-nbg))}
.look-group h4{margin:0 0 6px;font-size:13px;color:var(--muted);font-weight:700}
.look-saved{display:flex;flex-direction:column;gap:8px;padding-top:12px;border-top:1px solid var(--border)}
.look-saved-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}.look-saved-head small,.look-none{color:var(--muted);font-size:12px}
.look-saved-list{display:flex;flex-wrap:wrap;gap:8px}
.look-theme{display:inline-flex;align-items:center;border:1px solid var(--border);border-radius:999px;background:var(--surface);overflow:hidden}
.look-theme.on{border-color:var(--s-acc,var(--text));box-shadow:0 0 0 1px var(--s-acc,var(--text))}
.look-theme button{border:0;background:none;color:var(--text);font:inherit;font-size:13px;padding:6px 10px;cursor:pointer;display:inline-flex;align-items:center;gap:8px}
.look-theme i{width:34px;height:14px;border-radius:7px;display:inline-block;box-shadow:inset 0 0 0 1px rgba(0,0,0,.15)}
.look-theme .look-x{padding:6px 10px 6px 8px;color:var(--muted);border-inline-start:1px solid var(--border)}
.look-save-row{display:flex;gap:8px;flex-wrap:wrap}.look-save-row input{flex:1;min-width:180px;padding:8px 12px;border-radius:10px;border:1px solid var(--border);background:var(--surface);color:var(--text);font:inherit}

/* v31.1: ready palettes, one colour, «جرّبي», readability, theme code */
.look-start{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.look-start-label{font-size:12.5px;color:var(--muted);font-weight:700}
.look-one{display:inline-flex;align-items:center;gap:8px;padding:5px 12px 5px 6px;border:1px solid var(--border);border-radius:999px;background:var(--surface);cursor:pointer;font-size:13.5px;font-weight:600}
.look-one input{width:28px;height:28px;border:0;padding:0;background:none;border-radius:50%;cursor:pointer}
.look-ready{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:8px}
.look-ready-btn{display:flex;flex-direction:column;gap:6px;align-items:stretch;padding:8px;border:1px solid var(--border);border-radius:12px;background:var(--surface);color:var(--text);font:inherit;font-size:12.5px;cursor:pointer;text-align:start}
.look-ready-btn i{display:block;height:22px;border-radius:7px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
.look-ready-btn:hover{border-color:var(--text)}
.look-warn{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:10px 12px;border-radius:12px;background:color-mix(in srgb,#b3261e 10%,var(--surface));border:1px solid color-mix(in srgb,#b3261e 35%,var(--border));font-size:12.5px}
.look-ok{font-size:12px;color:var(--muted)}
.look-ok:before{content:'';display:inline-block;width:8px;height:8px;border-radius:50%;background:#2e7d32;margin-inline-end:6px;vertical-align:middle}
.look-code summary{cursor:pointer;font-size:13px;font-weight:700;color:var(--muted)}
.look-code[open] summary{margin-bottom:8px}
.look-code-row{display:flex;gap:8px;margin-top:6px}
.look-code-row input{flex:1;min-width:0;font:inherit;font-size:12px;padding:8px 10px;border-radius:10px;border:1px solid var(--border);background:var(--surface);color:var(--text);font-family:ui-monospace,monospace}
.look-hint{color:var(--muted);font-size:12px;margin-top:-4px}

/* v31.7 «شكلي» calmer: top line, three tabs, colours as a small table */
.look-top{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.look-top .look-warn{flex:1 1 100%}
.look-tabs{display:flex;gap:4px;padding:3px;border:1px solid var(--border);border-radius:11px;background:var(--surface);align-self:flex-start}
.look-tabs button{border:0;background:none;color:var(--muted);font:inherit;font-size:13px;padding:6px 14px;border-radius:8px;cursor:pointer}
.look-tabs button[aria-selected="true"]{background:var(--surface-2);color:var(--text);font-weight:700;box-shadow:0 0 0 1px var(--border)}
.look-tabs small{font-size:10.5px;color:var(--muted);font-weight:400}
.look-pane{display:flex;flex-direction:column;gap:10px}.look-pane[hidden]{display:none!important}
.look-matrix{display:flex;flex-direction:column;gap:2px}
.look-mrow{display:grid;grid-template-columns:70px minmax(0,1fr);align-items:center;gap:10px;padding:8px 0;border-top:1px solid var(--border)}
.look-mrow:first-child{border-top:0}
.look-mname{font-size:12.5px;color:var(--muted)}
.look-swatches{display:flex;flex-wrap:wrap;gap:14px}
.look-sw{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:11px;color:var(--muted);cursor:pointer;min-width:52px}
.look-sw input{width:30px;height:30px;border:0;padding:0;background:none;border-radius:50%;cursor:pointer}
.look-sw input::-webkit-color-swatch-wrapper{padding:0}.look-sw input::-webkit-color-swatch{border:1px solid var(--border);border-radius:50%}
.look-sw input::-moz-color-swatch{border:1px solid var(--border);border-radius:50%}
.look-sw:hover span{color:var(--text)}