:root{
    --green:#8DC63F;
    --green-dark:#6FA62A;
    --green-soft:#EEF7E0;
    --ink:#34343A;
    --muted:#8A8A92;
    --bg:#F3F3F1;
    --card:#FFFFFF;
    --line:#EAEAE7;
    --free:#8DC63F;
    --busy:#E0524D;
    --unknown:#C7C7C3;
    --r-lg:20px;
    --r-md:14px;
    --r-sm:10px;
  }
  *{box-sizing:border-box;}
  body{margin:0;font-family:"Segoe UI",system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--ink);
    -webkit-font-smoothing:antialiased;}

  .auth-gate{position:fixed;inset:0;background:var(--bg);display:flex;align-items:center;justify-content:center;
    padding:1.5rem;z-index:100;}
  .auth-gate-card{background:var(--card);border-radius:var(--r-lg);padding:2.5rem 2rem;max-width:380px;width:100%;
    text-align:center;box-shadow:0 8px 32px rgba(0,0,0,0.08);}
  .auth-gate-icon{width:56px;height:56px;border-radius:16px;background:var(--green);margin:0 auto 1.2rem;}
  .auth-gate-icon svg{width:30px;height:30px;}
  .auth-gate-card h1{margin:0 0 0.2rem;font-size:1.25rem;font-weight:700;}
  .auth-gate-sub{margin:0 0 1.2rem;font-size:0.85rem;color:var(--muted);}
  .auth-gate-text{font-size:0.85rem;color:var(--muted);line-height:1.55;margin:0 0 1.6rem;}
  .auth-gate-btn{width:100%;}
  .auth-gate-error{margin-top:1rem;font-size:0.82rem;color:var(--busy);line-height:1.5;}

  header{background:var(--green);color:var(--ink);padding:1.2rem 1.5rem;
    padding-top:max(1.2rem, env(safe-area-inset-top));}
  .header-brand{display:flex;align-items:center;gap:0.9rem;}
  .brand-icon{width:44px;height:44px;border-radius:12px;background:rgba(255,255,255,0.35);
    display:flex;align-items:center;justify-content:center;flex-shrink:0;}
  .brand-icon svg{width:24px;height:24px;color:var(--ink);}
  header h1{margin:0;font-size:1.32rem;font-weight:700;letter-spacing:0.01em;line-height:1.25;}
  header .sub{font-size:0.8rem;color:var(--ink);opacity:0.62;margin-top:0.1rem;}

  main{max-width:1080px;margin:0 auto;padding:1.25rem 1.25rem 2.5rem;display:flex;flex-direction:column;gap:1.25rem;}

  /* time card */
  .time-card{background:var(--card);border-radius:var(--r-lg);padding:1.1rem 1.25rem;
    box-shadow:0 1px 2px rgba(0,0,0,0.03), 0 8px 24px rgba(0,0,0,0.04);
    display:flex;align-items:center;gap:0.9rem;flex-wrap:wrap;}

  .dt-pill{position:relative;display:flex;flex-direction:column;gap:0.25rem;cursor:pointer;
    padding:0.55rem 1rem;border:1.5px solid var(--line);border-radius:var(--r-md);background:#FBFBFA;
    min-width:175px;transition:border-color .15s, background .15s;}
  .dt-pill:hover{border-color:var(--green);}
  .dt-pill.open{border-color:var(--green);background:#fff;box-shadow:0 0 0 3px rgba(141,198,63,0.16);}
  .dt-pill .lbl{font-size:0.68rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:0.07em;}
  .dt-pill .val{font-size:0.95rem;font-weight:600;display:flex;align-items:center;gap:0.5rem;color:var(--ink);}
  .dt-pill .val svg{width:15px;height:15px;color:var(--muted);flex-shrink:0;}
  .dt-pill .val .time-part{color:var(--green-dark);}

  .time-arrow{display:flex;align-items:center;justify-content:center;color:var(--muted);}
  .time-arrow svg{width:18px;height:18px;}

  .btn{background:var(--green);color:var(--ink);border:none;padding:0.65rem 1.4rem;border-radius:var(--r-sm);
    font-weight:700;font-size:0.9rem;cursor:pointer;transition:background .15s, transform .1s, box-shadow .15s;
    margin-left:auto;}
  .btn:hover{background:var(--green-dark);color:#fff;box-shadow:0 4px 12px rgba(141,198,63,0.35);}
  .btn:active{transform:translateY(1px);}
  .btn:disabled{background:#dedede;color:#999;cursor:not-allowed;box-shadow:none;}
  .btn-outline{background:#fff;color:var(--ink);border:1.5px solid var(--line);}
  .btn-outline:hover{border-color:var(--ink);color:var(--ink);box-shadow:none;background:#fff;}
  .status{font-size:0.85rem;color:var(--muted);min-height:1.2em;flex-basis:100%;}

  /* picker popover */
  .picker-popover{position:absolute;top:calc(100% + 10px);left:0;background:#fff;border-radius:var(--r-md);
    box-shadow:0 16px 40px rgba(0,0,0,0.16);padding:1rem;z-index:60;width:288px;border:1px solid var(--line);
    cursor:default;}
  .picker-cal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:0.7rem;
    font-weight:700;font-size:0.9rem;}
  .picker-cal-nav{cursor:pointer;width:30px;height:30px;display:flex;align-items:center;justify-content:center;
    border-radius:8px;color:var(--muted);}
  .picker-cal-nav:hover{background:var(--green-soft);color:var(--green-dark);}
  .picker-cal-nav svg{width:16px;height:16px;}
  .picker-cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;text-align:center;font-size:0.8rem;}
  .picker-cal-grid .dow{color:var(--muted);font-weight:700;font-size:0.68rem;padding-bottom:0.4rem;}
  .picker-cal-grid .day{padding:0.45rem 0;border-radius:8px;cursor:pointer;}
  .picker-cal-grid .day:hover{background:var(--green-soft);}
  .picker-cal-grid .day.selected{background:var(--green);color:var(--ink);font-weight:700;}
  .picker-cal-grid .day.muted{color:#D6D6D3;cursor:default;}
  .picker-cal-grid .day.today{box-shadow:inset 0 0 0 1.5px var(--muted);}
  .picker-divider{border-top:1px solid var(--line);margin:0.85rem 0 0.7rem;}
  .picker-time-label{font-size:0.7rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:0.07em;margin-bottom:0.5rem;}
  .picker-time-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0.4rem;max-height:132px;overflow-y:auto;padding-right:2px;}
  .picker-time-grid .time{padding:0.4rem 0;text-align:center;border-radius:8px;font-size:0.8rem;cursor:pointer;
    border:1.5px solid var(--line);}
  .picker-time-grid .time:hover{border-color:var(--green);}
  .picker-time-grid .time.selected{background:var(--green);border-color:var(--green);font-weight:700;}

  /* tabs */
  .tabs{display:flex;gap:0.5rem;}
  .tab{padding:0.6rem 1.4rem;border-radius:999px;cursor:pointer;background:var(--card);
    font-weight:600;font-size:0.88rem;color:var(--muted);border:1.5px solid var(--line);
    transition:all .15s;}
  .tab:hover{border-color:var(--green);color:var(--ink);}
  .tab.active{background:var(--green);color:var(--ink);border-color:var(--green);box-shadow:0 4px 12px rgba(141,198,63,0.3);}

  .floor-select-wrap{display:none;position:relative;}
  .floor-select{width:100%;appearance:none;-webkit-appearance:none;background:var(--card);
    border:1.5px solid var(--line);border-radius:var(--r-md);padding:0.85rem 2.6rem 0.85rem 1.1rem;
    font-size:0.95rem;font-weight:600;color:var(--ink);font-family:inherit;cursor:pointer;
    box-shadow:0 1px 2px rgba(0,0,0,0.03), 0 8px 24px rgba(0,0,0,0.04);}
  .floor-select:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(141,198,63,0.18);}
  .floor-select-arrow{position:absolute;right:1rem;top:50%;transform:translateY(-50%);width:18px;height:18px;
    color:var(--muted);pointer-events:none;}

  /* floorplan panel */
  .panel{background:var(--card);border-radius:var(--r-lg);padding:1.1rem;
    box-shadow:0 1px 2px rgba(0,0,0,0.03), 0 8px 24px rgba(0,0,0,0.04);}
  .floorplan{position:relative;width:100%;border-radius:var(--r-md);overflow:hidden;background:#fafafa;}
  .floorplan img{width:100%;display:block;-webkit-user-drag:none;user-select:none;}

  .hotspot{
    position:absolute;
    border:3px solid var(--unknown);
    background:rgba(255,255,255,0.10);
    cursor:pointer;
    transition:border-color .2s, background .2s, box-shadow .2s;
  }
  .hotspot:hover{background:rgba(141,198,63,0.10); border-color:#8c8c89;}
  .hotspot.frei{border-color:var(--free); background:rgba(141,198,63,0.16); box-shadow:0 0 0 4px rgba(141,198,63,0.14);}
  .hotspot.belegt{border-color:var(--busy); background:rgba(224,82,77,0.14); box-shadow:0 0 0 4px rgba(224,82,77,0.10);}

  .legend{display:flex;gap:1.4rem;flex-wrap:wrap;margin-top:1rem;font-size:0.8rem;color:var(--muted);}
  .legend span{display:inline-flex;align-items:center;gap:0.5rem;}
  .dot{width:13px;height:13px;border-radius:50%;display:inline-block;border:3px solid var(--unknown);box-sizing:border-box;}
  .dot.frei{border-color:var(--free);}
  .dot.belegt{border-color:var(--busy);}

  /* bookings */
  .bookings h2{font-size:0.95rem;margin:0 0 0.7rem;font-weight:700;}
  .booking-item{display:flex;justify-content:space-between;align-items:center;background:var(--card);border:1.5px solid var(--line);
    border-radius:var(--r-md);padding:0.8rem 1.1rem;margin-bottom:0.55rem;font-size:0.88rem;gap:0.8rem;flex-wrap:wrap;}
  .booking-item .meta{color:var(--muted);font-size:0.78rem;margin-top:0.15rem;}
  .booking-actions{display:flex;gap:0.5rem;flex-shrink:0;}
  .btn-small{padding:0.4rem 0.85rem;font-size:0.78rem;border-radius:8px;font-weight:600;cursor:pointer;
    border:1.5px solid var(--line);background:#fff;color:var(--ink);transition:all .15s;}
  .btn-small:hover{border-color:var(--ink);}
  .btn-danger{color:var(--busy);border-color:#f3d4d2;}
  .btn-danger:hover{background:#fdf1f0;border-color:var(--busy);}
  .empty{color:var(--muted);font-size:0.85rem;background:var(--card);border-radius:var(--r-md);padding:0.9rem 1.1rem;
    border:1.5px dashed var(--line);}

  /* modal */
  .overlay{position:fixed;inset:0;background:rgba(40,40,40,0.4);display:flex;align-items:center;justify-content:center;z-index:50;
    backdrop-filter:blur(2px);}
  .modal{background:#fff;border-radius:var(--r-lg);padding:1.6rem;width:340px;max-width:90vw;
    box-shadow:0 20px 60px rgba(0,0,0,0.2);}
  .modal h3{margin:0 0 0.3rem;font-size:1.1rem;}
  .modal .tag{display:inline-block;font-size:0.7rem;font-weight:700;text-transform:uppercase;letter-spacing:0.06em;
    color:var(--green-dark);background:var(--green-soft);padding:0.2rem 0.6rem;border-radius:999px;margin-bottom:0.7rem;}
  .modal .field{margin-bottom:0.85rem;display:flex;flex-direction:column;gap:0.35rem;}
  .modal .field label{font-size:0.72rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:0.06em;}
  .modal input[type="text"]{border:1.5px solid var(--line);border-radius:var(--r-sm);padding:0.6rem 0.75rem;
    font-size:0.9rem;font-family:inherit;width:100%;background:#FBFBFA;}
  .modal input[type="text"]:disabled{color:var(--muted);}
  .modal input[type="datetime-local"]{border:1.5px solid var(--line);border-radius:var(--r-sm);padding:0.6rem 0.75rem;
    font-size:0.88rem;font-family:inherit;width:100%;background:#FBFBFA;}
  .inline-dt-row{display:flex;align-items:center;gap:0.5rem;}
  .inline-dt-row .time-arrow{flex-shrink:0;}
  .inline-dt-container{flex:1;min-width:0;}
  .inline-dt-container .picker-popover{width:260px;}
  .modal-actions{display:flex;gap:0.6rem;justify-content:flex-end;margin-top:1.2rem;}
  .modal-hint{font-size:0.82rem;color:var(--muted);line-height:1.5;margin:0 0 0.2rem;}
  .btn-danger-solid{background:var(--busy);color:#fff;border:none;padding:0.65rem 1.4rem;border-radius:var(--r-sm);
    font-weight:700;font-size:0.9rem;cursor:pointer;transition:background .15s;}
  .btn-danger-solid:hover{background:#c8443f;}
  .btn-danger-solid:disabled{background:#dedede;color:#999;cursor:not-allowed;}
  .avail{font-size:0.85rem;margin-bottom:0.7rem;font-weight:700;display:flex;align-items:center;gap:0.5rem;}
  .avail::before{content:"";width:10px;height:10px;border-radius:50%;display:inline-block;background:var(--unknown);}
  .avail.frei{color:var(--green-dark);}
  .avail.frei::before{background:var(--free);}
  .avail.belegt{color:var(--busy);}
  .avail.belegt::before{background:var(--busy);}
  .avail.unknown{color:var(--muted);}

  /* debug */
  details.debug summary{cursor:pointer;font-size:0.8rem;color:var(--muted);padding:0.4rem 0;}
  .debug-log{font-family:"Cascadia Code",Consolas,monospace;font-size:0.72rem;background:#26262b;color:#9fe39a;
    padding:0.9rem;border-radius:var(--r-md);max-height:220px;overflow:auto;white-space:pre-wrap;margin-top:0.5rem;}

  @media (max-width:640px){
    header{padding:1rem 1.1rem;}
    header h1{font-size:1.1rem;}
    .brand-icon{width:38px;height:38px;border-radius:10px;}
    .brand-icon svg{width:20px;height:20px;}

    main{padding:0.9rem 0.9rem 2rem;gap:1rem;}

    .time-card{flex-direction:column;align-items:stretch;padding:1rem;}
    .time-arrow{transform:rotate(90deg);align-self:center;}
    .btn{margin-left:0;width:100%;}
    .dt-pill{width:100%;min-width:0;}
    .picker-popover{position:fixed;left:0.9rem;right:0.9rem;top:auto;bottom:1rem;width:auto;
      max-height:70vh;overflow-y:auto;}

    .tabs{display:none;}
    .floor-select-wrap{display:block;}

    .panel{padding:0.8rem;}
    .legend{flex-direction:column;align-items:flex-start;gap:0.5rem;font-size:0.78rem;}

    .booking-item{flex-direction:column;align-items:stretch;}
    .booking-actions{width:100%;}
    .booking-actions .btn-small{flex:1;}

    .modal{padding:1.2rem;width:calc(100vw - 2rem);}
    .inline-dt-row{flex-direction:column;align-items:stretch;}
    .inline-dt-row .time-arrow{transform:rotate(90deg);align-self:center;}
    .inline-dt-container .picker-popover{position:fixed;left:0.9rem;right:0.9rem;bottom:1rem;width:auto;}
  }

  @media (max-width:380px){
    header h1{font-size:1rem;}
    .picker-time-grid{grid-template-columns:repeat(3,1fr);}
  }