/* ==========================================================================
   Cobinar shared design system
   Squared corners everywhere except things that are inherently round
   (avatar, status dots, pill badges). Deeper orange. Hard offset shadows
   stay as the signature element, now paired with a hover lift + press-down
   so interactive elements feel tactile instead of flat.
   ========================================================================== */

:root {
  --orange:    #D9720F;
  --orange-d:  #B85D08;
  --orange-l:  #FBEAD3;
  --orange-g:  rgba(217,114,15,0.18);

  --white:  #FBF8F0;
  --off:    #EFE9DC;
  --s1:     #F2EEE4;
  --s2:     #E4DDCB;
  --s3:     #A79C86;
  --s4:     #6F6553;
  --s5:     #3A342A;
  --s6:     #14110F;

  --text:   #14110F;
  --text2:  #4A4438;
  --text3:  #857A64;
  --border: #14110F;

  --green:   #2F6B4F; --green-l: #E1EDE5;
  --red:     #B23A22; --red-l:   #F7E2DB;
  --amber:   #A9700B; --amber-l: #FBEBCB;

  --r:      0px;     /* square by default */
  --r-full: 999px;   /* avatar, dots, badges */
  --bw:     2px;
  --bw-lg:  3px;

  --shadow:    4px 4px 0 var(--border);
  --shadow-sm: 3px 3px 0 var(--border);
  --shadow-lg: 7px 7px 0 var(--border);

  --ease:   cubic-bezier(0.16,1,0.3,1);
  --spring: cubic-bezier(.34,1.56,.64,1);

  --pill-ov-bg:   #FBEBCB; --pill-ov-ic:   #A9700B;
  --pill-work-bg: #DCE6F2; --pill-work-ic: #2C5A96;
  --pill-page-bg: #DCEAE0; --pill-page-ic: #2B6B49;
  --pill-stor-bg: #E2DCEF; --pill-stor-ic: #5B4696;
  --pill-data-bg: #DDEAE6; --pill-data-ic: #1F6E63;
}

