:root{
    --paper:#EFEDE6;
    --paper-raised:#FAF9F5;
    --white:#FFFFFF;
    --ink:#1C1C22;
    --ink-soft:#5B5B66;
    --hair:#D8D5C9;
    --kelp:#9F8D1F;
    --kelp-dark:#7A6C18;
    --kelp-tint:#F3EFDC;
    --cc:#25247D;
    --cc-dark:#1B1A5E;
    --cc-tint:#E3E2F2;
    --done:#3F6B4A;
    --done-tint:#E1EBE1;
    --prog:#B4791F;
    --prog-tint:#F3E6D2;
    --pending:#5C6F8A;
    --pending-tint:#DFE4EC;
    --unmarked:#8B8579;
    --unmarked-tint:#EAE7DE;
    --leave:#7A6E85;
    --leave-tint:#E7E2EC;
    --danger:#A13F3F;
  }
  *{box-sizing:border-box;}
  body{
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:'IBM Plex Sans', sans-serif;
    -webkit-font-smoothing:antialiased;
  }
  a{color:inherit;}
  button{font-family:inherit;}

  /* ---- Masthead ---- */
  .masthead{
    border-bottom:2px solid var(--ink);
    padding:26px 32px 16px;
    background:var(--paper);
  }
  .masthead-top{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    flex-wrap:wrap;
    gap:14px;
  }
  .masthead h1{
    font-family:'Fraunces', serif;
    font-weight:600;
    font-size:clamp(26px,4vw,38px);
    margin:0;
    letter-spacing:-0.01em;
    line-height:1.05;
  }
  .masthead .sub{
    font-size:13px;
    color:var(--ink-soft);
    margin-top:6px;
    max-width:52ch;
  }
  .add-btn{
    background:var(--ink);
    color:var(--paper);
    border:none;
    padding:11px 18px;
    border-radius:3px;
    font-size:13.5px;
    font-weight:600;
    cursor:pointer;
    white-space:nowrap;
  }
  .add-btn:hover{background:#233327;}

  .stats{
    display:flex;
    border-top:1px solid var(--hair);
    margin-top:16px;
    flex-wrap:wrap;
  }
  .stat{flex:1 1 130px; padding:13px 18px; border-right:1px solid var(--hair);}
  .stat:last-child{border-right:none;}
  .stat .n{font-family:'Fraunces', serif; font-size:24px; font-weight:600;}
  .stat .l{font-size:11.5px; color:var(--ink-soft); margin-top:2px;}

  .storage-note{
    font-size:11.5px;
    color:var(--ink-soft);
    padding:8px 32px;
    background:var(--paper-raised);
    border-bottom:1px solid var(--hair);
  }

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

  .rail{
    border-right:1px solid var(--hair);
    padding:22px 20px;
    position:sticky; top:0; align-self:start; max-height:100vh; overflow-y:auto;
  }
  @media (max-width:820px){ .rail{position:static; border-right:none; border-bottom:1px solid var(--hair); max-height:none;} }
  .rail h2{font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-soft); margin:0 0 10px; font-weight:600;}
  .rail-group{margin-bottom:22px;}
  .agency-btn{display:flex; justify-content:space-between; align-items:center; width:100%; text-align:left; padding:9px 10px; background:none; border:1px solid transparent; border-radius:3px; font-size:13.5px; cursor:pointer; color:var(--ink); margin-bottom:4px;}
  .agency-btn .count{font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--ink-soft);}
  .agency-btn:hover{background:var(--paper-raised);}
  .agency-btn.active{background:var(--paper-raised); border-color:var(--hair); font-weight:600;}
  .agency-btn .dot{display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:8px;}
  select, input[type=text], input[type=date], textarea{
    width:100%; font-family:'IBM Plex Sans',sans-serif; font-size:13px; padding:8px 9px;
    border:1px solid var(--hair); border-radius:3px; background:var(--white); color:var(--ink);
  }
  input::placeholder, textarea::placeholder{color:#9AA298;}
  .clear-btn{margin-top:14px; font-size:12px; color:var(--ink-soft); text-decoration:underline; background:none; border:none; cursor:pointer; padding:0;}

  /* ---- Log ---- */
  .log{padding:22px 30px 60px;}
  .log-head{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:16px; flex-wrap:wrap; gap:8px;}
  .log-head h2{font-family:'Fraunces',serif; font-size:20px; font-weight:600; margin:0;}
  .result-count{font-size:12px; color:var(--ink-soft); font-family:'IBM Plex Mono',monospace;}

  .month-group{margin:0;}
  .month-group:first-child .month-divider{margin-top:0;}
  .month-divider{
    display:flex; align-items:center; gap:8px; width:100%; text-align:left;
    font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.08em; text-transform:uppercase;
    color:var(--ink-soft); background:none; border:none; border-top:1px solid var(--hair);
    padding:12px 0 8px; margin:22px 0 6px; cursor:pointer;
  }
  .month-divider:hover{color:var(--ink);}
  .month-divider .chevron{font-size:10px; width:10px; display:inline-block;}
  .month-divider .month-count{color:#9AA298; font-weight:400;}
  .month-body.collapsed{display:none;}

  .entry{display:grid; grid-template-columns:86px 1fr auto; gap:16px; padding:14px 0; border-bottom:1px solid var(--hair);}
  @media (max-width:680px){ .entry{grid-template-columns:1fr; } }
  .entry .date{font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--ink-soft); padding-top:2px;}
  .entry .date .dow{display:block; font-size:10.5px; color:#9AA298;}
  .entry-body{min-width:0;}
  .entry-actions{display:flex; flex-direction:row; gap:6px; align-items:flex-start;}
  @media (max-width:680px){ .entry-actions{flex-direction:row;} }
  /* Edit/Delete use .btn-pill (defined below) */

  .entry-top{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:7px;}
  .chip{font-size:10.5px; font-weight:600; padding:3px 8px; border-radius:20px; letter-spacing:.02em; white-space:nowrap;}
  .chip.kelp{background:var(--kelp-tint); color:var(--kelp);}
  .chip.cc{background:var(--cc-tint); color:var(--cc);}
  .chip.client{background:var(--paper-raised); color:var(--ink-soft); border:1px solid var(--hair); font-weight:500;}
  .status-pill{font-size:10.5px; font-weight:600; padding:3px 9px; border-radius:20px; margin-left:auto;}
  .status-pill.done{background:var(--done-tint); color:var(--done);}
  .status-pill.prog{background:var(--prog-tint); color:var(--prog);}
  .status-pill.pending{background:var(--pending-tint); color:var(--pending);}
  .status-pill.unmarked{background:var(--unmarked-tint); color:var(--unmarked);}
  .status-pill.leave{background:var(--leave-tint); color:var(--leave);}

  .tasks{margin:0 0 6px; padding-left:18px; font-size:14px; line-height:1.5;}
  .tasks li{margin-bottom:2px;}
  .meta-row{font-size:12px; color:var(--ink-soft); line-height:1.6;}
  .meta-row .label{color:#9AA298;}
  .note{font-style:italic;}

  .deliv-wrap{display:flex; flex-wrap:wrap; gap:6px; margin:6px 0 2px;}
  .deliv-btn{
    display:inline-flex; align-items:center; gap:4px;
    font-size:11.5px; padding:4px 10px; border-radius:20px;
    background:var(--white); border:1px solid var(--hair); color:var(--ink);
    text-decoration:none; cursor:pointer;
  }
  .deliv-btn:hover{border-color:var(--ink);}
  .deliv-btn.static{cursor:default; color:var(--ink-soft);}
  .deliv-btn .arrow{font-size:10px;}

  .empty-state{padding:40px 0; text-align:center; color:var(--ink-soft); font-size:14px;}

  footer{padding:20px 32px 40px; font-size:11.5px; color:var(--ink-soft); border-top:1px solid var(--hair);}

  /* ---- Modal ---- */
  .modal-overlay{
    position:fixed; inset:0; background:rgba(22,35,28,0.45);
    display:none; align-items:flex-start; justify-content:center;
    padding:40px 16px; overflow-y:auto; z-index:50;
  }
  .modal-overlay.open{display:flex;}
  .modal{
    background:var(--paper-raised); border:1px solid var(--hair); border-radius:6px;
    width:100%; max-width:640px; padding:26px 28px 28px;
  }
  .modal h3{font-family:'Fraunces',serif; font-size:21px; margin:0 0 4px; font-weight:600;}
  .modal .modal-sub{font-size:12.5px; color:var(--ink-soft); margin-bottom:18px;}
  .field{margin-bottom:14px;}
  .field label{display:block; font-size:11.5px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-soft); margin-bottom:5px;}
  .field-row{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
  .dyn-row{display:flex; gap:8px; margin-bottom:6px; align-items:center;}
  .dyn-row input{flex:1;}
  .dyn-row .remove-row{background:none; border:none; color:var(--ink-soft); cursor:pointer; font-size:16px; line-height:1; padding:4px 6px;}
  .dyn-row .remove-row:hover{color:var(--danger);}
  .add-row-btn{background:none; border:1px dashed var(--hair); color:var(--ink-soft); font-size:12px; padding:6px 10px; border-radius:3px; cursor:pointer; width:100%; text-align:left;}
  .add-row-btn:hover{border-color:var(--ink); color:var(--ink);}
  .deliv-field-row{display:grid; grid-template-columns:1.3fr 1fr auto; gap:8px; margin-bottom:6px; align-items:center;}

  /* ---- Client tag picker ---- */
  .tag-picker{
    position:relative;
    display:flex; flex-wrap:wrap; gap:6px; align-items:center;
    border:1px solid var(--hair); border-radius:3px; background:var(--white);
    padding:7px 8px; min-height:40px;
  }
  .tag-picker:focus-within{border-color:var(--cc); box-shadow:0 0 0 3px rgba(37,36,125,.12);}
  #clientTags{display:contents;} /* chips participate in the parent's flex-wrap layout, not this wrapper's own box */
  .tag-chip{
    display:inline-flex; align-items:center; gap:5px;
    background:var(--paper-raised); border:1px solid var(--hair); border-radius:20px;
    font-size:12.5px; padding:4px 6px 4px 11px; white-space:nowrap;
  }
  .tag-chip .tag-remove{
    background:none; border:none; cursor:pointer; color:var(--ink-soft); font-size:14px;
    line-height:1; padding:2px 4px; border-radius:50%;
  }
  .tag-chip .tag-remove:hover{color:var(--danger); background:#FBEFEF;}
  .tag-input{
    border:none !important; outline:none; flex:1 1 120px; min-width:120px; padding:4px 2px !important;
    font-size:13.5px; background:transparent;
  }
  .tag-suggestions{
    position:absolute; left:0; right:0; top:calc(100% + 4px); z-index:20;
    background:var(--white); border:1px solid var(--hair); border-radius:6px;
    box-shadow:0 10px 24px -8px rgba(20,20,30,.25);
    max-height:220px; overflow-y:auto; display:none;
  }
  .tag-suggestions.open{display:block;}
  .tag-suggestion{
    padding:9px 12px; font-size:13.5px; cursor:pointer;
  }
  .tag-suggestion:hover, .tag-suggestion.active{background:var(--paper-raised);}
  .tag-suggestion.create-new{color:var(--cc-dark); font-weight:600;}
  .modal-actions{display:flex; justify-content:space-between; align-items:center; margin-top:22px; padding-top:16px; border-top:1px solid var(--hair);}
  .save-btn{background:var(--ink); color:var(--paper); border:none; padding:10px 20px; border-radius:3px; font-size:13.5px; font-weight:600; cursor:pointer;}
  .save-btn:hover{background:#233327;}
  .cancel-btn{background:none; border:none; color:var(--ink-soft); font-size:13px; cursor:pointer; text-decoration:underline;}
  .form-error{font-size:12px; color:var(--danger); margin-top:-6px; margin-bottom:12px;}

  /* ---- Login gate (modern) ---- */
  .login-screen{
    position:fixed; inset:0;
    background:
      radial-gradient(600px 500px at 12% 10%, rgba(159,141,31,.16), transparent 60%),
      radial-gradient(600px 500px at 88% 90%, rgba(37,36,125,.16), transparent 60%),
      var(--paper);
    display:flex; align-items:center; justify-content:center;
    z-index:100; padding:20px;
  }
  .login-card{
    position:relative;
    background:var(--white);
    border-radius:18px;
    width:100%; max-width:380px; padding:40px 36px 32px;
    box-shadow:0 30px 70px -20px rgba(20,20,30,.28), 0 2px 8px rgba(20,20,30,.06);
  }
  .login-card::before{
    content:"";
    position:absolute; top:0; left:20px; right:20px; height:4px; border-radius:0 0 4px 4px;
    background:linear-gradient(90deg, var(--kelp) 0 50%, var(--cc) 50% 100%);
  }
  .login-card .mark{
    font-family:'Fraunces',serif; font-weight:600; font-size:25px; margin:0 0 6px;
    text-align:center; letter-spacing:-0.01em;
  }
  .login-card .mark-sub{font-size:13px; color:var(--ink-soft); margin-bottom:28px; text-align:center; line-height:1.5;}
  .login-field{margin-bottom:16px; position:relative;}
  .login-field label{display:block; font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-soft); margin-bottom:6px;}
  .login-field select, .login-field input{
    border-radius:10px; padding:11px 13px; border:1.5px solid var(--hair);
    transition:border-color .15s, box-shadow .15s;
  }
  .login-field select:focus, .login-field input:focus{
    outline:none; border-color:var(--cc); box-shadow:0 0 0 3px rgba(37,36,125,.12);
  }
  .pw-toggle{
    position:absolute; right:10px; top:32px; background:none; border:none; cursor:pointer;
    color:var(--ink-soft); padding:4px; display:flex; align-items:center; border-radius:5px;
  }
  .pw-toggle:hover{color:var(--ink); background:var(--paper-raised);}
  .pw-field{position:relative;}
  .pw-field input{padding-right:38px !important;}
  .pw-field.small .pw-toggle{top:28px; padding:3px;}
  .login-btn{
    width:100%; color:#fff; border:none;
    background:linear-gradient(90deg, var(--kelp-dark), var(--cc-dark));
    padding:13px; border-radius:10px; font-size:14px; font-weight:700; cursor:pointer; margin-top:8px;
    letter-spacing:.01em;
    box-shadow:0 8px 20px -8px rgba(37,36,125,.45);
    transition:transform .12s, box-shadow .12s;
  }
  .login-btn:hover{transform:translateY(-1px); box-shadow:0 12px 24px -8px rgba(37,36,125,.55);}
  .login-btn:active{transform:translateY(0);}
  .login-error{font-size:12px; color:var(--danger); margin-top:10px; display:none; text-align:center;}
  .login-note{
    font-size:10.5px; color:var(--ink-soft); margin-top:22px; padding:10px 12px;
    background:var(--paper-raised); border-radius:8px; line-height:1.5; text-align:center;
  }
  .who-badge{
    display:flex; align-items:center; gap:8px; font-size:12px; color:var(--ink-soft);
  }
  .btn-pill{
    background:var(--white); border:1px solid var(--hair); color:var(--ink-soft);
    border-radius:20px; font-size:11.5px; font-weight:600; padding:5px 12px; cursor:pointer;
    transition:background .12s, color .12s, border-color .12s;
  }
  .btn-pill:hover{background:var(--paper-raised); color:var(--ink); border-color:var(--ink-soft);}
  .btn-pill.danger:hover{color:var(--danger); border-color:var(--danger); background:#FBEFEF;}
  .btn-pill.whatsapp-btn:hover{color:#1DA851; border-color:#1DA851; background:#EAF9EF;}
  .btn-pill.whatsapp-btn:hover{color:#1DA851; border-color:#1DA851; background:#EAF9EF;}

  .top-agency-logos{display:flex; gap:6px; align-items:center;}
  .top-agency-logos img{width:30px; height:30px; border-radius:7px; box-shadow:0 0 0 1px rgba(0,0,0,.08);}

  .agency-link-btn{
    display:inline-flex; align-items:center; gap:4px;
    font-size:11.5px; padding:4px 10px; border-radius:20px;
    text-decoration:none; cursor:pointer; font-weight:600; border:none;
  }
  .agency-link-btn.sk{background:var(--kelp-tint);color:var(--kelp-dark);}
  .agency-link-btn.cc{background:var(--cc-tint);color:var(--cc-dark);}
  .agency-link-btn.both{background:var(--paper-raised); color:var(--ink); border:1px solid var(--hair);}

  /* ---- Brand marks ---- */
  .brand-strip{height:4px; display:flex; margin-top:16px;}
  .brand-strip span{flex:1;}
  .brand-strip .s1{background:var(--kelp);}
  .brand-strip .s2{background:var(--cc);}
  .logo-icon{
    width:22px; height:22px; border-radius:5px; object-fit:cover; flex-shrink:0;
    box-shadow:0 0 0 1px rgba(0,0,0,.06);
  }
  .logo-icon.sm{width:16px; height:16px; border-radius:4px;}
  .chip.kelp, .chip.cc{display:inline-flex; align-items:center; gap:5px;}
  .login-logos{display:flex; gap:14px; justify-content:center; margin-bottom:18px;}
  .login-logos img{width:46px; height:46px; border-radius:9px; box-shadow:0 0 0 1px rgba(0,0,0,.08);}

  /* ---- Calendar picker ---- */
  .cal-header{display:flex; align-items:center; justify-content:space-between; margin-bottom:8px;}
  .cal-header button{background:none; border:1px solid var(--hair); border-radius:3px; width:24px; height:24px; cursor:pointer; color:var(--ink-soft); font-size:12px; line-height:1;}
  .cal-header button:hover{background:var(--paper-raised); color:var(--ink);}
  .cal-month-label{font-size:12.5px; font-weight:600;}
  .cal-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:2px;}
  .cal-dow{font-size:9.5px; color:#9AA298; text-align:center; padding-bottom:3px; font-family:'IBM Plex Mono',monospace;}
  .cal-day{
    position:relative; aspect-ratio:1; display:flex; align-items:center; justify-content:center;
    font-size:11px; border-radius:4px; cursor:default; color:var(--ink-soft);
  }
  .cal-day.empty{visibility:hidden;}
  .cal-day.has-entry{cursor:pointer; color:var(--ink); font-weight:600;}
  .cal-day.has-entry:hover{background:var(--paper-raised);}
  .cal-day.today{outline:1px solid var(--ink); outline-offset:-1px;}
  .cal-day .dot-row{position:absolute; bottom:2px; display:flex; gap:1.5px;}
  .cal-day .dot-row span{width:3.5px; height:3.5px; border-radius:50%;}
  .cal-jump{font-size:11px; color:var(--ink-soft); text-decoration:underline; background:none; border:none; cursor:pointer; padding:0; margin-top:8px;}
  .entry.jump-highlight{background:var(--paper-raised); transition:background 1.8s ease;}

  .toast{
    position:fixed; bottom:20px; left:50%; transform:translateX(-50%);
    background:var(--ink); color:var(--paper); font-size:12.5px; padding:10px 18px;
    border-radius:20px; opacity:0; pointer-events:none; transition:opacity .25s;
    z-index:60;
  }
  .toast.show{opacity:1;}

/* Standalone login page (server-rendered, not an overlay) */
body.login-standalone{
  margin:0; min-height:100vh;
}
body.login-standalone .login-screen{
  position:static; min-height:100vh; display:flex; align-items:center; justify-content:center;
}