@import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@600;700;800&family=Work+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root{
  --paper:#EDEEEA;
  --surface:#FFFFFF;
  --surface-2:#F5F6F3;
  --ink:#171D1B;
  --muted:#5B655F;
  --faint:#8B948E;
  --line:#DADEDA;
  --line-strong:#C4C9C3;
  --accent:#2C4A7C;
  --accent-ink:#1B3157;
  --accent-tint:#E4EAF3;
  --focus:#2C4A7C;
  --danger:#B23A2E;

  --st-new-fg:#5B6472;   --st-new-bg:#E7E9ED;
  --st-review-fg:#92620B; --st-review-bg:#FBEBC9;
  --st-approved-fg:#1E7A46; --st-approved-bg:#DEF2E4;
  --st-revise-fg:#B23A2E; --st-revise-bg:#FBE1DD;
  --st-active-fg:#1E7A46; --st-active-bg:#DEF2E4;
  --st-hold-fg:#92620B; --st-hold-bg:#FBEBC9;
  --st-done-fg:#5B6472; --st-done-bg:#E7E9ED;

  --shadow:0 1px 2px rgba(23,29,27,.06), 0 6px 20px -8px rgba(23,29,27,.12);
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Work Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;}
.wrap{max-width:920px; margin:0 auto; padding:40px 24px 80px;}
.wrap.narrow{max-width:420px;}

.eyebrow{
  font-family:'IBM Plex Mono', monospace;
  font-size:11.5px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--faint); margin:0 0 8px;
}
h1{
  font-family:'Big Shoulders Display', sans-serif;
  font-weight:800;
  font-size:clamp(28px,5vw,46px);
  line-height:1;
  margin:0;
  text-wrap:balance;
}
.sub{font-size:14px; color:var(--muted); margin:10px 0 0; max-width:60ch;}

.top-row{display:flex; justify-content:space-between; align-items:flex-start; gap:16px; flex-wrap:wrap; margin-bottom:8px;}
.logout-link{font-family:'IBM Plex Mono', monospace; font-size:12px; color:var(--muted); text-decoration:none; border:1px solid var(--line); border-radius:100px; padding:6px 12px; white-space:nowrap;}
.logout-link:hover{border-color:var(--line-strong); color:var(--ink);}

.privacy{
  display:flex; align-items:flex-start; gap:10px;
  background:var(--accent-tint); border:1px solid var(--line);
  border-radius:10px; padding:12px 14px; margin:22px 0 26px;
  font-size:12.5px; color:var(--accent-ink);
}

.flash{
  border-radius:10px; padding:10px 14px; margin:0 0 18px; font-size:13px;
}
.flash.error{background:var(--st-revise-bg); color:var(--st-revise-fg); border:1px solid var(--st-revise-fg);}
.flash.ok{background:var(--st-approved-bg); color:var(--st-approved-fg); border:1px solid var(--st-approved-fg);}

.stats{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:22px;}
.stat{background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:10px 14px; display:flex; align-items:baseline; gap:7px;}
.stat b{font-family:'IBM Plex Mono', monospace; font-size:16px; font-variant-numeric:tabular-nums;}
.stat span{font-size:12.5px; color:var(--muted);}

