:root{
    --bg:#0E1B20;
    --bg-panel:#122730;
    --card:#1A323D;
    --card-hi:#22404D;
    --bronze:#0EA5D6;
    --bronze-light:#6FD3EF;
    --rope:#CFE3E9;
    --cream:#F3F8F9;
    --ink:#052732;
    --patina:#57C98A;
    --patina-dim:#2F7A57;
    --rust:#E2604B;
    --rust-dim:#8A3527;
    --line: rgba(207,227,233,0.14);
    --line-strong: rgba(207,227,233,0.30);
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;max-width:100%;overflow-x:hidden;}
  body{
    background:
      radial-gradient(ellipse at top left, rgba(14,165,214,0.12), transparent 55%),
      radial-gradient(ellipse at bottom right, rgba(111,211,239,0.05), transparent 50%),
      var(--bg);
    color:var(--cream);
    font-family:'Inter',sans-serif;
    min-height:100vh;
    -webkit-font-smoothing:antialiased;
  }
  ::selection{background:var(--bronze);color:var(--ink);}
  a{color:var(--bronze-light);}
  .wrap{max-width:840px;margin:0 auto;padding:28px 20px 80px;}

  header.top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 16px;margin-bottom:8px;}
  .brandgroup{display:flex;align-items:center;gap:16px;min-width:0;}
  .bell-mark{flex:none;width:46px;height:46px;}
  .bell-mark svg{width:100%;height:100%;display:block;}
  h1.brand{font-family:'Fraunces',serif;font-weight:700;font-size:1.3rem;line-height:1.2;letter-spacing:0.1px;margin:0;color:var(--cream);}
  .brand-sub{font-family:'IBM Plex Mono',monospace;font-size:0.72rem;color:var(--bronze-light);text-transform:uppercase;letter-spacing:0.14em;margin-top:2px;}
  .who{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;font-size:0.85rem;color:var(--rope);margin-left:auto;}
  .who-name{white-space:nowrap;}
  .pill{padding:4px 11px;border-radius:100px;border:1px solid var(--line-strong);font-family:'IBM Plex Mono',monospace;font-size:0.72rem;letter-spacing:0.03em;white-space:nowrap;}
  .pill.admin{border-color:var(--patina);color:var(--patina);}
  .linkbtn{background:none;border:none;color:var(--bronze-light);font-family:'Inter',sans-serif;font-size:0.82rem;cursor:pointer;text-decoration:underline;text-underline-offset:3px;padding:0;white-space:nowrap;}
  .linkbtn:hover{color:var(--rope);}

  hr.rule{border:none;border-top:1px solid var(--line);margin:22px 0;}

  .login-shell{min-height:80vh;display:flex;align-items:center;justify-content:center;padding:20px;}
  .login-card{background:var(--bg-panel);border:1px solid var(--line);border-radius:14px;padding:38px 34px;width:100%;max-width:380px;}
  .login-card .bell-mark{width:52px;height:52px;margin:0 auto 18px;}
  .login-card h2{font-family:'Fraunces',serif;font-weight:600;font-size:1.35rem;margin:0 0 4px;text-align:center;}
  .login-card p.lede{color:var(--rope);opacity:0.8;font-size:0.86rem;margin:0 0 26px;line-height:1.5;text-align:center;}
  label{display:block;font-size:0.78rem;color:var(--bronze-light);text-transform:uppercase;letter-spacing:0.08em;margin-bottom:7px;font-family:'IBM Plex Mono',monospace;}
  select, input[type=text], input[type=password], input[type=date], input[type=time]{
    width:100%;background:var(--card);border:1px solid var(--line-strong);color:var(--cream);
    padding:11px 13px;border-radius:8px;font-family:'Inter',sans-serif;font-size:0.95rem;outline:none;
  }
  select:focus, input:focus{border-color:var(--bronze);box-shadow:0 0 0 3px rgba(14,165,214,0.18);}
  .row{display:flex;gap:12px;flex-wrap:wrap;}
  .row > *{flex:1;min-width:140px;}
  .field{margin-bottom:18px;}
  .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--bronze);color:var(--ink);border:none;padding:11px 20px;border-radius:8px;font-weight:600;font-size:0.92rem;cursor:pointer;font-family:'Inter',sans-serif;transition:transform .12s ease, background .12s ease;}
  .btn:hover{background:var(--bronze-light);transform:translateY(-1px);}
  .btn.secondary{background:transparent;border:1px solid var(--line-strong);color:var(--rope);}
  .btn.secondary:hover{border-color:var(--bronze);color:var(--bronze-light);background:transparent;}
  .btn.danger{background:var(--rust);color:var(--cream);}
  .btn.danger:hover{background:#C25532;}
  .btn.small{padding:7px 13px;font-size:0.8rem;}
  .btn.full{width:100%;}
  .btn:disabled{opacity:0.4;cursor:not-allowed;transform:none;}
  .msg{font-size:0.85rem;padding:9px 12px;border-radius:8px;margin-top:14px;}
  .msg.err{background:rgba(226,96,75,0.18);color:#F6C9BC;border:1px solid var(--rust-dim);}
  .msg.ok{background:rgba(87,201,138,0.15);color:#C8F0DA;border:1px solid var(--patina-dim);}
  .seedbox{background:var(--card);border:1px dashed var(--line-strong);border-radius:10px;padding:12px 14px;margin-top:20px;font-family:'IBM Plex Mono',monospace;font-size:0.76rem;color:var(--rope);line-height:1.6;}
  .seedbox b{color:var(--bronze-light);}

  .tabs{display:flex;gap:6px;margin-bottom:22px;border-bottom:1px solid var(--line);}
  .tab{background:none;border:none;color:var(--rope);opacity:0.6;padding:10px 4px;margin-right:18px;font-family:'Inter',sans-serif;font-size:0.9rem;font-weight:600;cursor:pointer;border-bottom:2px solid transparent;}
  .tab.active{opacity:1;color:var(--bronze-light);border-bottom-color:var(--bronze);}

  .monthnav{display:flex;align-items:center;gap:14px;margin-bottom:18px;}
  .monthnav h3{font-family:'Fraunces',serif;font-size:1.2rem;margin:0;flex:1;font-weight:600;text-transform:capitalize;}
  .iconbtn{background:var(--card);border:1px solid var(--line-strong);color:var(--rope);width:34px;height:34px;border-radius:8px;cursor:pointer;font-size:1rem;display:flex;align-items:center;justify-content:center;}
  .iconbtn:hover{border-color:var(--bronze);color:var(--bronze-light);}

  .event{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px 18px;margin-bottom:12px;position:relative;}
  .event.draft{border-style:dashed;border-color:var(--line-strong);opacity:0.92;}
  .event.past{opacity:0.5;}
  .event-top{display:flex;align-items:flex-start;gap:14px;}
  .event-date{flex:none;width:56px;text-align:center;font-family:'IBM Plex Mono',monospace;background:var(--bg-panel);border-radius:9px;padding:8px 4px;}
  .event-date .dow{font-size:0.62rem;text-transform:uppercase;color:var(--bronze-light);letter-spacing:0.06em;}
  .event-date .dnum{font-size:1.25rem;font-weight:600;color:var(--cream);line-height:1.1;}
  .event-date .mon{font-size:0.62rem;color:var(--rope);opacity:0.7;text-transform:uppercase;}
  .event-body{flex:1;min-width:0;}
  .event-label{font-family:'Fraunces',serif;font-weight:600;font-size:1.06rem;margin:0 0 2px;}
  .event-meta{font-family:'IBM Plex Mono',monospace;font-size:0.74rem;color:var(--rope);opacity:0.75;}
  .event-note{font-size:0.82rem;color:var(--bronze-light);margin-top:2px;font-style:italic;}
  .badge{display:inline-block;font-family:'IBM Plex Mono',monospace;font-size:0.65rem;text-transform:uppercase;letter-spacing:0.06em;padding:2px 8px;border-radius:100px;margin-left:8px;vertical-align:middle;}
  .badge.draft{background:rgba(207,227,233,0.12);color:var(--rope);}
  .slots{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px;}
  .reserves-label{flex-basis:100%;font-family:'IBM Plex Mono',monospace;font-size:0.68rem;text-transform:uppercase;letter-spacing:0.08em;color:var(--rope);opacity:0.6;margin-top:6px;}
  .slot{font-family:'IBM Plex Mono',monospace;font-size:0.78rem;padding:6px 11px;border-radius:100px;border:1px solid var(--line-strong);display:flex;align-items:center;gap:6px;}
  .slot.filled{background:rgba(87,201,138,0.14);border-color:var(--patina-dim);color:var(--rope);}
  .slot.mine{background:var(--patina);border-color:var(--patina);color:var(--ink);font-weight:600;}
  .slot.open{background:transparent;color:var(--rope);opacity:0.55;border-style:dashed;}
  .slot .x{cursor:pointer;opacity:0.7;font-weight:700;}
  .slot .x:hover{opacity:1;}
  .slot-reserve{border-color:var(--bronze);}
  .slot-reserve.filled{background:rgba(14,165,214,0.14);}
  .slot-reserve.mine{background:var(--bronze);color:var(--ink);}
  .event-actions{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap;}
  .full-tag{font-family:'IBM Plex Mono',monospace;font-size:0.72rem;color:var(--rust);text-transform:uppercase;letter-spacing:0.05em;}
  .admin-controls{display:flex;gap:6px;margin-top:12px;padding-top:12px;border-top:1px dashed var(--line);flex-wrap:wrap;}

  .empty{color:var(--rope);opacity:0.6;font-size:0.9rem;padding:30px 0;text-align:center;font-family:'Fraunces',serif;font-style:italic;}

  .panel{background:var(--bg-panel);border:1px solid var(--line);border-radius:12px;padding:20px;margin-bottom:18px;}
  .panel h3{font-family:'Fraunces',serif;margin-top:0;font-weight:600;font-size:1.1rem;}
  .member-list{display:flex;flex-direction:column;gap:8px;margin-top:14px;}
  .member-row{background:var(--card);border:1px solid var(--line-strong);padding:9px 13px;border-radius:9px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:0.86rem;}
  .member-row .uname{font-family:'IBM Plex Mono',monospace;color:var(--bronze-light);font-size:0.78rem;}
  .member-row .spacer{flex:1;}
  .member-row .x{cursor:pointer;color:var(--rust);font-weight:700;}
  .draftlist{margin-top:14px;}
  .draft-row{display:grid;grid-template-columns:110px 1fr 90px 34px;gap:8px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line);}
  .draft-row select, .draft-row input{padding:7px 9px;font-size:0.83rem;}
  .helptext{font-size:0.82rem;color:var(--rope);opacity:0.7;line-height:1.5;margin-top:4px;}
  footer.foot{margin-top:50px;text-align:center;color:var(--rope);opacity:0.35;font-size:0.75rem;font-family:'IBM Plex Mono',monospace;}

  .modal-backdrop{position:fixed;inset:0;z-index:60;background:rgba(5,20,26,0.74);display:flex;align-items:center;justify-content:center;padding:20px;}
  .modal{background:var(--bg-panel);border:1px solid var(--line-strong);border-radius:14px;padding:26px 24px;width:100%;max-width:400px;max-height:90vh;overflow-y:auto;}
  .modal h3{font-family:'Fraunces',serif;font-weight:600;font-size:1.15rem;margin:0 0 6px;}
  .modal .steplabel{font-family:'IBM Plex Mono',monospace;font-size:0.7rem;text-transform:uppercase;letter-spacing:0.1em;color:var(--bronze-light);margin-bottom:8px;}
  .modal .field{margin-bottom:16px;}
  .modal-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:20px;flex-wrap:wrap;}
  .fieldnote{font-size:0.78rem;margin-top:6px;min-height:1.15em;line-height:1.3;}
  .fieldnote.err{color:#F6C9BC;}
  .fieldnote.ok{color:#C8F0DA;}
  input.bad{border-color:var(--rust);}
  input.good{border-color:var(--patina);}

  /* Replaces what used to be inline style="" attributes. Those are blocked by the
     Content-Security-Policy (style-src has no 'unsafe-inline'), so every rule lives here. */
  .row-narrow{max-width:420px;}
  .role-select{width:auto;padding:5px 8px;font-size:0.78rem;}
  .draft-remove{cursor:pointer;color:var(--rust);}
  .btn-row{margin-top:16px;display:flex;gap:8px;}
  .field-spaced{margin-top:16px;}

  @media (max-width:520px){
    .draft-row{grid-template-columns:1fr;gap:4px;}
    .event-top{flex-direction:column;}
    .event-date{width:auto;display:flex;gap:6px;align-items:baseline;padding:6px 10px;}
    .wrap{padding:20px 14px 70px;}
    header.top{gap:10px 12px;}
    .who{font-size:0.8rem;gap:6px 8px;}
    .tabs{overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch;}
    .tab{margin-right:14px;white-space:nowrap;}
  }