@import url("../fonts/fonts.css");

:root{
  --ground:#ECEEF1; --panel:#FFFFFF; --glass:rgba(255,255,255,.86); --panel2:#F3F4F6; --panel3:#E9EBEF; --ink:#0E1116; --muted:#5B6270; --faint:#5F6674;
  --line:#E4E6EA; --line2:#D6D9DF; --sel:#2F5BFF; --sel-soft:#E7ECFF; --sel-ink:#FFFFFF; --danger:#D6453D; --ok:#1F9D63; --pro:#6D4AFF; --pro-soft:#EFEBFF; --pro-ink:#FFFFFF;
  --accent:#0E1116; --accent-ink:#FFFFFF; --plan-bg:#ECEEF1; --grid:#D3D7DD; --grid2:#BCC2CA; --wall:#16181D; --room-fill:#FFFFFF;
  --shadow:0 1px 2px rgba(14,17,22,.06),0 8px 24px rgba(14,17,22,.08); --shadow-lg:0 24px 60px rgba(14,17,22,.18);
  --stage3d:radial-gradient(120% 90% at 50% 20%,#FFFFFF 0%,#E9ECF0 55%,#DADFE6 100%);
  --stage3d-eve:radial-gradient(120% 90% at 50% 15%,#2B3342 0%,#161A22 60%,#0D1015 100%);
  --font:"Geist",system-ui,-apple-system,"Segoe UI",sans-serif; --mono:"Geist Mono",ui-monospace,Menlo,monospace;
  --hero-bg:radial-gradient(110% 85% at 70% 8%,#FFE8D2 0%,#F4E3D8 32%,#DFDCE8 70%,#CBCFDE 100%);
  --r:12px; --tb:56px; --g:12px; --lw:288px; --rw:340px; color-scheme:light;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --ground:#0B0C0F; --panel:#16181C; --glass:rgba(22,24,28,.86); --panel2:#1E2126; --panel3:#272B31; --ink:#F3F4F6; --muted:#A3A9B5; --faint:#8A919E;
  --line:#262A30; --line2:#323740; --sel:#6E8BFF; --sel-soft:#1C2445; --sel-ink:#0B0C0F; --danger:#FF7A70; --ok:#4CC38A; --pro:#A99BFF; --pro-soft:#241F45; --pro-ink:#0B0C0F;
  --accent:#F3F4F6; --accent-ink:#0B0C0F; --plan-bg:#0B0C0F; --grid:#23272E; --grid2:#343A43; --wall:#E9EBEF; --room-fill:#1A1D22;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.35); --shadow-lg:0 24px 60px rgba(0,0,0,.55);
  --stage3d:radial-gradient(120% 90% at 50% 20%,#262B33 0%,#15181D 60%,#0B0C0F 100%); --hero-bg:radial-gradient(110% 85% at 70% 8%,#3A2B2A 0%,#24202A 42%,#15161D 78%,#0E0F14 100%); color-scheme:dark;}}
:root[data-theme="dark"]{
  --ground:#0B0C0F; --panel:#16181C; --glass:rgba(22,24,28,.86); --panel2:#1E2126; --panel3:#272B31; --ink:#F3F4F6; --muted:#A3A9B5; --faint:#8A919E;
  --line:#262A30; --line2:#323740; --sel:#6E8BFF; --sel-soft:#1C2445; --sel-ink:#0B0C0F; --danger:#FF7A70; --ok:#4CC38A; --pro:#A99BFF; --pro-soft:#241F45; --pro-ink:#0B0C0F;
  --accent:#F3F4F6; --accent-ink:#0B0C0F; --plan-bg:#0B0C0F; --grid:#23272E; --grid2:#343A43; --wall:#E9EBEF; --room-fill:#1A1D22;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.35); --shadow-lg:0 24px 60px rgba(0,0,0,.55);
  --stage3d:radial-gradient(120% 90% at 50% 20%,#262B33 0%,#15181D 60%,#0B0C0F 100%); --hero-bg:radial-gradient(110% 85% at 70% 8%,#3A2B2A 0%,#24202A 42%,#15161D 78%,#0E0F14 100%); color-scheme:dark;}
[hidden]{display:none!important}
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{background:var(--ground);color:var(--ink);font-family:var(--font);font-size:13.5px;overflow:hidden;-webkit-font-smoothing:antialiased;letter-spacing:-.005em}
button,input,select,textarea{font:inherit;color:inherit;letter-spacing:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--sel);outline-offset:2px}
.num,.mono{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:0}
.app{position:fixed;inset:0}
.float{position:absolute;background:var(--glass);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);z-index:10}
.stage{position:absolute;inset:0;background:var(--plan-bg);overflow:hidden}
.stage.v3{background:var(--stage3d)}
.stage.v3.evening{background:var(--stage3d-eve)}
#plan{position:absolute;inset:0;width:100%;height:100%;touch-action:none;display:block}
#view3d{position:absolute;inset:0}
#view3d canvas{display:block;width:100%;height:100%;touch-action:none}
#hudZone{position:absolute;top:calc(var(--tb) + var(--g) * 2);bottom:var(--g);left:calc(60px + var(--g) * 3 + var(--lw));right:calc(var(--rw) + var(--g) * 2);pointer-events:none;z-index:5;transition:left .25s,right .25s}
.app.lc #hudZone{left:calc(60px + var(--g) * 2)}
.app.rc #hudZone{right:var(--g)}
.hud{position:absolute;display:flex;gap:8px;align-items:center;flex-wrap:wrap;pointer-events:auto}
.hud.tl{top:0;left:0}.hud.tr{top:0;right:0;justify-content:flex-end}.hud.bl{bottom:0;left:0;max-width:62%}.hud.br{bottom:60px;right:0}
.hud:empty{display:none}
.hud.bl{display:none!important}
.hud.nav{top:auto;bottom:60px;right:0;gap:4px;align-items:flex-end;flex-wrap:nowrap;padding:5px;border-radius:14px;background:var(--glass);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid var(--line);box-shadow:var(--shadow)}
.navpad{display:grid;grid-template-columns:repeat(3,32px);grid-template-rows:repeat(3,32px);gap:2px}
.navz{display:grid;grid-template-rows:repeat(2,32px);gap:2px;padding-left:4px;border-left:1px solid var(--line)}
.hud.nav button{width:32px;height:32px;border:0;border-radius:9px;background:transparent;color:var(--muted);display:grid;place-items:center;touch-action:none;-webkit-user-select:none;user-select:none;padding:0}
.hud.nav button:hover{background:var(--panel2);color:var(--ink)}
.hud.nav button:active{background:var(--sel-soft);color:var(--sel)}
.minimap{position:absolute;right:0;bottom:60px;width:170px;height:130px;border-radius:14px;background:var(--glass);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid var(--line);box-shadow:var(--shadow);pointer-events:auto;cursor:crosshair;display:block}
.joy{position:absolute;left:0;bottom:0;width:96px;height:96px;border-radius:50%;background:var(--glass);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid var(--line);box-shadow:var(--shadow);pointer-events:auto;touch-action:none;display:none}
.joy i{position:absolute;left:50%;top:50%;width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:50%;background:var(--panel);border:1px solid var(--line2);box-shadow:var(--shadow)}
@media (pointer:coarse){.joy{display:block}.hud.nav button{width:40px;height:40px}.navpad{grid-template-columns:repeat(3,40px);grid-template-rows:repeat(3,40px)}.navz{grid-template-rows:repeat(2,40px)}}
.hud.tr.tourpos{top:auto;bottom:60px;left:50%;right:auto;transform:translateX(-50%);flex-wrap:nowrap}
.roomview{position:absolute;right:0;bottom:198px;display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 13px 0 11px;border-radius:999px;border:1px solid var(--line);background:var(--glass);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:var(--shadow);color:var(--ink);font-weight:600;font-size:12.5px;pointer-events:auto;white-space:nowrap}
.roomview:hover{background:var(--panel)}
.roomview svg{color:var(--sel)}
.roomview[hidden]{display:none}
.tourchip{color:var(--ink);white-space:nowrap}
.hudmore{display:none;border:1px solid var(--line);background:var(--glass);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:var(--shadow);border-radius:10px;width:40px;height:46px;place-items:center;color:var(--muted);padding:0}
.hudmore[aria-expanded="true"]{color:var(--ink);background:var(--panel)}
.chip{background:var(--glass);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid var(--line);border-radius:999px;padding:6px 12px;font-size:12px;box-shadow:var(--shadow);display:inline-flex;gap:8px;align-items:center;color:var(--muted)}
.chip.mono{font-family:var(--mono)}
.chip.example{color:var(--ink)}
.chip.example::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--sel);box-shadow:0 0 0 3px var(--sel-soft)}
.hint{line-height:1.4;border-radius:12px}
.topbar{top:var(--g);left:var(--g);right:var(--g);height:var(--tb);display:flex;align-items:center;gap:8px;padding:0 10px 0 12px;z-index:20}
.brand{display:flex;align-items:center;gap:9px;font-weight:700;font-size:15px;letter-spacing:-.02em;white-space:nowrap}
.logo{width:auto;height:28px;display:grid;place-items:center}
.logo svg{width:auto;height:26px}
.rwmark{color:var(--ink);display:block}.rwmark .gold{fill:#D2AE7C}
.rwword{display:block;height:11px;width:auto;color:var(--ink)}
.divider{width:1px;height:22px;background:var(--line2);margin:0 4px}
.proj{display:flex;align-items:center;gap:8px;min-width:0;flex:0 1 auto}
.proj input{border:1px solid transparent;background:transparent;border-radius:8px;padding:6px 8px;font-weight:600;min-width:60px;width:240px;max-width:36vw}
.proj input:hover,.proj input:focus{border-color:var(--line2);background:var(--panel)}
.save{font-size:12px;color:var(--faint);white-space:nowrap;display:inline-flex;align-items:center;gap:6px}
.save::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ok)}
.save.busy::before{background:var(--faint)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid var(--line2);background:var(--panel);border-radius:10px;padding:0 12px;height:34px;font-weight:500;white-space:nowrap;line-height:1;transition:background .15s,border-color .15s,transform .1s}
.btn:hover{background:var(--panel2)}
.btn:active{transform:scale(.98)}
.btn:disabled{opacity:.45;cursor:default;transform:none}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:600}
.btn.primary:hover{opacity:.9}
.btn.ai{background:var(--sel);border-color:var(--sel);color:var(--sel-ink);font-weight:600}
.btn.ai:hover{opacity:.92}
.btn.ghost{border-color:transparent;background:transparent}
.btn.ghost:hover{background:var(--panel2)}
.btn.danger{color:var(--danger)}
.btn.sm{height:28px;padding:0 10px;font-size:12.5px;border-radius:8px}
.btn svg,.tool svg{width:18px;height:18px;flex:none}
.btn.icon{padding:0;width:28px}
.sheet-x{color:var(--muted)}
.seg{display:inline-flex;background:var(--panel2);border-radius:10px;padding:3px;gap:2px}
.seg button{border:0;background:transparent;padding:0 12px;height:28px;border-radius:8px;font-weight:600;font-size:12.5px;color:var(--muted);white-space:nowrap}
.seg button[aria-pressed="true"]{background:var(--panel);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.12)}
.hud .seg{background:var(--glass);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid var(--line);box-shadow:var(--shadow)}
.iconbtn{border:0;background:transparent;border-radius:9px;width:34px;height:34px;display:inline-grid;place-items:center;color:var(--muted);flex:none}
.iconbtn:hover{background:var(--panel2);color:var(--ink)}
.iconbtn[aria-pressed="true"]{color:var(--ink)}
.iconbtn:disabled{opacity:.35}
.tools{top:calc(var(--tb) + var(--g) * 2);left:var(--g);width:60px;display:flex;flex-direction:column;gap:2px;padding:6px;max-height:calc(100% - var(--tb) - var(--g) * 3);overflow:auto;scrollbar-width:none}
.tool{display:flex;flex-direction:column;align-items:center;gap:3px;border:0;background:transparent;border-radius:10px;padding:8px 0 6px;font-size:10px;font-weight:500;color:var(--muted);flex:none}
.tool:hover{background:var(--panel2);color:var(--ink)}
.tool[aria-pressed="true"]{background:var(--ink);color:var(--panel)}
.tools hr{border:0;border-top:1px solid var(--line);margin:4px 6px;flex:none}
.panel{display:flex;flex-direction:column;min-height:0;min-width:0;overflow:hidden;transition:transform .25s ease,opacity .2s}
.left{top:calc(var(--tb) + var(--g) * 2);bottom:var(--g);left:calc(60px + var(--g) * 2);width:var(--lw)}
.right{top:calc(var(--tb) + var(--g) * 2);bottom:var(--g);right:var(--g);width:var(--rw)}
.app.lc .left{transform:translateX(-16px);opacity:0;pointer-events:none}
.app.rc .right{transform:translateX(16px);opacity:0;pointer-events:none}
.phead{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:14px 14px 10px}
.phead h2{font-size:14px;margin:0;font-weight:600;letter-spacing:-.01em}
.pbody{overflow:auto;padding:0 14px 16px;min-height:0;flex:1;scrollbar-width:thin}
.search{width:100%;min-width:0;border:1px solid transparent;background:var(--panel2);border-radius:10px;padding:8px 11px;margin-bottom:12px}
.search:focus{border-color:var(--sel);background:var(--panel);outline:none}
.cat-title{font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--faint);margin:18px 0 8px;font-weight:600}
.cat-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 8px}
.cat-item{display:flex;flex-direction:column;align-items:flex-start;gap:1px;border:0;background:transparent;border-radius:12px;padding:0;text-align:left;min-width:0;transition:transform .15s}
.cat-item:hover{transform:translateY(-1px)}
.cat-item:hover .thumb{border-color:var(--sel);box-shadow:0 0 0 3px var(--sel-soft)}
.cat-item .thumb{width:100%;aspect-ratio:4/3;border-radius:12px;background:var(--panel2);display:grid;place-items:center;overflow:hidden;border:1px solid var(--line);margin-bottom:6px;transition:border-color .15s,box-shadow .15s}
.cat-item .thumb img{width:100%;height:100%;object-fit:cover}
.cat-item .thumb img.contain{object-fit:contain}
.cat-item b{font-size:12.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;padding:0 2px}
.cat-item small{font-family:var(--mono);font-size:10.5px;color:var(--faint);padding:0 2px}
.importbox{border-radius:14px;padding:14px;display:grid;gap:10px;background:linear-gradient(135deg,var(--sel-soft),var(--panel2));border:1px solid var(--line)}
.importbox p{margin:0;color:var(--muted);font-size:12.5px;line-height:1.5}
.importbox p b{color:var(--ink)}
.zoom{display:inline-flex;background:var(--glass);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid var(--line);border-radius:10px;overflow:hidden;box-shadow:var(--shadow)}
.zoom button{border:0;background:transparent;padding:0 12px;height:32px;font-weight:600;color:var(--muted)}
.zoom button:hover{background:var(--panel2);color:var(--ink)}
.tabs{display:flex;gap:2px;margin:10px 10px 0;padding:3px;background:var(--panel2);border-radius:10px}
.tabs button{flex:1;border:0;background:transparent;padding:0 6px;height:30px;border-radius:8px;font-weight:600;font-size:12.5px;color:var(--muted);white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;gap:5px}
.tabs button[aria-selected="true"]{background:var(--panel);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.12)}
.tabs button svg{width:14px;height:14px}
#tabAI svg{color:var(--sel)}
.field{display:grid;gap:5px;margin-bottom:10px;min-width:0}
.field label,.flabel{font-size:11.5px;color:var(--muted);font-weight:500}
.field input,.field select,.field textarea,.wallcard select{border:1px solid transparent;background:var(--panel2);border-radius:8px;padding:7px 9px;width:100%;min-width:0;height:34px}
.field textarea{resize:vertical;min-height:70px;line-height:1.45;height:auto}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--sel);background:var(--panel);outline:none}
.field input[type=color]{padding:3px;cursor:pointer}
.row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.row2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.sect{border-top:1px solid var(--line);padding-top:14px;margin-top:14px}
.sect h3{font-size:12.5px;margin:0 0 10px;font-weight:600}
.muted{color:var(--muted)}
.small{font-size:12px}
.empty{color:var(--muted);line-height:1.55;font-size:13px}
.empty ul{padding-left:18px;margin:8px 0}
.empty li{margin-bottom:4px}
.swatches{display:flex;flex-wrap:wrap;gap:6px}
.sw{width:22px;height:22px;border-radius:50%;border:1px solid rgba(0,0,0,.12);padding:0;transition:transform .1s}
.sw:hover{transform:scale(1.12)}
.sw[aria-pressed="true"]{outline:2px solid var(--sel);outline-offset:2px}
.wallgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.wallcard{border:1px solid var(--line);border-radius:12px;padding:8px;display:grid;gap:6px;background:var(--panel);min-width:0}
.wallcard .prev{height:40px;border-radius:8px;border:1px solid var(--line)}
.wallcard b{font-size:11.5px;font-weight:600;line-height:1.3}
.wallcard select{height:30px;padding:4px 6px;font-size:12px}
.wallcard input[type=color]{border:0;background:var(--panel2);border-radius:6px;cursor:pointer}
.cornerpick{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.cornerpick button{display:flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--panel);border-radius:10px;padding:8px;font-size:12px;font-weight:500;color:var(--muted)}
.cornerpick button:hover{border-color:var(--line2);color:var(--ink)}
.cornerpick button[aria-pressed="true"]{border-color:var(--sel);background:var(--sel-soft);color:var(--ink)}
.cp{width:22px;height:18px;border:2px solid currentColor;border-radius:3px;position:relative;flex:none}
.cp::after{content:"";position:absolute;width:10px;height:8px;background:var(--panel);border:0 solid currentColor}
.cp-nw::after{top:-2px;left:-2px;border-right-width:2px;border-bottom-width:2px}
.cp-ne::after{top:-2px;right:-2px;border-left-width:2px;border-bottom-width:2px}
.cp-sw::after{bottom:-2px;left:-2px;border-right-width:2px;border-top-width:2px}
.cp-se::after{bottom:-2px;right:-2px;border-left-width:2px;border-top-width:2px}
.cornerpick button[aria-pressed="false"] .cp::after{display:none}
.cornerpick button[aria-pressed="true"] .cp::after{background:var(--sel-soft)}
.actions{display:flex;flex-wrap:wrap;gap:6px}
.photo{width:100%;border-radius:10px;border:1px solid var(--line);max-height:170px;object-fit:contain;background:var(--panel2)}
.ai-box{display:grid;gap:12px}
.ai-hero{border-radius:14px;padding:14px;background:linear-gradient(135deg,var(--sel-soft),var(--panel2));display:grid;gap:4px}
.ai-hero b{font-size:14px}
.ai-hero span{color:var(--muted);font-size:12.5px;line-height:1.45}
.pillset{display:flex;flex-wrap:wrap;gap:6px}
.catf-l{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:2px 0 5px}
#catalog .catf{margin:0 0 10px;gap:5px}
#catalog .catf .pill{padding:4px 10px;font-size:12px}
.catf-d{margin:0 0 12px}
.catf-d summary{display:flex;align-items:center;gap:8px;cursor:pointer;list-style:none;font-size:12.5px;padding:2px 0 6px}
.catf-d summary::-webkit-details-marker{display:none}
.catf-d summary .catf-l{margin:0}
.catf-d summary::after{content:"";width:6px;height:6px;border-right:1.6px solid var(--muted);border-bottom:1.6px solid var(--muted);transform:rotate(45deg);margin:-3px 0 0 auto}
.catf-d[open] summary::after{transform:rotate(-135deg);margin-top:3px}
.noai #tabAI,.noai #shopAI,.noai #impAI,.noai #impAIst,.noai [data-kiopen],.noai .kioff,.noai #gAI{display:none!important}
.donate{text-decoration:none;color:var(--ink)}
.linkbtn{border:0;background:none;padding:0;color:var(--accent);font:inherit;text-decoration:underline;cursor:pointer}
.pill{border:1px solid var(--line2);background:var(--panel);border-radius:999px;padding:5px 11px;font-size:12.5px;font-weight:500}
.pill:hover{border-color:var(--ink)}
.pill[aria-pressed="true"]{background:var(--ink);color:var(--panel);border-color:var(--ink)}
.checks{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.checks label,.check{display:flex;gap:8px;align-items:center;font-size:12.5px;background:var(--panel2);border-radius:8px;padding:7px 9px;cursor:pointer}
input[type=checkbox]{accent-color:var(--sel);width:15px;height:15px;flex:none}
.ai-out{border:1px solid var(--line);border-radius:14px 14px 14px 4px;padding:10px 12px;background:var(--panel);line-height:1.55;font-size:13px;white-space:pre-wrap;max-height:320px;overflow:auto}
.msg-user{justify-self:end;max-width:85%;background:var(--ink);color:var(--panel);border-radius:14px 14px 4px 14px;padding:8px 12px;font-size:13px;white-space:pre-wrap}
.pending{display:flex;gap:8px;align-items:center;color:var(--muted);font-size:12.5px}
.spin{width:14px;height:14px;border:2px solid var(--line2);border-top-color:var(--sel);border-radius:50%;animation:sp .8s linear infinite;flex:none}
@keyframes sp{to{transform:rotate(360deg)}}
.proposal{border:1px solid var(--sel);background:var(--sel-soft);border-radius:14px;padding:12px 14px;display:grid;gap:8px;line-height:1.5}
table.shop{width:100%;border-collapse:collapse;font-size:12.5px}
table.shop th{text-align:left;font-size:11px;color:var(--faint);font-weight:500;border-bottom:1px solid var(--line);padding:6px 4px}
table.shop td{border-bottom:1px solid var(--line);padding:7px 4px;vertical-align:top}
table.shop td.r,table.shop th.r{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
table.shop a{color:inherit}
.total{display:flex;justify-content:space-between;font-weight:600;padding:10px 4px;font-family:var(--mono);font-size:14px}
.scrim{position:fixed;inset:0;background:rgba(8,10,14,.42);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);display:grid;place-items:center;z-index:50;padding:16px}
.modal{background:var(--panel);border-radius:18px;box-shadow:var(--shadow-lg);width:min(580px,100%);max-height:92vh;overflow:auto;padding:22px;border:1px solid var(--line)}
.modal h2{margin:0 0 4px;font-size:18px;letter-spacing:-.02em}
.modal .sub{color:var(--muted);margin:0 0 14px;font-size:13px;line-height:1.5}
.drop{display:block;cursor:pointer;border:1.5px dashed var(--line2);border-radius:14px;padding:22px;text-align:center;color:var(--muted);background:var(--panel2);transition:border-color .15s,background .15s}
.drop b{color:var(--ink)}
.drop.over,.drop:hover{border-color:var(--sel);background:var(--sel-soft)}
.cropwrap{position:relative;margin-top:10px}
.cropwrap canvas{width:100%;border-radius:10px;display:block;touch-action:none;background:repeating-conic-gradient(var(--panel2) 0 25%,var(--panel) 0 50%) 0 0/16px 16px}
.toast{position:fixed;left:50%;bottom:140px;transform:translateX(-50%);background:var(--ink);color:var(--panel);padding:10px 16px;border-radius:12px;font-size:13px;z-index:60;box-shadow:var(--shadow-lg);max-width:90vw;animation:tin .2s ease-out}
.toast.act{display:flex;align-items:center;gap:12px;padding:6px 6px 6px 16px}
.toast.act .btn{background:transparent;color:var(--panel);border-color:color-mix(in srgb,var(--panel) 35%,transparent);flex:none}
.toast.act .btn:hover{background:color-mix(in srgb,var(--panel) 14%,transparent)}
@keyframes tin{from{opacity:0;transform:translate(-50%,8px)}}
.menu{position:absolute;top:calc(100% + 8px);right:0;background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-lg);padding:6px;display:grid;min-width:240px;z-index:40}
.menu button{border:0;background:transparent;text-align:left;padding:8px 10px;border-radius:8px}
.menu a.donate{display:block;padding:8px 10px;border-radius:8px;color:var(--ink);text-decoration:none}.menu a.donate:hover{background:var(--panel2)}
.menu button:hover{background:var(--panel2)}
.menu button:disabled{opacity:.4}
.rel{position:relative}
.mobile-only{display:none!important}
.tools .shop-tool{display:none}
@media (max-width:1180px){:root{--lw:252px;--rw:310px}}
@media (max-width:860px){
  :root{--g:8px;--tb:48px}
  .mobile-only{display:inline-flex!important}
  .hide-sm{display:none!important}
  .topbar{padding:0 6px 0 8px;gap:4px}
  .proj input{width:100%;max-width:none}
  .save,.divider{display:none}
  .seg button{padding:0 9px}
  .tools{top:auto;bottom:var(--g);left:var(--g);right:var(--g);width:auto;flex-direction:row;overflow-x:auto;max-height:none;padding:4px 6px calc(4px + env(safe-area-inset-bottom,0px))}
  .tools hr{border-top:0;border-left:1px solid var(--line);margin:6px 2px}
  .tool{min-width:54px}
  .tools .shop-tool{display:flex}
  .tools hr.shop-tool{display:block}
  .left,.right{top:auto;bottom:calc(var(--g) + 136px);left:var(--g);right:var(--g);width:auto;height:min(50vh,440px);z-index:30;box-shadow:var(--shadow-lg);background:var(--panel);transform:translateY(calc(100% + 160px))}
  .app .left.open,.app .right.open{transform:none;pointer-events:auto;opacity:1}
  .app.lc .left:not(.open),.app.rc .right:not(.open){transform:translateY(calc(100% + 160px))}
  .panel.float::before{content:"";display:block;flex:none;width:36px;height:4px;border-radius:2px;background:var(--line2);margin:7px auto 0}
  .right.float::before{margin-bottom:26px}
  .right .sheet-x{position:static}
  .left .phead{padding-top:6px}
  .btn.icon.sheet-x{width:36px;height:36px}
  .app:has(.panel.open) ~ .toast{top:calc(var(--g) + var(--tb) + 12px);bottom:auto}
  #hudZone,.app.lc #hudZone,.app.rc #hudZone{top:calc(var(--tb) + var(--g) * 2);left:var(--g);right:var(--g);bottom:calc(var(--g) + 76px)}
  .hud.bl{display:none}
  #catalog .pillset{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-bottom:2px}
  #catalog .pillset::-webkit-scrollbar{display:none}
  #catalog .pill{flex:none}
  #catalog .importbox{display:none}
  .hud.nav{bottom:62px}
  .minimap{bottom:62px;width:120px;height:92px}
  .roomview{bottom:162px;height:40px}
  .joy{bottom:62px;display:block}
  .hud.tr.tourpos{bottom:172px}
  .hud .seg button,.panel .seg button{min-height:40px}
}