* { box-sizing: border-box; }
html, body { min-height: 100vh; margin: 0; font-family: 'Public Sans', system-ui, sans-serif; font-size: 15px; line-height: 1.65; color: var(--text); background: var(--off); -webkit-font-smoothing: antialiased; }
h1, h2, h3 { font-family: 'Space Grotesk', sans-serif; margin: 0; }
button, input, select { font-family: inherit; }
a { color: inherit; }
svg { display: block; }
.icon { width: 1em; height: 1em; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.icon.solid { fill: currentColor; stroke: none; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .62rem 1.15rem; border: var(--bw) solid var(--border); border-radius: var(--r);
  font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: .82rem;
  cursor: pointer; background: var(--white); color: var(--text);
  box-shadow: var(--shadow-sm);
  transition: transform .14s var(--ease), box-shadow .14s var(--ease), background .14s var(--ease), color .14s var(--ease);
}
.btn .icon { width: 15px; height: 15px; }
.btn:hover { transform: translate(-1px,-1px); box-shadow: 4px 4px 0 var(--border); }
.btn:active { transform: translate(2px,2px); box-shadow: 0 0 0 0 var(--border); }
.btn:disabled { opacity: .55; cursor: not-allowed; transform: none !important; box-shadow: var(--shadow-sm) !important; }
.btn-primary { background: var(--orange); color: var(--white); border-color: var(--border); }
.btn-primary:hover { background: var(--orange-d); }
.btn-secondary { background: var(--white); color: var(--text); }
.btn-secondary:hover { background: var(--s1); }
.btn-ghost { border-color: transparent; box-shadow: none; }
.btn-ghost:hover { background: var(--s1); transform: none; }
.btn-block { width: 100%; justify-content: center; }

/* ---------- Layout shell ---------- */
.app { display: flex; min-height: 100vh; }

.sidebar {
  width: 234px; flex-shrink: 0; background: var(--white); border-right: var(--bw) solid var(--border);
  display: flex; flex-direction: column; position: relative; z-index: 40;
  transition: transform .28s var(--ease);
}
.sb-brand { display: flex; align-items: center; gap: .55rem; padding: 1rem 1.1rem; border-bottom: var(--bw) solid var(--border); }
.sb-brand img { width: 26px; height: 26px; border-radius: 6px; }
.sb-brand-text { font-family: 'Space Grotesk', sans-serif; font-size: .95rem; font-weight: 700; letter-spacing: -.01em; }
.sb-close { display: none; margin-left: auto; }
.sb-nav { flex: 1; padding: .9rem .65rem; overflow-y: auto; }
.sb-section { font-family: 'IBM Plex Mono', monospace; font-size: .63rem; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: var(--text3); padding: 0 .5rem; margin: 1rem 0 .5rem; }
.sb-section:first-child { margin-top: 0; }
.sb-item {
  display: flex; align-items: center; gap: .65rem; width: 100%; padding: .5rem .6rem; border: none;
  background: none; border-radius: var(--r); font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: .85rem;
  color: var(--text2); cursor: pointer; text-align: left; text-decoration: none; margin-bottom: .15rem;
  transition: background .14s var(--ease), color .14s var(--ease), transform .14s var(--ease);
  position: relative;
}
.sb-item:hover { background: var(--s1); color: var(--text); transform: translateX(2px); }
.sb-item.active { background: var(--orange); color: var(--white); }
.sb-item.active .pill { background: rgba(255,255,255,.22) !important; color: var(--white) !important; }
.sb-item .pill { width: 26px; height: 26px; border-radius: 7px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sb-item .pill .icon { width: 15px; height: 15px; }
.sb-item .ext { margin-left: auto; opacity: .55; }
.sb-item .ext .icon { width: 13px; height: 13px; }
.sb-foot { padding: .9rem 1.1rem; border-top: var(--bw) solid var(--border); font-family: 'IBM Plex Mono', monospace; font-size: .68rem; color: var(--text3); display: flex; align-items: center; gap: .5rem; }

.dot { width: 7px; height: 7px; border-radius: var(--r-full); flex-shrink: 0; }
.dot.green { background: var(--green); }
.dot.red { background: var(--red); }
.dot.amber { background: var(--amber); animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

.backdrop { display: none; position: fixed; inset: 0; background: rgba(20,17,15,.45); z-index: 30; }

.main-col { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar { background: var(--white); border-bottom: var(--bw) solid var(--border); }
.topbar-row { display: flex; align-items: center; justify-content: space-between; padding: .8rem 1.4rem; gap: 1rem; }
.hamburger { display: none; }
.crumbs { display: flex; align-items: center; gap: .4rem; font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: .86rem; flex-wrap: wrap; }
.crumbs a { color: var(--text3); text-decoration: none; transition: color .12s; }
.crumbs a:hover { color: var(--text); text-decoration: underline; }
.crumbs .sep { color: var(--s3); }
.crumbs .current { color: var(--text); }
.topbar-actions { display: flex; align-items: center; gap: .5rem; flex-shrink: 0; }
.icon-btn {
  width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
  border: var(--bw) solid var(--border); border-radius: var(--r); background: var(--white); cursor: pointer;
  transition: transform .14s var(--ease), box-shadow .14s var(--ease), background .14s;
}
.icon-btn .icon { width: 16px; height: 16px; }
.icon-btn:hover { background: var(--s1); transform: translate(-1px,-1px); box-shadow: 2px 2px 0 var(--border); }
.icon-btn:active { transform: translate(1px,1px); box-shadow: none; }
.avatar {
  width: 32px; height: 32px; border-radius: var(--r-full); background: var(--text); color: var(--orange);
  display: flex; align-items: center; justify-content: center; font-family: 'Space Grotesk', sans-serif;
  font-size: .78rem; font-weight: 700; border: var(--bw) solid var(--text); box-shadow: 0 0 0 2px var(--orange);
  overflow: hidden;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }

.urlbar-row { display: flex; align-items: center; gap: .5rem; padding: 0 1.4rem .75rem; }
.urlbar {
  flex: 1; display: flex; align-items: center; gap: .5rem; background: var(--s1); border: 1.5px solid var(--s2);
  border-radius: var(--r); padding: .4rem .7rem; font-family: 'IBM Plex Mono', monospace; font-size: .72rem;
  color: var(--text2); overflow-x: auto; white-space: nowrap;
}
.urlbar .icon { width: 12px; height: 12px; color: var(--text3); flex-shrink: 0; }
.urlbar .placeholder { color: var(--text3); font-style: italic; }
.urlbar-copy {
  flex-shrink: 0; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--s2); border-radius: var(--r); background: var(--white); cursor: pointer; transition: background .12s;
}
.urlbar-copy .icon { width: 13px; height: 13px; }
.urlbar-copy:hover { background: var(--s1); }

main { flex: 1; padding: 1.6rem; overflow-y: auto; }
.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.3rem; flex-wrap: wrap; }
.page-head h1 { font-size: 1.5rem; font-weight: 700; margin-bottom: .25rem; }
.page-head p { color: var(--text2); font-size: .88rem; max-width: 52ch; }

.grid-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: .9rem; margin-bottom: 1.3rem; }
.stat-card {
  background: var(--white); border: var(--bw) solid var(--border); border-radius: var(--r);
  box-shadow: var(--shadow); padding: 1rem 1.1rem; transition: transform .16s var(--ease), box-shadow .16s var(--ease);
}
.stat-card:hover { transform: translate(-1px,-1px); box-shadow: 5px 5px 0 var(--border); }
.stat-label { font-family: 'IBM Plex Mono', monospace; font-size: .64rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--text3); margin-bottom: .5rem; }
.stat-val { font-family: 'Space Grotesk', sans-serif; font-size: 1.55rem; font-weight: 700; }
.stat-sub { font-size: .76rem; color: var(--text3); margin-top: .2rem; }