.toolbar{display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:16px;}
.search{flex:1; min-width:180px;}
.search input{width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:9px; background:var(--surface); color:var(--ink); font-family:'Work Sans', sans-serif; font-size:13.5px;}
.chips{display:flex; gap:6px; flex-wrap:wrap;}
.chip{font-family:'IBM Plex Mono', monospace; font-size:11.5px; padding:7px 11px; border-radius:100px; border:1px solid var(--line); background:var(--surface); color:var(--muted); text-decoration:none; white-space:nowrap; display:inline-block;}
.chip:hover{border-color:var(--line-strong);}
.chip.active{background:var(--ink); color:var(--paper); border-color:var(--ink);}
.addbtn{font-family:'Work Sans', sans-serif; font-weight:600; font-size:13.5px; padding:10px 16px; border-radius:9px; border:1px solid var(--accent); background:var(--accent); color:#fff; cursor:pointer; white-space:nowrap; text-decoration:none; display:inline-block;}
.addbtn:hover{background:var(--accent-ink); border-color:var(--accent-ink);}

.panel{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:18px; margin-bottom:20px; box-shadow:var(--shadow);}
.panel h2, .panel h3{margin:0 0 14px; font-size:14px; font-weight:700; font-family:'Work Sans', sans-serif;}
.grid{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
.grid .full{grid-column:1 / -1;}
label{display:block; font-size:11.5px; font-weight:600; color:var(--muted); margin-bottom:5px;}
input[type=text], input[type=url], input[type=date], input[type=password], select{
  width:100%; padding:9px 10px; border:1px solid var(--line); border-radius:8px;
  background:var(--surface-2); color:var(--ink); font-family:'Work Sans', sans-serif; font-size:13.5px;
}
input:focus, select:focus{outline:2px solid var(--focus); outline-offset:1px;}
.panel-actions{display:flex; justify-content:flex-end; gap:8px; margin-top:14px;}
.btn{font-family:'Work Sans', sans-serif; font-size:13px; font-weight:600; padding:8px 14px; border-radius:8px; cursor:pointer; border:1px solid var(--line); background:var(--surface); color:var(--ink); text-decoration:none; display:inline-block;}
.btn:hover{border-color:var(--line-strong);}
.btn.primary{background:var(--accent); border-color:var(--accent); color:#fff;}
.btn.primary:hover{background:var(--accent-ink); border-color:var(--accent-ink);}
.btn.danger{color:var(--danger); border-color:var(--danger);}
.btn.danger:hover{background:var(--st-revise-bg);}

.list{display:flex; flex-direction:column; gap:8px;}
.row{display:grid; grid-template-columns:1fr auto; gap:14px; align-items:center; background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:14px 16px; transition:border-color .12s, box-shadow .12s;}
.row-link{display:contents;}
.row:hover{border-color:var(--accent); box-shadow:0 0 0 1px var(--accent);}
.row.compact{grid-template-columns:64px 1fr auto; padding:12px 14px;}
.main{min-width:0;}
.row-title{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:4px;}
.row-title strong{font-size:14.5px; font-weight:600; overflow-wrap:anywhere;}
.tag{font-family:'IBM Plex Mono', monospace; font-size:10.5px; letter-spacing:.03em; text-transform:uppercase; color:var(--accent-ink); background:var(--accent-tint); border-radius:5px; padding:2px 6px; white-space:nowrap;}
.meta-line{display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:12.5px; color:var(--muted);}
.meta-line a.open-link{font-family:'IBM Plex Mono', monospace; color:var(--accent); text-decoration:none; border-bottom:1px solid transparent;}
.meta-line a.open-link:hover{border-color:var(--accent);}
.date-col{font-family:'IBM Plex Mono', monospace; font-size:13px; color:var(--muted); font-variant-numeric:tabular-nums; line-height:1.2;}
.date-col b{display:block; font-size:16px; color:var(--ink);}

.side{display:flex; align-items:center; gap:8px;}
.status-select{
  -webkit-appearance:none; appearance:none;
  font-family:'IBM Plex Mono', monospace; font-size:11px; font-weight:600;
  border-radius:100px; padding:6px 26px 6px 12px; border:1px solid transparent; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M1 3l4 4 4-4' stroke='%235B655F' stroke-width='1.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 10px center;
}
.status-select.new, .status-select.done{color:var(--st-new-fg); background-color:var(--st-new-bg);}
.status-select.review, .status-select.hold{color:var(--st-review-fg); background-color:var(--st-review-bg);}
.status-select.approved, .status-select.active{color:var(--st-approved-fg); background-color:var(--st-approved-bg);}
.status-select.revise{color:var(--st-revise-fg); background-color:var(--st-revise-bg);}

.iconbtn-form{display:inline;}
.iconbtn{width:28px; height:28px; border-radius:7px; border:1px solid transparent; background:transparent; color:var(--faint); display:inline-flex; align-items:center; justify-content:center; cursor:pointer;}
.iconbtn:hover{background:var(--surface-2); color:var(--ink); border-color:var(--line);}
.iconbtn.danger:hover{color:var(--danger);}
.iconbtn svg{width:14px; height:14px;}

.empty{text-align:center; padding:60px 20px; color:var(--muted); border:1px dashed var(--line-strong); border-radius:14px; font-size:13.5px;}
footer{margin-top:36px; text-align:center; font-size:11.5px; color:var(--faint); font-family:'IBM Plex Mono', monospace;}

.login-box{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:28px; margin-top:60px; box-shadow:var(--shadow);}

@media (max-width:560px){
  .grid{grid-template-columns:1fr;}
  .row{grid-template-columns:1fr;}
  .row.compact{grid-template-columns:1fr;}
  .date-col{display:none;}
  .side{justify-content:flex-end;}
}