/* ---------- guided flow ---------- */
.stepper{display:flex;align-items:center;gap:2px;margin:0 auto;background:var(--panel2);border-radius:12px;padding:3px;min-width:0;overflow:hidden}
.stepper button{display:inline-flex;align-items:center;gap:7px;border:0;background:transparent;border-radius:9px;height:32px;padding:0 11px 0 6px;font-weight:600;font-size:12.5px;color:var(--muted);white-space:nowrap}
.stepper button:hover{color:var(--ink)}
.stepper .n{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:11px;background:var(--panel3);color:var(--muted);font-family:var(--mono);flex:none}
.stepper button.done .n{background:var(--ink);color:var(--panel)}
.stepper button[aria-current="step"]{background:var(--panel);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.12)}
.stepper button[aria-current="step"] .n{background:var(--sel);color:var(--sel-ink)}
.stepnav{position:absolute;left:50%;bottom:0;transform:translateX(-50%);display:flex;align-items:center;gap:8px;padding:6px;border-radius:16px;background:var(--glass);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid var(--line);box-shadow:var(--shadow);pointer-events:auto;white-space:nowrap}
.stepnav .lbl{font-size:12px;color:var(--muted);padding:0 6px}
.stepnav .btn{height:38px;border-radius:11px}
.stepnav .btn.next{background:var(--sel);border-color:var(--sel);color:var(--sel-ink);font-weight:600;padding:0 16px}
.stepnav .btn.next:hover{opacity:.92}
.stepnav .short{display:none}
.stepnav .lbl-s{display:none;font-size:12px;color:var(--muted);padding:0 4px;max-width:40vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.app.home .topbar,.app.home .tools,.app.home .panel,.app.home #hudZone{display:none}
.guide-head{display:flex;gap:12px;align-items:flex-start;margin-bottom:14px}
.guide-head .big{width:34px;height:34px;border-radius:11px;background:var(--sel);color:var(--sel-ink);display:grid;place-items:center;font-weight:700;font-family:var(--mono);flex:none}
.guide-head b{display:block;font-size:15px;letter-spacing:-.01em;margin-bottom:3px}
.guide-head span{color:var(--muted);font-size:12.5px;line-height:1.5}
.card{border:1px solid var(--line);background:var(--panel);border-radius:14px;padding:12px;display:grid;gap:10px}
.card h4{margin:0;font-size:12.5px;font-weight:600}
.listrow{display:flex;align-items:center;gap:10px;width:100%;border:0;background:transparent;border-radius:10px;padding:8px;text-align:left}
.listrow:hover{background:var(--panel2)}
.listrow[aria-current="true"]{background:var(--sel-soft)}
.listrow .sw{width:12px;height:12px;flex:none}
.listrow .grow{flex:1;min-width:0}
.listrow .grow b{display:block;font-size:13px;font-weight:600}
.listrow .grow small{color:var(--faint);font-size:11.5px}
.listrow .val{font-family:var(--mono);font-size:12px;color:var(--muted)}
.warn{color:var(--danger);font-size:11.5px;font-weight:500}
.okdot{width:8px;height:8px;border-radius:50%;background:var(--ok);flex:none}
.baddot{width:8px;height:8px;border-radius:50%;background:var(--danger);flex:none}
.toolgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.toolcard{display:flex;gap:10px;align-items:center;border:1px solid var(--line);background:var(--panel);border-radius:12px;padding:10px;text-align:left}
.toolcard:hover{border-color:var(--line2);background:var(--panel2)}
.toolcard[aria-pressed="true"]{border-color:var(--sel);background:var(--sel-soft)}
.toolcard svg{width:22px;height:22px;color:var(--ink);flex:none}
.toolcard b{display:block;font-size:12.5px;font-weight:600}
.toolcard small{display:block;font-size:11px;color:var(--faint)}
.palette{display:flex;align-items:center;gap:10px;border:1px solid var(--line);background:var(--panel);border-radius:12px;padding:10px;text-align:left;width:100%}
.palette:hover{border-color:var(--sel)}
.palette .dots{display:flex}
.palette .dots i{width:22px;height:22px;border-radius:50%;border:2px solid var(--panel);margin-left:-6px;box-shadow:0 0 0 1px var(--line)}
.palette .dots i:first-child{margin-left:0}
.palette b{font-size:12.5px;font-weight:600;display:block}
.palette small{font-size:11px;color:var(--faint)}
.total-row{display:flex;justify-content:space-between;font-family:var(--mono);font-size:12.5px;padding:8px;border-top:1px solid var(--line);margin-top:4px}
/* landing */
.landing{position:fixed;inset:0;z-index:40;display:grid;grid-template-columns:minmax(500px,600px) 1fr;pointer-events:none;transition:opacity .22s ease,transform .22s cubic-bezier(.2,.8,.2,1);transform-origin:30% 50%}
.landing>*{pointer-events:auto}
.landing.leaving{opacity:0;transform:scale(.985)}
.landing.leaving>*{pointer-events:none!important}
.landing.entering{animation:lin .32s cubic-bezier(.2,.8,.2,1)}
@keyframes lin{from{opacity:0;transform:scale(.99)}}
.app.app-in .topbar,.app.app-in .tools,.app.app-in .panel,.app.app-in #hudZone{animation:ain .32s ease-out}
@keyframes ain{from{opacity:0}}
.app.home #plan{opacity:0}
.app.home .stage,.app.home .stage.v3,.app.home .stage.v3.evening{background:var(--hero-bg)}
.app.home #view3d canvas{opacity:0;transition:opacity .7s ease}
.app.home .stage.hero-ready #view3d canvas{opacity:1}
#view3d canvas.hero-fade{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:1!important;transition:opacity .9s ease}
#view3d canvas.hero-fade.out{opacity:0!important}
.l-main{background:var(--panel);border-right:1px solid var(--line);overflow:auto;padding:26px 40px 36px;display:flex;flex-direction:column;gap:22px;box-shadow:var(--shadow-lg);scrollbar-width:thin}
.l-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.l-brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:16px;letter-spacing:-.02em}
.l-logo{display:flex;align-items:center;gap:12px;color:var(--ink);line-height:1}
.l-logo .rwmark{width:auto;height:52px;flex:none}
.l-logo .rwword{height:17px;margin-top:4px}
.l-points{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:9px}
.l-points li{display:flex;gap:11px;align-items:flex-start}
.l-points .pi{flex:none;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:var(--sel-soft);color:var(--sel)}
.l-points b{display:block;font-size:13.5px;font-weight:650;letter-spacing:-.01em;margin-top:1px}
.l-points small{display:block;font-size:12.5px;color:var(--muted);line-height:1.45;margin-top:1px}
/* Logo-Einblendung passend zum Wände-Intro: Wände zeichnen sich, dann schwingt die Tür auf, dann der Schriftzug */
.l-intro .l-logo .rwmark{animation:rwpop .7s cubic-bezier(.2,.8,.2,1) .1s both;transform-origin:50% 80%}
.l-intro .l-logo .rwmark .gold{animation:rwfade .5s ease-out .65s both}
.l-intro .l-logo .rwword{animation:rwword .6s cubic-bezier(.2,.8,.2,1) .45s both}
.l-intro .l-tag{animation:rwword .5s ease-out .9s both}
.l-intro .l-hero h1{animation:rwup .6s cubic-bezier(.2,.8,.2,1) .7s both}
.l-intro .l-points li{animation:rwup .5s cubic-bezier(.2,.8,.2,1) both}
.l-intro .l-points li:nth-child(1){animation-delay:.95s}.l-intro .l-points li:nth-child(2){animation-delay:1.07s}.l-intro .l-points li:nth-child(3){animation-delay:1.19s}
.l-wait .l-logo *,.l-wait .l-tag,.l-wait .l-hero h1,.l-wait .l-points li{animation-play-state:paused!important}
@keyframes rwpop{from{opacity:0;transform:translateY(10px) scale(.92)}}
@keyframes rwfade{from{opacity:0}}
@keyframes rwword{from{opacity:0;transform:translateX(-8px);clip-path:inset(0 100% 0 0)}to{opacity:1;transform:none;clip-path:inset(0 0 0 0)}}
@keyframes rwup{from{opacity:0;transform:translateY(8px)}}
.l-tag{font-size:11.5px;font-weight:600;color:var(--sel);background:var(--sel-soft);border-radius:999px;padding:4px 10px}
.l-hero{margin-top:4px}
.l-hero h1{font-size:clamp(30px,2.7vw,40px);line-height:1.03;letter-spacing:-.045em;margin:0 0 10px;font-weight:700;text-wrap:balance}
.l-hero h1 em{font-style:normal;background:linear-gradient(90deg,var(--sel),#8A5CFF);-webkit-background-clip:text;background-clip:text;color:transparent}
.l-hero p{color:var(--muted);font-size:14.5px;line-height:1.5;margin:0;max-width:46ch}
.l-sec{display:grid;gap:10px}
.l-h{margin:0;font-size:12.5px;font-weight:600;color:var(--muted);letter-spacing:0;display:flex;align-items:center;gap:8px}
.l-h .cnt{font-family:var(--mono);font-size:11px;font-weight:500;color:var(--faint);background:var(--panel2);border-radius:999px;padding:1px 7px}
.l-h .cnt:empty{display:none}
.l-sect-h{display:flex;align-items:center;justify-content:space-between;gap:8px}
.l-continue{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);border:1px solid var(--line);border-radius:18px;overflow:hidden;background:var(--panel);cursor:pointer;box-shadow:var(--shadow);transition:transform .18s cubic-bezier(.2,.8,.2,1),box-shadow .18s,border-color .18s}
.l-continue:hover{transform:translateY(-2px);border-color:var(--line2);box-shadow:0 2px 4px rgba(14,17,22,.06),0 16px 36px rgba(14,17,22,.12)}
.l-continue .cv{aspect-ratio:16/10;background:var(--panel2);display:grid;place-items:center;overflow:hidden;min-height:0}
.l-continue .cv img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.l-continue:hover .cv img{transform:scale(1.03)}
.l-continue .cv svg{width:82%;height:82%}
.l-continue .ci{padding:16px 18px 16px;display:flex;flex-direction:column;gap:6px;min-width:0}
.l-continue .nm{font-size:16px;font-weight:650;letter-spacing:-.02em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.l-continue .st{font-size:12.5px;color:var(--ink);font-weight:500}
.l-continue .bar{display:block;height:5px;border-radius:3px;background:var(--panel3);overflow:hidden;margin:2px 0 1px}
.l-continue .bar i{display:block;height:100%;border-radius:3px;background:var(--sel)}
.l-continue .meta{font-size:11.5px;color:var(--muted)}
.l-continue .btn.go{margin-top:auto;align-self:flex-start;height:36px;border-radius:11px;padding:0 14px;background:var(--sel);border-color:var(--sel);color:var(--sel-ink);font-weight:600;gap:8px}
.l-continue .btn.go:hover{opacity:.92}
.l-entries{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.l-entry{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:10px;min-height:136px;border:1px solid var(--line);border-radius:16px;background:var(--panel);padding:14px 14px 13px;text-align:left;color:var(--ink);transition:transform .18s cubic-bezier(.2,.8,.2,1),box-shadow .18s,border-color .18s,background .18s}
.l-entry .ic{width:38px;height:38px;border-radius:11px;background:var(--panel2);display:grid;place-items:center;color:var(--ink);transition:background .18s,color .18s}
.l-entry .tx{display:grid;gap:4px;margin-top:2px}
.l-entry b{font-size:14px;font-weight:650;letter-spacing:-.015em}
.l-entry small{font-size:12px;color:var(--muted);line-height:1.4}
.l-entry .ar{position:absolute;top:14px;right:14px;color:var(--muted);opacity:0;transform:translateX(-4px);transition:opacity .18s,transform .18s}
.l-entry:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--line2)}
.l-entry:hover .ic{background:var(--sel-soft);color:var(--sel)}
.l-entry:hover .ar{opacity:1;transform:none}
.l-entry:active,.l-entry.pressed{transform:translateY(-1px) scale(.985)}
.l-entry.primary{background:var(--ink);border-color:var(--ink);color:var(--panel)}
.l-entry.primary small{color:color-mix(in srgb,var(--panel) 72%,transparent)}
.l-entry.primary .ic{background:color-mix(in srgb,var(--panel) 14%,transparent);color:var(--panel)}
.l-entry.primary:hover .ic{background:var(--sel);color:#fff}
.l-entry.primary .ar{color:var(--panel)}
.l-empty{grid-column:1/-1;border:1px dashed var(--line2);border-radius:14px;padding:16px;display:grid;gap:4px;color:var(--muted);font-size:12.5px;line-height:1.5}
.l-empty b{color:var(--ink);font-size:13px}
.pgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.pcard{position:relative;border:1px solid var(--line);border-radius:16px;background:var(--panel);overflow:hidden;text-align:left;padding:0;display:flex;flex-direction:column;cursor:pointer;transition:transform .18s cubic-bezier(.2,.8,.2,1),box-shadow .18s,border-color .18s}
.pcard:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:var(--line2)}
.pcard.pressed,.l-continue.pressed{transform:scale(.985)}
.pcard .pv{aspect-ratio:16/10;background:var(--panel2);display:grid;place-items:center;padding:12px;overflow:hidden}
.pcard .pv.img{padding:0}
.pcard .pv img{width:100%;height:100%;object-fit:cover;display:block}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .pcard .pv img,:root:not([data-theme="light"]) .l-continue .cv img{filter:brightness(.88) contrast(1.04)}}
:root[data-theme="dark"] .pcard .pv img,:root[data-theme="dark"] .l-continue .cv img{filter:brightness(.88) contrast(1.04)}
.pcard .pv svg{width:100%;height:100%}
.pcard .pi{padding:10px 12px 12px;display:grid;gap:3px}
.pcard .pi b{font-size:13.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pcard .pi small{font-size:11.5px;color:var(--muted)}
.pcard .pi small.ago{color:var(--muted);opacity:.92}
.pring{position:absolute;top:8px;left:8px;width:38px;height:38px;border-radius:50%;background:var(--glass);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:grid;place-items:center;box-shadow:var(--shadow)}
.pring .rt{fill:none;stroke:var(--panel3);stroke-width:3.2}
.pring .rf{fill:none;stroke:var(--sel);stroke-width:3.2;stroke-linecap:round}
.pring text{font:600 11.5px var(--mono);fill:var(--ink)}
.pring .rc{fill:none;stroke:var(--sel);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.pcard .pact{position:absolute;top:8px;right:8px;display:flex;gap:4px;opacity:0;transition:opacity .15s}
.pcard:hover .pact,.pcard:focus-within .pact{opacity:1}
.pcard .pact button{width:30px;height:30px;border-radius:9px;border:1px solid var(--line);background:var(--panel);display:grid;place-items:center;color:var(--muted)}
.pcard .pact button:hover{color:var(--ink)}
.l-preview{position:relative;pointer-events:none!important}
.l-preview .cap{position:absolute;left:24px;bottom:24px;pointer-events:auto}
.hero-cap{display:flex;align-items:center;gap:14px;background:var(--glass);-webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3);border:1px solid var(--line);border-radius:14px;padding:8px 10px 8px 14px;box-shadow:var(--shadow)}
.hero-now{display:grid;gap:1px;min-width:108px}
.hero-now span{font-size:10.5px;color:var(--muted);font-weight:500}
.hero-now b{font-size:13.5px;font-weight:650;letter-spacing:-.01em}
.hero-segs{display:flex;gap:4px}
.hero-segs button{border:0;background:transparent;padding:10px 2px;border-radius:6px;display:grid;cursor:pointer}
.hero-segs .tr{display:block;width:30px;height:4px;border-radius:2px;background:color-mix(in srgb,var(--ink) 16%,transparent);overflow:hidden}
.hero-segs .fl{display:block;height:100%;width:0;background:var(--ink);border-radius:2px;transition:width .2s linear}
.hero-segs button[aria-pressed="true"] .tr{background:color-mix(in srgb,var(--ink) 26%,transparent)}
.hero-segs button:hover .tr{background:color-mix(in srgb,var(--ink) 40%,transparent)}
.hero-segs span{display:none}
.hero-cap.rm .hero-segs{flex-wrap:wrap}
.hero-cap.rm .hero-segs button{padding:5px 10px;border:1px solid var(--line2);border-radius:999px;background:var(--panel);font-size:12px;font-weight:500}
.hero-cap.rm .hero-segs button[aria-pressed="true"]{background:var(--ink);color:var(--panel);border-color:var(--ink)}
.hero-cap.rm .hero-segs .tr{display:none}
.hero-cap.rm .hero-segs span{display:inline}
.tplgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:6px 0 0}
.tplgrid button{border:1.5px solid var(--line);border-radius:14px;background:var(--panel);padding:8px 8px 10px;text-align:left;display:grid;gap:3px;transition:border-color .15s,background .15s}
.tplgrid button:hover{border-color:var(--line2)}
.tplgrid button[aria-pressed="true"]{border-color:var(--sel);background:var(--sel-soft)}
.tplgrid .tv{aspect-ratio:4/3;border-radius:9px;background:var(--panel2);display:grid;place-items:center;padding:6px;margin-bottom:4px;color:var(--ink)}
.tplgrid button[aria-pressed="true"] .tv{background:var(--panel)}
.tplgrid .tv svg{width:100%;height:100%}
.tplgrid b{font-size:13px}
.tplgrid small{font-size:11.5px;color:var(--muted)}
.l-sub{font-size:11.5px;color:var(--faint)}
.exgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.excard{position:relative;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:16px;background:var(--panel);padding:0;overflow:hidden;text-align:left;color:var(--ink);min-width:0;transition:transform .18s cubic-bezier(.2,.8,.2,1),box-shadow .18s,border-color .18s}
.excard:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:var(--line2)}
.excard:active{transform:scale(.985)}
.excard .ev{position:relative;aspect-ratio:16/9;background:var(--panel2);color:var(--ink);overflow:hidden}
.excard .ev svg{position:absolute;inset:10px;width:calc(100% - 20px);height:calc(100% - 20px)}
.exsel .tv{position:relative;aspect-ratio:16/10;overflow:hidden}
.exsel .tv svg{position:absolute;inset:6px;width:calc(100% - 12px);height:calc(100% - 12px)}
.excard .ev.on svg,.exsel .tv.on svg{animation:exin .35s ease-out}
@keyframes exin{from{opacity:0}}
.excard .ei{display:grid;gap:3px;padding:10px 12px 12px;min-width:0}
.excard .ei b{font-size:13.5px;font-weight:600;letter-spacing:-.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.excard small,.exsel small{font-size:11.5px;color:var(--muted);display:flex;align-items:center;gap:6px;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.excard .dot,.exsel .dot{width:8px;height:8px;border-radius:50%;flex:none;box-shadow:0 0 0 2px var(--panel2)}
.np-mode{margin:12px 0 2px}
.np-mode button{height:32px;padding:0 14px}
.tplgrid.exsel{grid-template-columns:repeat(3,minmax(0,1fr))}
.tplgrid.exsel b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tplgrid[hidden]{display:none}
@media (prefers-reduced-motion:reduce){.excard,.excard:hover{transition:none;transform:none}.excard .ev.on svg,.exsel .tv.on svg{animation:none}}
.modal.np-modal{width:min(640px,100%)}
.modal.qz-modal{width:min(760px,100%);padding:20px 22px 18px}
.qz-head{display:flex;align-items:center;gap:12px;margin:-4px 0 10px}
.qz-step{font-size:12px;font-weight:600;color:var(--sel)}
.qz-prog{display:flex;gap:4px;flex:1}
.qz-prog i{flex:1;max-width:44px;height:4px;border-radius:2px;background:var(--panel3)}
.qz-prog i.on{background:var(--sel)}
.qz-x{width:32px;height:32px;padding:0;margin-left:auto}
.qz-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:4px}
.qz-opt{border:1.5px solid var(--line);border-radius:16px;background:var(--panel);padding:8px;text-align:left;display:grid;gap:8px;transition:transform .16s cubic-bezier(.2,.8,.2,1),border-color .16s,box-shadow .16s}
.qz-opt .im{display:block;aspect-ratio:3/2;border-radius:10px;overflow:hidden}
.qz-opt img{width:100%;height:100%;object-fit:cover;display:block}
.qz-grid.sofa .im{background:radial-gradient(90% 90% at 50% 40%,var(--panel) 0%,var(--panel2) 100%)}
.qz-grid.sofa img{object-fit:contain;padding:4px 10px}
.qz-opt b{font-size:13px;font-weight:600;padding:0 4px 3px}
.qz-opt:hover{border-color:var(--sel);transform:translateY(-2px);box-shadow:var(--shadow)}
.qz-opt[aria-pressed="true"]{border-color:var(--sel);box-shadow:0 0 0 3px var(--sel-soft)}
.qz-foot{justify-content:space-between;margin-top:14px;align-items:center}
.qz-res{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:20px;align-items:center;margin-top:4px}
.qz-res .mb{width:100%;border-radius:14px;display:block}
.qz-res h2{font-size:24px!important;letter-spacing:-.03em!important;margin:0 0 8px!important}
.qz-pal{display:flex;gap:6px}
.qz-pal i{width:28px;height:28px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.choice{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:6px 0 14px}
.choice button{border:1.5px solid var(--line);border-radius:14px;background:var(--panel);padding:14px;text-align:left;display:grid;gap:6px}
.choice button[aria-pressed="true"]{border-color:var(--sel);background:var(--sel-soft)}
.choice b{font-size:13.5px}
.choice small{color:var(--muted);font-size:12px;line-height:1.4}
@media (max-width:1560px){.stepper .t{display:none}.stepper button[aria-current="step"] .t{display:inline}.stepper button{padding:0 6px}.stepper button[aria-current="step"]{padding:0 11px 0 6px}.proj input{width:180px}.save{font-size:0;gap:0}}
@media (max-width:860px){
  .stepper{margin:0;flex:none}
  .proj input{min-width:56px}
  .stepper button{padding:0 5px}
  .stepper button:not([aria-current="step"]){display:none}
  .stepper button[aria-current="step"] .t{display:none}
  .stepnav{bottom:0}
  .stepnav .lbl{display:none}
  .stepnav .long{display:none}
  .stepnav .short{display:inline}
  .stepnav .lbl-s{display:inline-block}
  .stepnav{gap:6px;max-width:calc(100vw - var(--g) * 2)}
  .hud.br{display:none!important}
  .toast{bottom:calc(var(--g) + 148px)}
  .landing{display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden;pointer-events:auto;overscroll-behavior:contain}
  .l-preview{order:0;flex:none;height:38vh;min-height:230px;pointer-events:auto!important}
  .l-main{order:1;flex:none}
  .l-preview .cap{left:16px;bottom:30px}
  .hero-cap{padding:7px 8px 7px 12px;gap:10px}
  .hero-now{min-width:0}
  .hero-segs .tr{width:22px}
  .l-main{position:relative;padding:22px 16px 34px;border-right:0;border-radius:22px 22px 0 0;min-height:62vh;overflow:visible;gap:20px;margin-top:-14px;box-shadow:0 -12px 32px rgba(8,10,14,.16)}
  .l-main::before{content:"";position:absolute;top:8px;left:50%;width:36px;height:4px;margin-left:-18px;border-radius:2px;background:var(--line2)}
  .l-hero h1{font-size:30px}
  .l-hero p{font-size:14px}
  .l-logo .rwmark{height:44px}
  .l-logo .rwword{height:14px}
  .l-points{margin-top:12px;gap:7px}
  .l-points small{display:none}
  .l-points li{align-items:center}
  .l-points .pi{width:26px;height:26px;border-radius:8px}
  .l-points b{margin:0}
  .l-continue{grid-template-columns:120px minmax(0,1fr);border-radius:16px}
  .l-continue .cv{aspect-ratio:auto;height:100%}
  .l-continue .ci{padding:12px 14px}
  .l-continue .nm{font-size:15px}
  .l-continue .btn.go{width:100%;justify-content:center;margin-top:6px}
  .l-entries{grid-template-columns:1fr;gap:8px}
  .l-entry{min-height:68px;flex-direction:row;align-items:center;gap:12px;padding:12px 14px}
  .l-entry .tx{margin:0}
  .l-entry .ar{position:static;opacity:1;transform:none;margin-left:auto}
  .l-quiz .go{display:none}
  .pgrid{grid-template-columns:1fr;gap:10px}
  .pcard{flex-direction:row;align-items:stretch;min-height:92px}
  .pcard .pv{width:132px;flex:none;aspect-ratio:auto;padding:8px}
  .pcard .pv.img{padding:0}
  .pcard .pi{padding:12px 12px 12px 14px;align-content:center;min-width:0}
  .pring{top:auto;bottom:6px;left:6px;width:32px;height:32px}
  .pring svg{width:28px;height:28px}
  .pcard .pact{opacity:1;top:8px;right:8px}
  .pcard .pi{padding-right:78px}
  .pcard .pact button{width:28px;height:28px}
  .tplgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tplgrid.exsel{grid-template-columns:repeat(2,minmax(0,1fr))}
  .exgrid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:10px;margin:0 -16px;padding:2px 16px 6px;scroll-padding:0 16px;scrollbar-width:none;overscroll-behavior-x:contain}
  .exgrid::-webkit-scrollbar{display:none}
  .excard{flex:0 0 68%;max-width:270px;scroll-snap-align:start}
  .l-sub{display:none}
  .qz-grid{gap:8px}
  .qz-opt{padding:6px;border-radius:14px}
  .qz-opt b{font-size:12px}
  .qz-res{grid-template-columns:1fr;gap:12px}
  .modal.qz-modal{padding:16px}
}
@media (min-width:600px) and (max-width:860px){
  .stepnav .long{display:inline}
  .stepnav .short{display:none}
  .stepper button[aria-current="step"] .t{display:inline}
  .stepper button[aria-current="step"]{padding:0 11px 0 6px}
  .stepnav .lbl-s{display:none}
  .stepnav .lbl{display:inline}
}

.wpgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.wp{display:grid;gap:4px;border:0;background:transparent;padding:0;text-align:left;min-width:0}
.wp .sq{aspect-ratio:1;border-radius:10px;border:1px solid var(--line);background-size:cover;background-position:center;transition:box-shadow .15s,border-color .15s}
.wp:hover .sq{border-color:var(--sel)}
.wp[aria-pressed="true"] .sq{border-color:var(--sel);box-shadow:0 0 0 3px var(--sel-soft)}
.wp small{font-size:11px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wp.add .sq{display:grid;place-items:center;border-style:dashed;background:var(--panel2);font-size:20px;color:var(--muted)}
.we{border:1.5px solid var(--sel);box-shadow:0 0 0 4px var(--sel-soft)}
.we .prev{height:70px;border-radius:10px;border:1px solid var(--line)}
.tilepv{width:100%;height:120px;border-radius:10px;border:1px solid var(--line);background-color:var(--panel2);background-repeat:repeat}
/* Boden-Auswahl */
.fpick{display:grid;gap:12px}
.fpick h3{margin:0}
.fhead{display:flex;align-items:center;gap:10px;padding:8px;border:1px solid var(--line);border-radius:12px;background:var(--panel)}
.fhead .fsw{width:48px;height:48px;border-radius:9px;flex:none;object-fit:cover;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.fhead .grow{display:grid;gap:2px;min-width:0;flex:1}
.fhead b{font-size:13px;font-weight:600;line-height:1.3;overflow:hidden;text-overflow:ellipsis}
.fhead small{font-size:11.5px;color:var(--muted)}
.fcats{gap:5px}
.fcats .pill{padding:4px 10px;font-size:12px}
.fgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.fgrid.fgrid-s{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.ftile{display:grid;gap:5px;border:0;background:transparent;padding:0;text-align:left;min-width:0;cursor:pointer;color:inherit}
.ftile img,.ftile .sq{width:100%;aspect-ratio:1;border-radius:12px;border:1px solid var(--line);display:block;object-fit:cover;background:var(--panel2);transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease}
.ftile:hover img,.ftile:hover .sq{transform:translateY(-2px);box-shadow:var(--shadow)}
.ftile:focus-visible{outline:none}
.ftile:focus-visible img{outline:2px solid var(--sel);outline-offset:2px}
.ftile[aria-pressed="true"] img{border-color:var(--sel);box-shadow:0 0 0 3px var(--sel-soft)}
.ftile small{font-size:11px;line-height:1.25;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ftile[aria-pressed="true"] small{color:var(--ink);font-weight:600}
.ftile.add .sq{display:grid;place-items:center;border-style:dashed;font-size:22px;color:var(--muted)}
.fopt{display:grid;gap:6px}
.fseg{display:flex;width:100%}
.fseg button{flex:1;padding:0 6px}
.fdet summary{cursor:pointer;font-size:12.5px;color:var(--muted);font-weight:500}
.fdet summary:hover{color:var(--ink)}
.fpick input[data-flgroutin]{width:24px;height:24px;border-radius:50%;padding:0;border:1px dashed var(--line2);background:transparent;cursor:pointer;overflow:hidden}
.fpick input[data-flgroutin]::-webkit-color-swatch-wrapper{padding:2px}
.fpick input[data-flgroutin]::-webkit-color-swatch{border:0;border-radius:50%}
.fall{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;padding-top:10px;border-top:1px solid var(--line)}
.fall .check{display:flex;gap:6px;align-items:center;color:var(--muted)}
@media (max-width:860px){.fgrid.fgrid-s{grid-template-columns:repeat(4,minmax(0,1fr))}.fseg button{min-height:40px}}
/* Wände: Farbfamilien, Swatch-Raster, Editor, Legende */
.plegend{position:absolute;left:0;bottom:60px;display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center;padding:6px 10px;border-radius:10px;background:var(--glass);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid var(--line);box-shadow:var(--shadow);font-size:11.5px;color:var(--muted);pointer-events:none;max-width:60%}
.plegend[hidden]{display:none}
.plegend .lg{display:inline-flex;gap:5px;align-items:center;white-space:nowrap}
.plegend svg{color:var(--ink);opacity:.75}
.fam-pills{gap:5px}
.fam-pills .pill{padding:4px 10px;font-size:12px;display:inline-flex;gap:6px;align-items:center}
.fam-pills .pill i{width:9px;height:9px;border-radius:50%;box-shadow:0 0 0 1px rgba(127,127,127,.45);display:inline-block}
.pgrid-sw{display:grid;grid-template-columns:repeat(9,minmax(0,28px));gap:6px 5px;justify-content:space-between}
.pgrid-sw .sw{width:100%;height:auto;aspect-ratio:1;max-width:28px}
.pgrid-sw .sw.acc{position:relative}
.wecur{display:flex;align-items:center;gap:10px;min-width:0}
.wecur .sw{width:30px;height:30px;flex:none;cursor:default}
.wecur .sw:hover{transform:none}
.wecur b{font-size:13px;font-weight:600;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wecur small{font-size:11.5px;color:var(--muted)}
.wecustom{display:flex;gap:8px;align-items:center}
.wecustom input[type=text]{flex:1;min-width:0;height:34px;border:1px solid transparent;background:var(--panel2);border-radius:8px;padding:0 10px}
.wecustom input[type=text]:focus{border-color:var(--sel);outline:none;background:var(--panel)}
.wecustom input[type=color]{width:40px;height:34px;border:0;background:var(--panel2);border-radius:8px;padding:3px;flex:none;cursor:pointer}
.we-err{color:var(--danger);font-size:11.5px;margin:-4px 0 0}
.cwgrid{display:flex;flex-wrap:wrap;gap:8px}
.cw{border:1px solid var(--line);background:var(--panel);border-radius:10px;padding:3px 8px 3px 3px;display:inline-flex;gap:6px;align-items:center;font-size:11.5px;color:var(--muted);cursor:pointer}
.cw i{width:22px;height:22px;border-radius:7px;display:inline-block;box-shadow:inset 0 0 0 1px rgba(0,0,0,.1)}
.cw:hover{border-color:var(--line2);color:var(--ink)}
.cw[aria-pressed="true"]{border-color:var(--sel);box-shadow:0 0 0 3px var(--sel-soft);color:var(--ink)}
details.more{border-top:1px solid var(--line);padding-top:10px}
details.more>summary{cursor:pointer;font-size:12.5px;font-weight:600;color:var(--ink);list-style:none;display:flex;align-items:center;justify-content:space-between;gap:8px}
details.more>summary::-webkit-details-marker{display:none}
details.more>summary::after{content:"";width:7px;height:7px;border-right:1.6px solid var(--muted);border-bottom:1.6px solid var(--muted);transform:rotate(45deg);margin-right:4px;transition:transform .15s}
details.more[open]>summary::after{transform:rotate(-135deg)}
details.more>summary small{font-weight:400;color:var(--muted);margin-left:auto}
details.more .mbody{display:grid;gap:10px;margin-top:10px}
.rng{display:grid;gap:4px}
.rng .rl{display:flex;justify-content:space-between;font-size:11.5px;color:var(--muted)}
.rng input[type=range]{width:100%;accent-color:var(--sel);height:22px}
.acchips{display:flex;flex-wrap:wrap;gap:6px}
.acchips .pill{font-size:12px;padding:4px 10px}
.acchips .pill .dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--sel);margin-left:6px;vertical-align:1px}
.wallcard .tag{font-size:10.5px;color:var(--sel);font-weight:600}
@media (max-width:860px){.pgrid-sw{grid-template-columns:repeat(8,minmax(0,1fr));gap:8px}.pgrid-sw .sw{width:100%;height:auto;aspect-ratio:1}.plegend{max-width:calc(100% - 8px);bottom:64px;font-size:11px;padding:5px 8px}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}.l-entry:hover,.l-entry:active,.pcard:hover,.pcard.pressed,.l-continue:hover,.l-continue.pressed,.l-quiz:hover,.qz-opt:hover,.landing.leaving,.l-continue:hover .cv img{transform:none!important}}
#projName{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;min-width:0}
/* Touch-Ziele (Mobil und Touch-Geräte): mindestens 40 px hoch */
@media (pointer:coarse){.pill,.tabs button,.iconbtn,#importBtn{min-height:40px}.iconbtn{min-width:40px}.topbar .seg button{min-height:40px}}
@media (max-width:860px){
  .pill,.tabs button,.iconbtn,#importBtn{min-height:40px}
  .tabs button{height:40px}
  .iconbtn{min-width:36px;width:36px;height:40px}
  .topbar .seg button{min-height:40px;padding:0 8px}
  #homeBtn{min-width:36px;min-height:40px;justify-content:center}
  #redoBtn{display:none}
  .topbar .proj{flex:1 1 0;min-width:72px}
  .proj input,#projName{min-width:72px}
}
/* ---------- Vollbild & Leisten ein-/ausblenden ---------- */
.fsicon .i-out{display:none}
#fsBtn[aria-pressed="true"] .fsicon .i-in{display:none}
#fsBtn[aria-pressed="true"] .fsicon .i-out{display:inline}
.app .topbar,.app .tools,.app .stepnav{transition:opacity .22s cubic-bezier(.2,.8,.2,1),transform .22s cubic-bezier(.2,.8,.2,1)}
.app .panel{transition:transform .22s cubic-bezier(.2,.8,.2,1),opacity .2s}
.app:not(.home).chrome-off .topbar,.app:not(.home).chrome-off .tools,.app:not(.home).chrome-off .panel,.app:not(.home).chrome-off .stepnav{opacity:0;pointer-events:none;visibility:hidden;transition:opacity .22s cubic-bezier(.2,.8,.2,1),transform .22s cubic-bezier(.2,.8,.2,1),visibility 0s linear .22s}
.app:not(.home).chrome-off .topbar{transform:translateY(-14px)}
.app:not(.home).chrome-off .tools,.app:not(.home).chrome-off .left{transform:translateX(-18px)}
.app:not(.home).chrome-off .right{transform:translateX(18px)}
.app:not(.home).chrome-off .stepnav{transform:translate(-50%,14px)}
.app:not(.home).chrome-off #hudZone{top:var(--g);left:var(--g);right:var(--g);bottom:var(--g)}
.app:not(.home).chrome-off .hud.tr:not(.tourpos){right:52px}
.app:not(.home).chrome-off .hud.tl{padding-right:52px}
.app:not(.home).chrome-off .minimap,.app:not(.home).chrome-off .hud.nav,.app:not(.home).chrome-off .hud.br{bottom:0}
.app:not(.home).chrome-off .roomview{bottom:138px}
.app:not(.home).chrome-off .hud.tr.tourpos{bottom:0}
#hudZone{transition:left .25s,right .25s,top .22s,bottom .22s}
.chromerestore{position:absolute;top:var(--g);right:var(--g);z-index:12;display:none;align-items:center;gap:0;height:36px;min-width:36px;padding:0 9px;border-radius:11px;border:1px solid var(--line);background:color-mix(in srgb,var(--panel) 72%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:var(--shadow);color:var(--muted);font-weight:600;font-size:12.5px;white-space:nowrap;opacity:0;transition:opacity .22s,color .15s,background .15s}
.chromerestore svg{flex:none}
.chromerestore span{display:inline-block;max-width:0;overflow:hidden;opacity:0;transition:max-width .22s cubic-bezier(.2,.8,.2,1),opacity .18s,margin .22s}
.chromerestore:hover,.chromerestore:focus-visible{color:var(--ink);background:var(--panel)}
.chromerestore:hover span,.chromerestore:focus-visible span{max-width:140px;opacity:1;margin-left:7px}
.app:not(.home).chrome-off .chromerestore{display:inline-flex;opacity:1;animation:tin .22s ease-out}
@media (max-width:860px){
  .chromerestore{height:44px;min-width:44px;justify-content:center;padding:0}
  .chromerestore:hover span,.chromerestore:focus-visible span{max-width:0;opacity:0;margin:0}
  .app:not(.home).chrome-off .tools{transform:translateY(18px)}
  .app:not(.home).chrome-off .left,.app:not(.home).chrome-off .right{transform:translateY(calc(100% + 160px))}
  .app:not(.home).chrome-off #hudZone{top:var(--g);bottom:var(--g)}
  .app:not(.home).chrome-off .hud.tl{padding-right:52px}
  .app:not(.home).chrome-off .hud.tr:not(.tourpos){right:52px;flex-wrap:wrap}
  .app:not(.home).chrome-off .minimap,.app:not(.home).chrome-off .hud.nav,.app:not(.home).chrome-off .joy{bottom:0}
  .app:not(.home).chrome-off .roomview{bottom:100px}
  .app:not(.home).chrome-off .hud.tr.tourpos{bottom:110px}
}
.seg .seglab{align-self:center;font-size:11px;font-weight:600;color:var(--muted);padding:0 6px 0 8px;white-space:nowrap}
@media (max-width:520px){.seg .seglab{display:none}}
/* Tablet: Startseite mehrspaltig statt Handy-Liste */
@media (min-width:600px) and (max-width:860px){
  .l-entries{grid-template-columns:repeat(3,minmax(0,1fr))}
  .l-entry{flex-direction:column;align-items:flex-start;min-height:128px}
  .l-points small{display:block}
  .l-points li{align-items:flex-start}
  .l-hero h1{font-size:36px}
  .l-top{justify-content:flex-start;gap:16px}
}
/* Schritt 3: Bibliothek links */
.s3lib{display:grid;gap:10px;margin-bottom:6px}
.s3tabs{display:flex}.s3tabs button{flex:1}
.s3target{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:11px;background:var(--sel-soft)}
.s3target{flex-wrap:wrap}.s3target b{flex:1 1 120px;min-width:0;font-size:13px;line-height:1.3}
.s3hint{margin:0;line-height:1.45}.s3rooms{display:flex;flex-wrap:wrap;gap:6px}
.s3lib .sect:first-of-type{margin-top:0}
.welib .seg.fseg{margin-bottom:8px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.s3lib .pgrid-sw{grid-template-columns:repeat(auto-fill,minmax(26px,1fr));gap:6px}.s3lib .pgrid-sw .sw{width:100%;height:auto;aspect-ratio:1}
.s3lib,.s3lib>*{min-width:0;max-width:100%}.s3lib .fgrid{grid-template-columns:repeat(3,minmax(0,1fr))}.s3lib .fgrid.fgrid-s{grid-template-columns:repeat(3,minmax(0,1fr))}.s3tabs button{min-width:0}.s3lib .fam-pills{flex-wrap:wrap}
/* Startseite kompakt (Runde 8): Nutzen als Chips, niedrige Einstiege, Beispiele als eine Karussell-Zeile */
.l-points{display:flex;flex-wrap:wrap;gap:6px;margin:14px 0 0;max-width:none}
.l-points li{display:inline-flex;align-items:center;gap:7px;padding:3px 11px 3px 3px;border-radius:999px;background:var(--panel2)}
.l-points .pi{width:24px;height:24px;border-radius:999px}.l-points .pi svg{width:14px;height:14px}
.l-points b{font-size:12.5px;font-weight:600;margin:0}
.has-proj .l-points{display:none}
.l-hero h1{margin-bottom:0}
.l-entry{min-height:104px;gap:8px;padding:12px 12px 11px}
.l-entry .ic{width:32px;height:32px;border-radius:10px}
.l-entry small{font-size:11.5px}
.exgrid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:10px;margin:0 -40px;padding:2px 40px 8px;scroll-padding:0 40px;scrollbar-width:thin;overscroll-behavior-x:contain}
.excard{flex:0 0 172px;scroll-snap-align:start}
.excard .ev{aspect-ratio:16/10}
.excard.exsimple .ev{display:grid;place-items:center;padding:8px;background:var(--panel2)}.excard.exsimple .ev svg{width:100%;height:100%}
@media (max-width:860px){.l-points{display:none}.excard{flex:0 0 46%;max-width:200px}.exgrid{margin:0 -16px;padding:2px 16px 6px;scroll-padding:0 16px}.l-entry{min-height:56px}}
@media (min-width:861px){#tools .t-mob{display:none}}
#rightPanel .tabs [hidden]{display:none!important}
/* Runde 15 (E): Bearbeitungsbereich rechts kurz hervorheben, Hinweis „Neuer Raum“ */
@keyframes rwFlash{0%{box-shadow:inset 0 0 0 0 transparent}18%{box-shadow:inset 0 0 0 2px var(--sel)}100%{box-shadow:inset 0 0 0 0 transparent}}
#rightPanel.flash{animation:rwFlash 1.4s ease-out 1}
@keyframes rwFieldFlash{0%,100%{background:transparent}25%{background:var(--sel-soft)}}
#rightBody .flashf{animation:rwFieldFlash 1.6s ease-out 1;border-radius:10px}
.editfocus{display:flex;gap:8px;align-items:flex-start;margin:0 0 12px;padding:9px 11px;border-radius:10px;background:var(--sel-soft);color:var(--ink);font-size:12.5px;line-height:1.45;border-left:3px solid var(--sel)}
.editfocus b{font-weight:600}
.autoarea{font-weight:400;color:var(--sel);margin-left:4px}
.autoarea b{font-weight:600}
.next .miss{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;margin-left:6px;border-radius:999px;background:#D98A1F;color:#fff;font-size:11px;font-weight:700}
/* 3D-Ansicht (Runde 11): Kamera + Licht + „Ansicht“-Popover */
.hud.tl{position:absolute}
.hudmore{display:inline-flex!important;align-items:center;gap:7px;width:auto!important;height:36px!important;padding:0 12px 0 10px!important;font-weight:600;font-size:12.5px;color:var(--ink)!important;position:relative}
.hudmore.dot::after{content:"";position:absolute;top:5px;right:5px;width:7px;height:7px;border-radius:50%;background:var(--sel)}
.hud .seg .sm{display:none}
.viewpop{position:absolute;top:44px;left:0;z-index:15;width:290px;display:grid;gap:12px;padding:12px 14px 14px;border-radius:14px;border:1px solid var(--line);background:var(--panel);box-shadow:var(--shadow-lg);animation:tin .16s ease-out}
.viewpop[hidden]{display:none}
.viewpop .vhead{display:flex;align-items:center;justify-content:space-between}
.viewpop .vhead b{font-size:13.5px}
.viewpop .vclose{width:28px;height:28px}
.viewpop h5{margin:0 0 6px;font-size:11px;font-weight:600;color:var(--muted);text-transform:none}
.viewpop .seg{display:flex;width:100%;box-shadow:none;background:var(--panel2)}
.viewpop .seg button{flex:1;padding:0 6px;white-space:nowrap}
.viewpop .vnote{display:block;margin-top:5px;font-size:11px;color:var(--muted)}
@media (max-width:860px){
  .hud .seg .lg{display:none}.hud .seg .sm{display:inline}
  .hudmore span{display:none}.hudmore{padding:0 10px!important;height:40px!important}
  .viewpop{position:fixed;left:8px;right:8px;top:auto;bottom:calc(80px + env(safe-area-inset-bottom,0px));width:auto;z-index:60;border-radius:18px;max-height:calc(100dvh - 190px);overflow:auto}
  .viewpop .seg button{min-height:40px}
}
/* Seitenleisten einheitlich (Runde 11): Bibliothek links, Eigenschaften rechts */
.ptitle{display:grid;gap:1px;min-width:0}.ptitle small{font-size:11.5px;color:var(--muted)}
.rhead{padding-bottom:0}
.edgetab{position:absolute;top:max(50%, 380px);z-index:6;display:none;flex-direction:column;align-items:center;gap:8px;padding:12px 6px;border:1px solid var(--line);background:var(--glass);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:var(--shadow);color:var(--muted);font-size:11.5px;font-weight:600;transform:translateY(-50%)}
.edgetab span{writing-mode:vertical-rl}
.edgetab:hover{color:var(--ink);background:var(--panel)}
.edgetab.l{left:0;border-radius:0 12px 12px 0;border-left:0}
.edgetab.r{right:0;border-radius:12px 0 0 12px;border-right:0}
.edgetab.l span{transform:rotate(180deg)}
.app.lc:not(.home):not(.chrome-off) .edgetab.l,.app.rc:not(.home):not(.chrome-off) .edgetab.r{display:flex}
@media (max-width:860px){.edgetab,.desk-only{display:none!important}.rhead{padding-top:6px}.rhead h2{font-size:13px}}
@media (min-width:861px){#tools .mob-only{display:none}}
/* Runde 11b: Modus „Einfach | Profi“ – reine Darstellung (data-mode am .app) */
.seg.mode{flex:none}
.seg.mode button{padding:0 10px;height:26px;font-size:12px}
.seg.mode button[aria-pressed="true"]{color:var(--sel)}
.rhead .seg.mode{margin-left:auto}
.menu .mhead{padding:6px 10px 8px;display:grid;gap:6px;border-bottom:1px solid var(--line);margin-bottom:4px}
.menu .mhead>span{font-size:11.5px;color:var(--muted);font-weight:500}
.menu .mhead .seg{display:flex}
.menu .mhead .seg button{flex:1;text-align:center;padding:0 10px;border-radius:8px}
.menu .mhead .seg button:hover{background:transparent;color:var(--ink)}
.menu .mhead .seg button[aria-pressed="true"]:hover{background:var(--panel)}
.mdot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--sel);flex:none;box-shadow:0 0 0 3px var(--sel-soft)}
details.more.xm{margin-top:14px}
details.more.xm>summary{justify-content:flex-start;min-height:28px;white-space:nowrap}
.app[data-mode="simple"] .welib>.seg.fseg:first-child{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:520px){.leafseg{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))}}
details.more.xm{min-width:0}
details.more.xm>summary small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:1 1 0;width:0;text-align:right}
details.more.xm .mbody{gap:4px}
details.more.xm .mbody>.sect:first-child{border-top:0;margin-top:0;padding-top:0}
.quick{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.quick button{border:1px solid var(--line2);background:var(--panel);color:var(--ink);border-radius:10px;padding:7px 4px;display:grid;gap:1px;text-align:center;cursor:pointer}
.quick button:hover{border-color:var(--muted)}
.quick button b{font-size:12.5px;font-weight:600}
.quick button small{font-family:var(--mono);font-size:10.5px;color:var(--faint)}
.quick button[aria-pressed="true"]{border-color:var(--sel);background:var(--sel-soft)}
.qhead{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px}
.qhead .linkbtn{color:var(--sel);text-decoration:none;font-size:12px;font-weight:500}
.qhead .linkbtn:hover{text-decoration:underline}
.selhead{display:flex;align-items:center;gap:10px;margin-bottom:12px;min-width:0}
.selhead .ic{width:34px;height:34px;border-radius:10px;background:var(--panel2);display:grid;place-items:center;flex:none;color:var(--ink)}
.selhead .ic .sw{width:22px;height:22px;cursor:default}
.selhead>span:last-child{min-width:0}
.selhead b{display:block;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.selhead small{color:var(--muted);font-size:12px}
.explain{font-size:12px;color:var(--muted);line-height:1.5;margin:6px 0 0}
.choice{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
.choice button{border:1.5px solid var(--line2);background:var(--panel);color:var(--ink);border-radius:14px;padding:14px;text-align:left;display:grid;gap:8px;align-content:start;cursor:pointer}
.choice button[aria-pressed="true"]{border-color:var(--sel);background:var(--sel-soft)}
.choice b{font-size:14.5px;display:flex;align-items:center;gap:8px}
.choice .tagr{font-size:10.5px;font-weight:600;color:var(--sel);background:var(--panel);border:1px solid var(--sel);border-radius:999px;padding:1px 7px}
.choice p{margin:0;font-size:12.5px;color:var(--muted);line-height:1.45}
.choice ul{margin:0;padding-left:16px;font-size:12px;color:var(--muted);line-height:1.5}
.choice .mini{height:56px;border-radius:10px;background:var(--panel2);padding:8px;display:grid;gap:5px;align-content:start}
.choice .mini i{display:block;height:7px;border-radius:4px;background:var(--line2)}
.mfoot{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.mfoot .note{font-size:12px;color:var(--faint);flex:1;min-width:180px}
.app[data-mode="simple"] #planLegend,.app[data-mode="simple"] #importBtn{display:none!important}
.app[data-mode="simple"] #catalog .cat-item small{display:none}
.app[data-mode="simple"] .pro-only,.app:not([data-mode="simple"]) .simple-only{display:none!important}
@media (max-width:860px){.choice{grid-template-columns:1fr}.choice .mini{display:none}.seg.mode button{height:32px}.rhead .seg.mode{margin-right:2px}}
@media (pointer:coarse){.seg.mode button{min-height:36px}.quick button{min-height:44px}}
/* Runde 12 (Kai): Modi & Menüs – Modus in der Kopfleiste, ⋯-Menü gruppiert, rechte Leiste nur Reiter, Einkaufsliste als Dialog, Kontextleiste */
.topbar .seg.mode.top button{height:28px}
@media (max-width:599px){.topbar .seg.mode.top{display:none}}
#projMenu{max-height:calc(100dvh - 90px);overflow:auto;overscroll-behavior:contain}
.menu .m-mode{display:none}
@media (max-width:599px){.menu .m-mode{display:grid}}
.menu .mgrp{font-size:11px;font-weight:600;color:var(--faint);padding:8px 10px 2px;border-top:1px solid var(--line);margin-top:4px}
.menu .mgrp.first{border-top:0;margin-top:0;padding-top:4px}
.menu .mdanger{color:var(--danger);border-top:1px solid var(--line)!important;border-radius:0 0 8px 8px;margin-top:4px}
button.save{border:0;background:transparent;padding:4px 6px;border-radius:8px;cursor:pointer;font:inherit;font-size:12px;color:var(--faint)}
button.save:hover{background:var(--panel2);color:var(--ink)}
button.save.dirty{color:var(--ink);font-weight:600}
button.save.dirty::before{background:#D98A1F}
.rhead{align-items:center}
.rhead .rtitle{font-size:14px;margin:0;flex:1}
.rhead .tabs{margin:0;flex:1}
.rhead.has-tabs .rtitle,.rhead:not(.has-tabs) .tabs{display:none}
.shopdlg{width:min(760px,100%)}
.modal .shophead{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.modal .shophead h2{margin:0}
.done-dlg .done-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.done-dlg .done-grid .btn{height:auto;min-height:44px;white-space:normal;justify-content:center;text-align:center}
@media (max-width:480px){.done-dlg .done-grid{grid-template-columns:1fr}}
.shopdlg table.shop td.num{white-space:nowrap}
.aidlg{width:min(460px,100%)}
.aidlg .field select{width:100%}
.kiwide{width:100%;height:40px;margin:0 0 12px}
.kioff{font-size:12px;color:var(--muted);margin:-6px 0 12px;line-height:1.45}
.cat-grid.big{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 10px}
.cat-grid.big .cat-item b{white-space:normal;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;line-height:1.3;font-size:13px}
.catall{display:block;width:100%;margin:16px 0 6px;height:40px}
.catback{margin:0 0 10px}
.roomtpl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:12px}
.roomtpl button{display:grid;gap:2px;border:1px solid var(--line);background:var(--panel);border-radius:12px;padding:10px 12px;text-align:left}
.roomtpl button:hover{border-color:var(--sel);background:var(--sel-soft)}
.roomtpl b{font-size:13px;font-weight:600}
.roomtpl small{font-size:11.5px;color:var(--muted);font-family:var(--mono)}
details.ownsize>summary{cursor:pointer;font-size:12.5px;font-weight:600;padding:6px 0;list-style:none}
details.ownsize>summary::before{content:"▸ ";color:var(--muted)}
details.ownsize[open]>summary::before{content:"▾ "}
.palbig{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.palbig .palette{flex-direction:column;align-items:flex-start;padding:12px;gap:8px}
.palbig .palette .dots i{width:28px;height:28px}
.app.notools #tools{display:none}
@media (min-width:861px){.app.notools .left{left:var(--g)}.app.notools #hudZone{left:calc(var(--g) * 2 + var(--lw))}.app.notools.lc #hudZone{left:var(--g)}}
@media (max-width:860px){.app.notools #tools{display:flex}}
.ctxbar{position:absolute;z-index:6;display:flex;align-items:center;gap:2px;padding:4px;border-radius:12px;background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow-lg);pointer-events:auto;white-space:nowrap}
.ctxbar[hidden]{display:none}
.ctxbar button{display:inline-flex;align-items:center;gap:6px;height:34px;min-width:34px;padding:0 9px;border:0;border-radius:9px;background:transparent;color:var(--ink);font-size:12.5px;font-weight:500}
.ctxbar button:hover{background:var(--panel2)}
.ctxbar button.danger{color:var(--danger)}
.ctxbar .cswatch{width:18px;height:18px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.18)}
.ctxbar .csep{width:1px;height:20px;background:var(--line);margin:0 2px}
.ctxbar .ccolors{position:absolute;left:0;top:calc(100% + 6px);display:grid;grid-template-columns:repeat(8,24px);gap:6px;padding:8px;border-radius:12px;background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow-lg)}
.ctxbar.below .ccolors{top:auto;bottom:calc(100% + 6px)}
.ctxbar .ccolors button{width:24px;height:24px;min-width:0;padding:0;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.18)}
.ctxbar .ccolors button[aria-pressed="true"]{outline:2px solid var(--sel);outline-offset:2px}
@media (pointer:coarse),(max-width:860px){.ctxbar button{height:44px;min-width:44px}.ctxbar .ctxl{display:none}}
.chip.hint .tooldone{margin-left:4px}
/* Runde 12 (Lina): Gestaltung – Modussignal, Touch-Ziele, Mobil-Kopf, Menü-Fade, Katalog-/Beispielnamen, Einkaufsliste, Dunkelmodus, Licht-Hinweise */
:root{--mode:var(--sel);--mode-soft:var(--sel-soft);--mode-ink:var(--sel-ink)}
.app[data-mode="pro"]{--mode:var(--pro);--mode-soft:var(--pro-soft);--mode-ink:var(--pro-ink)}
/* G1 Modussegment: aktives Segment in der Modusfarbe gefüllt (Einfach Blau, Profi Violett) – überall (Kopfleiste, ⋯-Menü, Dialoge) */
.seg.mode button{font-weight:500}
.seg.mode button[data-setmode="simple"][aria-pressed="true"]{background:var(--sel);color:var(--sel-ink);font-weight:600;box-shadow:0 1px 2px rgba(0,0,0,.14)}
.seg.mode button[data-setmode="pro"][aria-pressed="true"]{background:var(--pro);color:var(--pro-ink);font-weight:600;box-shadow:0 1px 2px rgba(0,0,0,.14)}
.seg.mode button[aria-pressed="false"]:hover{color:var(--ink)}
.menu .mhead .seg button[data-setmode="simple"][aria-pressed="true"]:hover{background:var(--sel)}
.menu .mhead .seg button[data-setmode="pro"][aria-pressed="true"]:hover{background:var(--pro)}
/* Kante in der Modusfarbe unter der Kopfleiste (auch mobil) */
.app:not(.home) .topbar::after{content:"";position:absolute;left:16px;right:16px;bottom:-1px;height:3px;border-radius:3px 3px 0 0;background:var(--mode);pointer-events:none;transition:background .2s}
/* Handy: Modus-Chip rechts in der unteren Leiste (die Kopfleiste ist dort voll); Tippen wechselt */
.modechip{display:none}
@media (max-width:599px){
  .tools .modechip{display:inline-flex;align-items:center;gap:6px;margin-left:auto;position:sticky;right:0;flex:none;align-self:center;height:40px;padding:0 12px 0 10px;border-radius:999px;border:1px solid var(--mode);background:var(--mode-soft);color:var(--ink);font-size:12.5px;font-weight:600;white-space:nowrap;box-shadow:0 0 0 4px var(--glass)}
  .tools .modechip i{width:8px;height:8px;border-radius:50%;background:var(--mode);flex:none}
  .tools .modechip small{font-size:11px;font-weight:500;color:var(--muted)}
}
/* Planraster: Profi dichter (25 cm), Einfach luftiger – siehe drawGrid in p3.js */
/* Erststart: Karten tragen die Modusfarbe, Mini-Skizzen mit eigenem Charakter (Einfach: große Blöcke, Profi: Zahlenzeilen mit Raster) */
.choice button[data-obc="pro"][aria-pressed="true"]{border-color:var(--pro);background:var(--pro-soft)}
.choice button[data-obc="simple"] .mini{grid-template-columns:1fr 1fr 1fr;align-content:stretch;gap:6px}
.choice button[data-obc="simple"] .mini i{height:auto;border-radius:6px;width:auto!important;background:color-mix(in srgb,var(--sel) 22%,var(--panel2))!important}
.choice button[data-obc="pro"] .mini{background-color:var(--panel2);background-image:linear-gradient(var(--line2) 1px,transparent 1px),linear-gradient(90deg,var(--line2) 1px,transparent 1px);background-size:8px 8px;gap:4px}
.choice button[data-obc="pro"] .mini i{height:6px;background:color-mix(in srgb,var(--pro) 40%,var(--panel2))}
/* G2 Touch-Ziele ≥ 40 px */
@media (pointer:coarse){
  .btn.sm,.btn.ghost.sm,.btn.icon.sheet-x,.stepnav .btn,.menu button{min-height:40px}
  .btn.icon.sheet-x{min-width:40px}
  .linkbtn{display:inline-flex;align-items:center;min-height:40px}
  .stepper button{min-height:40px}
  .btn{min-height:40px}
  .swatches{gap:8px}
  .swatches .sw{width:40px;height:40px}
  .pgrid-sw .sw{max-width:none;min-height:36px}
}
@media (max-width:860px){.stepnav .btn{height:40px}.btn.icon.sheet-x{width:40px;height:40px}}
/* Mobil-Kopf: Stepper-Pille „2/5 ▾“ als Menü erkennbar, Projektname schmaler */
.stepper .of,.stepper .chev{display:none}
@media (max-width:860px){
  .stepper button[aria-current="step"]{gap:5px;padding:0 8px 0 5px!important}
  .stepper button[aria-current="step"] .chev{display:block;width:12px;height:12px;color:var(--muted);flex:none;transition:transform .15s}
  .stepper.open button[aria-current="step"] .chev{transform:rotate(180deg)}
}
@media (max-width:599px){
  .stepper button[aria-current="step"] .n{display:inline-flex;align-items:center;justify-content:center;width:auto;min-width:20px;height:20px;padding:0 7px;border-radius:999px;font-size:11.5px}
  .stepper button[aria-current="step"] .of{display:inline;opacity:.75}
}
@media (max-width:599px){
  .topbar{gap:3px;padding:0 5px 0 6px}
  .topbar .iconbtn{min-width:34px;width:34px}
  .topbar .seg button{padding:0 7px}
  .stepper{padding:2px}
  .stepper button[aria-current="step"]{gap:3px;padding:0 5px 0 3px!important}
  .stepper button[aria-current="step"] .chev{width:10px;height:10px}
  .stepper button[aria-current="step"] .n{padding:0 6px}
}
@media (max-width:480px){.topbar .proj{max-width:90px}}
.stepmenu{position:fixed;z-index:45;min-width:220px;padding:6px;display:grid;background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-lg)}
.stepmenu button{display:flex;align-items:center;gap:10px;min-height:44px;border:0;background:transparent;border-radius:9px;padding:0 10px;text-align:left;font-weight:500;color:var(--ink)}
.stepmenu button:hover{background:var(--panel2)}
.stepmenu button[aria-current="step"]{background:var(--sel-soft);font-weight:600}
.stepmenu .n{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font:500 11px var(--mono);background:var(--panel3);color:var(--muted);flex:none}
.stepmenu .done .n{background:var(--ink);color:var(--panel)}
.stepmenu [aria-current="step"] .n{background:var(--sel);color:var(--sel-ink)}
/* Speichern-Knopf: im schmalen Desktop ein klar treffbarer runder Knopf mit Punkt statt eines 6-px-Punkts */
@media (max-width:1180px) and (min-width:861px){
  button.save{width:30px;height:30px;padding:0;justify-content:center;border-radius:50%;font-size:0;gap:0}
  button.save:hover{background:var(--panel2)}
  button.save::before{width:8px;height:8px;box-shadow:0 0 0 3px color-mix(in srgb,var(--ok) 18%,transparent)}
  button.save.dirty{width:auto;font-size:12px;gap:6px;padding:0 10px;border-radius:999px;background:var(--panel2)}
  button.save.dirty::before{box-shadow:0 0 0 3px color-mix(in srgb,#D98A1F 22%,transparent)}
}
/* G3 ⋯-Menü: Fade am unteren Rand, solange darunter noch etwas kommt */
#projMenu.more{-webkit-mask-image:linear-gradient(#000 calc(100% - 44px),transparent);mask-image:linear-gradient(#000 calc(100% - 44px),transparent)}
.menu .mgrp{text-transform:none;letter-spacing:.01em}
.menu > button{min-height:36px}
/* Katalog: Namen zweizeilig statt abgeschnitten */
#catalog .cat-item b{white-space:normal;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;line-height:1.3;text-overflow:clip;overflow-wrap:anywhere;hyphens:auto}
/* Startseite: Beispielkarten mit zweizeiliger Meta-Zeile */
.excard .ei b{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.3}
.excard small{white-space:normal;align-items:flex-start;line-height:1.35}
.excard small .dot{margin-top:4px}
.excard small .nw{white-space:nowrap}
/* G4 Einkaufsliste: eine Grundlinie je Zeile */
.shopdlg table.shop td{vertical-align:baseline}
.shopdlg table.shop td .btn.ghost.sm{height:auto;min-height:28px;padding:0!important;line-height:1.3;white-space:normal;text-align:left;justify-content:flex-start}
.shopdlg table.shop td.num{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:12px}
.shopdlg table.shop td:first-child{width:100%}
@media (pointer:coarse){.shopdlg table.shop td .btn.ghost.sm{min-height:40px}}
/* Dunkelmodus: helle Farbfelder blenden nicht */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .sw,:root:not([data-theme="light"]) input[type=color],:root:not([data-theme="light"]) .ctxbar .cswatch,:root:not([data-theme="light"]) .palette .dots i{box-shadow:inset 0 0 0 1px var(--line2);filter:brightness(.92)}}
:root[data-theme="dark"] .sw,:root[data-theme="dark"] input[type=color],:root[data-theme="dark"] .ctxbar .cswatch,:root[data-theme="dark"] .palette .dots i{box-shadow:inset 0 0 0 1px var(--line2);filter:brightness(.92)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .wallcard .prev{filter:brightness(.82);border-color:var(--line2)}}
:root[data-theme="dark"] .wallcard .prev{filter:brightness(.82);border-color:var(--line2)}
/* G6 Kontextleiste am Objekt */
.ctxbar{gap:2px;padding:4px;border-radius:14px;background:var(--glass);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);box-shadow:0 1px 2px rgba(14,17,22,.08),0 10px 28px rgba(14,17,22,.16)}
.ctxbar button{border-radius:10px}
.ctxbar button:focus-visible{outline-offset:0}
.ctxbar button.danger:hover{background:color-mix(in srgb,var(--danger) 12%,transparent)}
.ctxbar .ccolors{border-radius:14px}
/* G6 Licht: Hinweis-Karte und HUD-Pille „noch kein Licht“ */
.card.lighthint{display:block;border-color:color-mix(in srgb,#D98A1F 45%,var(--line));background:color-mix(in srgb,#D98A1F 7%,var(--panel))}
.card.lighthint>div{flex-wrap:wrap}
.card.lighthint summary{list-style:none;display:flex;gap:8px;align-items:flex-start}
.card.lighthint summary::-webkit-details-marker{display:none}
.card.lighthint summary::before{content:"";width:8px;height:8px;margin-top:5px;border-radius:50%;background:#D98A1F;box-shadow:0 0 0 3px color-mix(in srgb,#D98A1F 22%,transparent);flex:none}
.chip.lightpill{cursor:pointer;color:var(--ink);font:inherit;font-size:12px;font-weight:500;height:32px;padding:0 12px 0 10px;border-color:color-mix(in srgb,#D98A1F 50%,var(--line));gap:7px}
.chip.lightpill::before{content:"";width:7px;height:7px;border-radius:50%;background:#D98A1F;box-shadow:0 0 0 3px color-mix(in srgb,#D98A1F 25%,transparent);flex:none}
.chip.lightpill b{color:var(--sel);font-weight:600}
.chip.lightpill:hover{background:var(--panel)}
@media (pointer:coarse){.chip.lightpill{height:40px}}
/* Runde 13 (Kai): Konto – Cloud-Status in der Kopfleiste und Konto-Dialoge (Feinschliff: Lina) */
/* Lina R13: Speicher- und Cloud-Status als EIN Element. Mit Konto-Funktion zeigt #saveState nur „Speichern“/„Speichert …“,
   sonst steht dort allein der Cloud-Status (Wolke statt Punkt). Mobil bleibt die Wolke als 40-px-Knopf sichtbar. */
button.save.merged:not(.dirty):not(.busy){display:none}
button.cloudst{gap:6px}
button.cloudst::before{width:16px;height:16px;border-radius:0;flex:none;background:var(--ok);-webkit-mask:var(--cloud) center/contain no-repeat;mask:var(--cloud) center/contain no-repeat;
  --cloud:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 18.5h10.5a4 4 0 0 0 .6-7.95A6 6 0 0 0 6.6 9.1 4.75 4.75 0 0 0 7 18.5Z'/%3E%3Cpath d='m9.5 13.6 1.9 1.9 3.6-3.7'/%3E%3C/svg%3E")}
button.cloudst.off::before,button.cloudst.busy::before{background:var(--faint);--cloud:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 18.5h10.5a4 4 0 0 0 .6-7.95A6 6 0 0 0 6.6 9.1 4.75 4.75 0 0 0 7 18.5Z'/%3E%3C/svg%3E")}
button.cloudst[data-state="offline"]::before{background:#D98A1F;--cloud:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 18.5h10.5a4 4 0 0 0 .6-7.95A6 6 0 0 0 6.6 9.1 4.75 4.75 0 0 0 7 18.5Z'/%3E%3Cpath d='M4 4l16 16'/%3E%3C/svg%3E")}
button.cloudst.busy::before{animation:cpulse 1.2s ease-in-out infinite}
@keyframes cpulse{50%{opacity:.35}}
button.cloudst[data-state="guest"]::after{content:"Sichern";color:var(--sel);font-weight:600;padding-left:9px;margin-left:3px;border-left:1px solid var(--line2);line-height:14px}
button.cloudst[data-state="guest"]:hover{color:var(--ink)}
button.save.merged.dirty+button.cloudst,button.save.merged.busy+button.cloudst{font-size:0;gap:0;padding:4px}
button.save.merged.dirty+button.cloudst::after,button.save.merged.busy+button.cloudst::after{display:none}
@media (max-width:1180px) and (min-width:861px){button.cloudst::before{width:16px;height:16px;box-shadow:none}button.cloudst::after{display:none}}
.aierr{color:var(--danger);display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;line-height:1.45}
.aierr .btn{color:var(--ink)}
.acc-err .btn{margin-left:4px;color:var(--ink);vertical-align:middle}
/* Lina R13: Startseite für Fremde – Einzeiler, Haupt-Knopf, Speicherhinweis, Fußzeile mit Rechtstexten */
.l-hero .l-lede{margin:12px 0 0;color:var(--muted);font-size:14.5px;line-height:1.5;max-width:44ch;text-wrap:pretty}
.l-cta{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.l-cta .btn{height:44px;padding:0 18px;border-radius:12px;font-size:14px}
.l-cta .btn.primary{background:var(--sel);border-color:var(--sel);color:var(--sel-ink);box-shadow:0 6px 18px color-mix(in srgb,var(--sel) 28%,transparent)}
.l-cta .btn.ghost{border-color:var(--line2);background:transparent}
.l-cta .btn.ghost:hover{background:var(--panel2)}
.has-proj .l-lede,.has-proj .l-cta{display:none}
.l-store{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;margin:0;padding:9px 12px;border-radius:12px;background:var(--sel-soft);font-size:12.5px;line-height:1.45;color:var(--ink)}
.l-store span{flex:1 1 220px;min-width:0}
.l-store .linkbtn{color:var(--sel);font-weight:600;text-decoration:none;min-height:32px}
.l-store .linkbtn:hover{text-decoration:underline}
.l-foot{border-top:1px solid var(--line);padding-top:16px;margin-top:auto}
.l-foot .l-note{margin:0 0 10px;line-height:1.5}
.l-foot .actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.l-legal{display:inline-flex;gap:16px;margin-left:auto;font-size:12.5px}
.l-legal a{color:var(--muted);text-decoration:none;min-height:32px;display:inline-flex;align-items:center}
.l-legal a:hover{color:var(--ink);text-decoration:underline}
@media (max-width:599px){.l-cta .btn{flex:1 1 auto}.l-legal{margin-left:0;width:100%}}
@media (pointer:coarse){.l-legal a,.l-store .linkbtn{min-height:40px}}
@media (max-width:860px){
  button.cloudst{display:inline-flex!important;width:40px;height:40px;padding:0;justify-content:center;border-radius:50%;font-size:0;gap:0;flex:none;position:relative}
  button.cloudst::before{width:20px;height:20px}
  button.cloudst::after{display:none}
  button.cloudst[data-state="guest"]::after{display:block;content:"";position:absolute;top:9px;right:8px;width:7px;height:7px;padding:0;margin:0;border:2px solid var(--panel);border-radius:50%;background:var(--sel)}
}
.acc-dlg .acc-err{color:var(--danger);font-size:12.5px;margin:4px 0 10px;line-height:1.45}
.acc-dlg .acc-legal{margin:8px 0 12px;line-height:1.5}
.acc-dlg .acc-legal a{color:var(--sel)}
.acc-dlg .acc-nl{margin-top:2px;min-height:40px;box-sizing:border-box}
.acc-dlg .check input[type=checkbox]{width:20px;height:20px;flex:none;margin:0}
.acc-dlg .check{min-height:40px;box-sizing:border-box}
.acc-dlg .field input{height:44px;font-size:16px}
.acc-dlg .acc-code{font-size:20px;letter-spacing:.3em;text-align:center;height:44px;font-variant-numeric:tabular-nums}
.acc-dlg .actions .btn{min-height:40px}
.acc-rows{margin:6px 0 14px;display:grid;gap:8px}
.acc-rows>div{display:grid;grid-template-columns:110px 1fr;gap:10px;align-items:baseline;font-size:13px}
.acc-rows dt{color:var(--muted);font-size:12px}
.acc-rows dd{margin:0;min-width:0;overflow-wrap:anywhere}
.acc-out{border-top:1px solid var(--line);padding-top:12px;display:grid;gap:10px}
.acc-adv{margin-top:14px;font-size:13px}
.acc-adv summary{cursor:pointer;color:var(--muted)}
.btn.acc-delgo{background:var(--danger);border-color:var(--danger);color:#fff}
@media (max-width:480px){.acc-rows>div{grid-template-columns:1fr;gap:2px}}
.affl{margin-left:8px;font-size:12px;font-weight:600;color:var(--sel);text-decoration:none;white-space:nowrap}.affl:hover{text-decoration:underline}
/* Runde 17: Katalog-Kopf kompakt */
#catalog .catf.scrollx{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:2px;-webkit-mask-image:linear-gradient(90deg,#000 85%,transparent);mask-image:linear-gradient(90deg,#000 85%,transparent)}
#catalog .catf.scrollx::-webkit-scrollbar{display:none}#catalog .catf.scrollx .pill{flex:none}
.btn.linkish{color:var(--sel);font-weight:600;border-color:transparent;background:transparent}.btn.linkish:hover{background:var(--sel-soft)}
/* Runde 17: Grundformen */
.seg.shapes4{display:grid!important;grid-template-columns:repeat(4,1fr);gap:4px;height:auto;padding:4px}
.seg.shapes4 button{display:flex;flex-direction:column;align-items:center;gap:3px;height:auto;padding:7px 2px 6px;font-size:11.5px;line-height:1.1}
.seg.shapes4 button svg{color:var(--muted)}.seg.shapes4 button[aria-pressed="true"] svg{color:var(--sel)}
.seg.notchseg{display:flex;width:100%}.seg.notchseg button{flex:1;padding:0 4px;font-size:12px}
/* Runde 16: Grundriss-Vorlage, Sonnenstand, Foto-Modus */
.ulbar{position:absolute;left:50%;top:0;transform:translateX(-50%);z-index:12;display:flex;align-items:center;gap:12px;max-width:min(560px,calc(100% - 24px));padding:10px 12px 10px 14px;border-radius:14px;border:1px solid var(--line);background:var(--panel);box-shadow:var(--shadow-lg);font-size:12.5px;line-height:1.4;pointer-events:auto;animation:tin .16s ease-out}
.ulbar[hidden]{display:none}.ulbar b{display:block;font-size:13px}.ulbar .btn{flex:none}
.ulcard .actions .btn{flex:1 1 auto}.ulcard .btn[aria-pressed="true"]{border-color:var(--sel);color:var(--sel)}
.ulcard input[type=range],.sunbar input[type=range]{width:100%;accent-color:var(--sel)}
.northgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.northgrid .btn{flex-direction:column;height:auto;padding:8px 4px;gap:2px;font-size:12px}
.northgrid .btn[aria-pressed="true"]{border-color:var(--sel);color:var(--sel)}
.northgrid .na{display:inline-block;font-size:17px;line-height:1;color:#D0533F;font-weight:700}
.hudx[aria-pressed="true"]{border-color:var(--sel)!important;color:var(--sel)!important}
.sunbar{position:absolute;left:50%;bottom:64px;transform:translateX(-50%);z-index:12;width:min(400px,calc(100% - 24px));display:grid;gap:8px;padding:10px 14px 12px;border-radius:14px;border:1px solid var(--line);background:var(--panel);box-shadow:var(--shadow-lg);pointer-events:auto;animation:tin .16s ease-out}
.sunbar[hidden]{display:none}
.sunbar .sunhead{display:flex;align-items:center;gap:8px;font-size:13px}.sunbar .sunv{flex:1;color:var(--muted);font-variant-numeric:tabular-nums}
.sunbar .iconbtn{width:28px;height:28px}
.sunbar .seg{display:flex;width:100%;box-shadow:none;background:var(--panel2)}.sunbar .seg button{flex:1;padding:0 4px}
.sunbar .sunnote{font-size:11px;color:var(--muted)}
.phwrap{border-radius:12px;overflow:hidden;background:#111;line-height:0}
.phwrap canvas,.phwrap img{width:100%;height:auto;display:block}
.phbar{height:5px;border-radius:3px;background:var(--panel2);margin-top:10px;overflow:hidden}.phbar i{display:block;height:100%;width:0;background:var(--sel);transition:width .2s}
@media (max-width:860px){.hudx span{display:none}.sunbar{bottom:calc(150px + env(safe-area-inset-bottom,0px))}.ulbar{top:56px;font-size:12px}}

/* --- Web-App: sichere Bereiche (Notch, Home-Indikator) --- */
body{margin:0}
.app,.landing{top:env(safe-area-inset-top,0px);bottom:env(safe-area-inset-bottom,0px);left:env(safe-area-inset-left,0px);right:env(safe-area-inset-right,0px)}
a.btn{text-decoration:none;color:inherit}