.panel { background: var(--white); border: var(--bw) solid var(--border); border-radius: var(--r); box-shadow: var(--shadow); overflow: hidden; }
.panel + .panel { margin-top: 1rem; }

table { width: 100%; border-collapse: collapse; font-size: .86rem; }
thead th { text-align: left; padding: .75rem 1.1rem; background: var(--s6); color: var(--white); font-family: 'IBM Plex Mono', monospace; font-size: .66rem; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; }
tbody td { padding: .8rem 1.1rem; border-top: 1px solid var(--s2); }
tbody tr { transition: background .12s; }
tbody tr:hover { background: var(--orange-l); }
.cell-name { font-weight: 600; font-family: 'Space Grotesk', sans-serif; }
.cell-mono { font-family: 'IBM Plex Mono', monospace; font-size: .78rem; color: var(--text2); }

.badge { display: inline-flex; align-items: center; gap: .35rem; padding: .18rem .55rem; border-radius: var(--r-full); font-family: 'IBM Plex Mono', monospace; font-size: .68rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.badge-active { background: var(--green-l); color: var(--green); }
.badge-error  { background: var(--red-l); color: var(--red); }
.badge-paused { background: var(--s1); color: var(--text3); }

.state-box { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .7rem; padding: 3rem 1.5rem; text-align: center; }
.state-box p { color: var(--text2); font-size: .88rem; max-width: 42ch; }
.state-box .state-title { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: .95rem; }
.state-box .icon { width: 26px; height: 26px; color: var(--text3); }

.skeleton-row { display: flex; gap: 1rem; padding: .9rem 1.1rem; border-top: 1px solid var(--s2); }
.skeleton-row:first-child { border-top: none; }
.skel { height: 14px; border-radius: 3px; flex: 1; background: linear-gradient(90deg, var(--s1) 25%, var(--s2) 37%, var(--s1) 63%); background-size: 400% 100%; animation: shimmer 1.5s ease infinite; }
@keyframes shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

.fade-in { animation: fadeIn .3s var(--ease); }
@keyframes fadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }

