:root{
    --void:#05070F; --panel-a:#0C1428; --panel-b:#080D1C;
    --line:#22315A;
    --cyan:#3BF0FF; --violet:#7C4DFF; --magenta:#FF3DE0;
    --ink:#EEF3FF; --body:#A9B6DA; --muted:#66739B;
    --clip-lg:polygon(20px 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%, 0 20px);
    --clip-sm:polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px);
    --disp:"Eurostile","Bank Gothic","Avenir Next Condensed","Futura",system-ui,sans-serif;
    --sans:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
    --mono:ui-monospace,"SF Mono","JetBrains Mono",Menlo,monospace;
  }
  *{box-sizing:border-box}
  html,body{margin:0}
  body{
    background:var(--void); color:var(--body);
    font-family:var(--sans); line-height:1.5;
    min-height:100vh; -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  #stars{position:fixed; inset:0; z-index:0; pointer-events:none}
  .bg-glow{
    position:fixed; inset:0; z-index:0; pointer-events:none;
    background:
      radial-gradient(1100px 760px at 78% -12%, rgba(124,77,255,.20), transparent 60%),
      radial-gradient(880px 680px at 6% 116%, rgba(255,61,224,.14), transparent 55%),
      radial-gradient(700px 520px at 50% 40%, rgba(59,240,255,.05), transparent 60%);
  }
  .wrap{position:relative; z-index:1; max-width:1080px; margin:0 auto; padding:26px 20px 64px}

  /* ---- shared panel shape + neon outline ---- */
  .shape{position:relative; background:linear-gradient(158deg,var(--panel-a),var(--panel-b))}
  .shape::before{
    content:""; position:absolute; inset:0; padding:1.4px;
    background:linear-gradient(135deg,var(--cyan),var(--violet) 52%,var(--magenta));
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    -webkit-mask-composite:xor; mask-composite:exclude;
    opacity:.85; pointer-events:none;
  }
  body.mode-rect .shape,   body.mode-rect .shape::before{border-radius:6px}
  body.mode-clip .panel,   body.mode-clip .panel::before{clip-path:var(--clip-lg)}
  body.mode-clip .chip,    body.mode-clip .chip::before,
  body.mode-clip .mini,    body.mode-clip .mini::before{clip-path:var(--clip-sm)}
  .panel{filter:drop-shadow(0 18px 34px rgba(2,4,12,.6))}

  /* ---- header / command bar ---- */
  .cmd{display:flex; flex-wrap:wrap; align-items:center; gap:16px 22px; padding:16px 20px; margin-bottom:22px}
  .brand{display:flex; align-items:baseline; gap:12px}
  .brand .mark{
    font-family:var(--disp); font-weight:800; letter-spacing:.14em; text-transform:uppercase;
    font-size:19px; color:var(--ink);
    text-shadow:0 0 14px rgba(59,240,255,.45);
  }
  .brand .mark b{color:var(--cyan)}
  .brand .sub{font-family:var(--mono); font-size:11px; letter-spacing:.18em; color:var(--muted); text-transform:uppercase}
  .spacer{flex:1 1 40px}
  .ctrl-label{font-family:var(--mono); font-size:10.5px; letter-spacing:.2em; color:var(--muted); text-transform:uppercase; margin-right:2px}

  /* segmented toggle */
  .seg{display:inline-flex; gap:4px; padding:4px; background:rgba(10,16,32,.7)}
  .seg button{
    font-family:var(--disp); text-transform:uppercase; letter-spacing:.1em; font-size:12px; font-weight:700;
    color:var(--body); background:transparent; border:0; padding:7px 13px; cursor:pointer;
    transition:color .18s, background .18s, filter .18s;
  }
  body.mode-rect .seg, body.mode-rect .seg button{border-radius:5px}
  body.mode-clip .seg button{clip-path:var(--clip-sm)}
  .seg button[aria-pressed="true"]{
    color:var(--void); background:linear-gradient(120deg,var(--cyan),var(--violet));
    filter:drop-shadow(0 0 9px rgba(59,240,255,.5));
  }
  .legend{display:flex; align-items:center; gap:14px; font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; color:var(--muted); text-transform:uppercase}
  .dot{display:inline-flex; align-items:center; gap:6px}
  .dot i{width:9px; height:9px; border-radius:50%; display:inline-block}

  /* ---- layout grid ---- */
  .grid{display:grid; grid-template-columns:1.55fr 1fr; gap:20px; align-items:start}
  @media(max-width:820px){ .grid{grid-template-columns:1fr} }

  .panel{padding:22px 22px 24px}
  .eyebrow{font-family:var(--mono); font-size:10.5px; letter-spacing:.24em; text-transform:uppercase; color:var(--cyan); margin:0 0 4px}
  h2.title{font-family:var(--disp); font-weight:800; letter-spacing:.03em; font-size:26px; color:var(--ink); margin:0 0 2px; text-wrap:balance}
  .base-note{font-family:var(--mono); font-size:12px; color:var(--muted); letter-spacing:.06em}
  .base-note b{color:var(--body)}

  .rule{height:1px; border:0; margin:18px 0; background:linear-gradient(90deg,transparent,var(--line) 20%,var(--line) 80%,transparent)}

  /* quantity selector */
  .qhead{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px}
  .qhead .lab{font-family:var(--mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted)}
  .factor{font-family:var(--mono); font-size:12px; color:var(--violet); letter-spacing:.06em}
  .factor b{color:var(--cyan)}
  .targets{display:flex; flex-wrap:wrap; gap:9px; align-items:center}
  .chip{position:relative; background:linear-gradient(158deg,#0e1730,#0a1022)}
  .chip::before{content:""; position:absolute; inset:0; padding:1.2px;
    background:linear-gradient(135deg,rgba(59,240,255,.5),rgba(124,77,255,.5));
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    -webkit-mask-composite:xor; mask-composite:exclude; opacity:.7}
  body.mode-rect .chip, body.mode-rect .chip::before{border-radius:5px}
  .target{
    font-family:var(--disp); font-weight:700; letter-spacing:.05em; font-size:15px;
    color:var(--body); background:transparent; border:0; cursor:pointer;
    padding:10px 15px; position:relative; z-index:1;
    transition:color .18s, filter .18s;
  }
  .chip:hover .target{color:var(--ink)}
  .chip.active{background:linear-gradient(120deg,rgba(59,240,255,.16),rgba(124,77,255,.16)); filter:drop-shadow(0 0 12px rgba(59,240,255,.4))}
  .chip.active::before{opacity:1; padding:1.5px}
  .chip.active .target{color:var(--cyan); text-shadow:0 0 12px rgba(59,240,255,.5)}
  .custom{display:inline-flex; align-items:center; gap:8px; margin-left:2px}
  .custom label{font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}
  .custom .field{position:relative}
  .custom input{
    width:82px; font-family:var(--mono); font-size:15px; color:var(--cyan);
    background:#0a1022; border:1px solid var(--line); padding:9px 10px; text-align:right;
    outline:none; transition:border-color .18s, box-shadow .18s;
  }
  body.mode-rect .custom input{border-radius:5px}
  body.mode-clip .custom input{clip-path:var(--clip-sm)}
  .custom input:focus{border-color:var(--cyan); box-shadow:0 0 0 1px var(--cyan)}
  .custom .u{font-family:var(--mono); font-size:13px; color:var(--muted)}

  /* ingredient readout */
  .ing{display:grid; gap:2px; margin-top:16px}
  .ing .row{
    display:grid; grid-template-columns:1fr auto; align-items:center; gap:14px;
    padding:12px 4px; border-bottom:1px solid rgba(34,49,90,.5);
  }
  .ing .row:last-child{border-bottom:0}
  .ing .name{color:var(--body); font-size:15px}
  .ing .amt{font-family:var(--mono); font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap}
  .ing .amt .v{color:var(--cyan); font-size:19px; font-weight:600; text-shadow:0 0 12px rgba(59,240,255,.28)}
  .ing .amt .u{color:var(--muted); font-size:12px; margin-left:5px; letter-spacing:.06em}

  .notes{margin-top:16px; font-size:13.5px; color:var(--muted)}
  .notes b{color:var(--body); font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; display:block; margin-bottom:4px}

  /* recipe list */
  .list{display:grid; gap:9px; margin-top:4px}
  .item{
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    padding:12px 14px; cursor:pointer; position:relative;
    background:linear-gradient(158deg,#0c1428,#080d1c);
    transition:filter .18s;
  }
  .item.mini::before{content:""; position:absolute; inset:0; padding:1.2px;
    background:linear-gradient(135deg,rgba(59,240,255,.28),rgba(255,61,224,.28));
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    -webkit-mask-composite:xor; mask-composite:exclude; opacity:.55}
  body.mode-rect .item, body.mode-rect .item.mini::before{border-radius:5px}
  .item:hover{filter:drop-shadow(0 0 12px rgba(124,77,255,.3))}
  .item.on{background:linear-gradient(120deg,rgba(59,240,255,.12),rgba(124,77,255,.12))}
  .item.on::before{opacity:1}
  .item .nm{color:var(--ink); font-size:14.5px}
  .item .lt{font-family:var(--mono); font-size:12px; color:var(--cyan); letter-spacing:.04em}
  .item .lt.q{color:var(--muted)}

  /* mini form demo */
  .formrow{display:grid; grid-template-columns:1fr 76px 74px; gap:8px; margin-top:12px}
  .in{position:relative}
  .in input, .in select{
    width:100%; font-family:var(--sans); font-size:13.5px; color:var(--body);
    background:#0a1022; border:1px solid var(--line); padding:9px 10px; outline:none;
    transition:border-color .18s, box-shadow .18s;
  }
  .in select{font-family:var(--mono); color:var(--cyan)}
  body.mode-rect .in input, body.mode-rect .in select{border-radius:5px}
  body.mode-clip .in input, body.mode-clip .in select{clip-path:var(--clip-sm)}
  .in input:focus, .in select:focus{border-color:var(--cyan); box-shadow:0 0 0 1px rgba(59,240,255,.6)}
  .in input::placeholder{color:#4a557a}
  .addbtn{
    margin-top:10px; width:100%; font-family:var(--disp); font-weight:700; letter-spacing:.12em; text-transform:uppercase;
    font-size:13px; color:var(--void); cursor:pointer; border:0; padding:11px;
    background:linear-gradient(120deg,var(--cyan),var(--violet) 60%,var(--magenta));
    filter:drop-shadow(0 0 12px rgba(124,77,255,.4)); transition:filter .18s, transform .1s;
    position:relative;
  }
  body.mode-rect .addbtn{border-radius:5px}
  body.mode-clip .addbtn{clip-path:var(--clip-sm)}
  .addbtn:hover{filter:drop-shadow(0 0 18px rgba(59,240,255,.6))}
  .addbtn:active{transform:translateY(1px)}

  .foot{margin-top:26px; text-align:center; font-family:var(--mono); font-size:11px; letter-spacing:.1em; color:var(--muted)}
  .foot b{color:var(--body)}

  .stack-title{font-family:var(--disp); text-transform:uppercase; letter-spacing:.16em; font-size:12px; color:var(--muted); margin:0 0 12px}

  /* reveal */
  @media(prefers-reduced-motion:no-preference){
    .reveal{opacity:0; transform:translateY(10px); animation:rise .6s cubic-bezier(.2,.7,.2,1) forwards}
    .r1{animation-delay:.05s}.r2{animation-delay:.13s}.r3{animation-delay:.21s}
    @keyframes rise{to{opacity:1; transform:none}}
  }

/* App-spezifische Ergänzungen */
.hidden { display: none !important; }
.backlink { background: none; border: 0; color: var(--cyan); cursor: pointer;
  font-family: var(--mono); font-size: 12px; letter-spacing: .1em; padding: 0 0 12px; }
.empty { color: var(--muted); font-family: var(--mono); font-size: 13px; padding: 8px 4px; }
.rowbtns { display: flex; gap: 10px; margin-top: 20px; }
.dangerbtn { color: var(--magenta); background: none; border: 0; cursor: pointer;
  font-family: var(--disp); text-transform: uppercase; letter-spacing: .1em; font-size: 13px; }
.err { color: var(--magenta); font-family: var(--mono); font-size: 12px; margin-top: 8px; }
.iconbtn { background: none; border: 0; color: var(--muted); cursor: pointer; font-size: 18px; line-height: 1; }
.field-label { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted); margin: 14px 0 6px; }
.text-input { width: 100%; font-family: var(--sans); font-size: 15px; color: var(--ink);
  background: #0a1022; border: 1px solid var(--line); padding: 10px 12px; outline: none; }
.text-input:focus { border-color: var(--cyan); box-shadow: 0 0 0 1px rgba(59,240,255,.6); }
body.mode-rect .text-input { border-radius: 5px; }
body.mode-clip .text-input { clip-path: var(--clip-sm); }