.code-note { margin-top: .9rem; font-family: 'IBM Plex Mono', monospace; font-size: .72rem; color: var(--text3); background: var(--s1); border: 1px solid var(--s2); border-radius: var(--r); padding: .6rem .8rem; }

/* ---------- Auth pages ---------- */
.auth-shell { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 2rem 1.2rem; background: radial-gradient(circle at 20% 20%, var(--orange-g), transparent 55%), var(--off); }
.auth-card { width: 100%; max-width: 380px; background: var(--white); border: var(--bw) solid var(--border); border-radius: var(--r); box-shadow: var(--shadow-lg); padding: 2rem 1.9rem; }
.auth-brand { display: flex; align-items: center; gap: .6rem; margin-bottom: 1.6rem; }
.auth-brand img { width: 30px; height: 30px; border-radius: 7px; }
.auth-brand span { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 1.05rem; }
.auth-title { font-size: 1.3rem; font-weight: 700; margin-bottom: .3rem; }
.auth-sub { color: var(--text2); font-size: .85rem; margin-bottom: 1.5rem; }
.field { margin-bottom: .9rem; }
.field label { display: block; font-family: 'IBM Plex Mono', monospace; font-size: .66rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--text3); margin-bottom: .35rem; }
.field-input-wrap { position: relative; }
.field input {
  width: 100%; padding: .65rem .8rem; border: var(--bw) solid var(--border); border-radius: var(--r);
  font-size: .88rem; background: var(--white); color: var(--text); transition: box-shadow .14s var(--ease);
}
.field input:focus { outline: none; box-shadow: 0 0 0 3px var(--orange-g); }
.field-toggle { position: absolute; right: .55rem; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; color: var(--text3); padding: .2rem; }
.field-toggle .icon { width: 16px; height: 16px; }
.form-error { display: flex; align-items: flex-start; gap: .5rem; background: var(--red-l); color: var(--red); border: 1.5px solid var(--red); border-radius: var(--r); padding: .6rem .75rem; font-size: .8rem; margin-bottom: 1rem; }
.form-error .icon { width: 15px; height: 15px; margin-top: .1rem; flex-shrink: 0; }
.divider { display: flex; align-items: center; gap: .7rem; margin: 1.3rem 0; color: var(--text3); font-size: .72rem; font-family: 'IBM Plex Mono', monospace; text-transform: uppercase; letter-spacing: .06em; }
.divider::before, .divider::after { content: ''; flex: 1; height: 1px; background: var(--s2); }
.btn-google { background: var(--white); color: var(--text); }
.auth-switch { text-align: center; font-size: .82rem; color: var(--text2); margin-top: 1.3rem; }
.auth-switch button { background: none; border: none; color: var(--orange-d); font-weight: 600; cursor: pointer; padding: 0; font-size: inherit; text-decoration: underline; }

/* ---------- Mobile ---------- */
@media (max-width: 860px) {
  .hamburger { display: flex; }
  .sidebar { position: fixed; inset: 0 auto 0 0; transform: translateX(-100%); width: 250px; }
  .sidebar.open { transform: translateX(0); }
  .sb-close { display: inline-flex; }
  .backdrop.open { display: block; }
  .grid-stats { grid-template-columns: repeat(2, 1fr); }
  main { padding: 1.1rem; }
  .page-head { flex-direction: column; }
  thead th:nth-child(n+4), tbody td:nth-child(n+4) { display: none; }
}
@media (max-width: 480px) {
  .grid-stats { grid-template-columns: 1fr; }
  .auth-card { padding: 1.6rem 1.3rem; }
}