@font-face{font-family:Inter;src:url("brand/login-fonts/inter-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Inter;src:url("brand/login-fonts/inter-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:Inter;src:url("brand/login-fonts/inter-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:Inter;src:url("brand/login-fonts/inter-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:Inter;src:url("brand/login-fonts/inter-800.woff2") format("woff2");font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:"Cabin Sketch";src:url("brand/login-fonts/cabin-sketch-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Patrick Hand";src:url("brand/login-fonts/patrick-hand-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}

:root{
  --bg:#0c1713;
  --bg2:#0f2019;
  --chalk:#f6f3eb;
  --chalk-soft:rgba(246,243,235,.84);
  --line:rgba(246,243,235,.92);
  --line-soft:rgba(246,243,235,.46);
  --panel:rgba(6,18,14,.48);
  --panel2:rgba(7,19,15,.66);
  --orange:#d8744e;
  --orange-2:#ef8d65;
  --green:#6fcc84;
  --yellow:#e0ac43;
  --red:#db6d58;
  --grey:#aeb7c3;
  --blue:#7fbae9;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--chalk);
  font-family:Inter, system-ui, sans-serif;
  color-scheme:dark;
  background-color:#111915;
  background-image:linear-gradient(rgba(8,13,11,.10), rgba(8,13,11,.10)), url("brand/login-board.png?v=v27");
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  background-attachment:fixed;
  min-height:100vh;
}
img{display:block;max-width:100%}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer}
a{color:inherit}
[hidden]{display:none !important}
body.needs-auth .app{visibility:hidden}
.app{position:relative; z-index:1; min-height:100vh; padding:18px 28px 34px;}
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:4px 0 12px; margin-bottom:16px;
  position:relative;
}
.topbar::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:linear-gradient(90deg, rgba(255,255,255,.75), rgba(255,255,255,.55), rgba(255,255,255,.75));
  box-shadow:0 0 1px rgba(255,255,255,.55), 0 0 6px rgba(255,255,255,.12);
  opacity:.9;
}
.logo-nav{display:flex; align-items:flex-start; gap:42px}
.logo{
  font-family:"Cabin Sketch",cursive; font-weight:700; font-size:32px; line-height:.95; letter-spacing:.035em;
  color:#f6f2e8; text-transform:uppercase;
  text-shadow:0 0 1px rgba(255,255,255,.34), 0 0 4px rgba(255,255,255,.10);
}
.nav{display:flex; align-items:flex-start; gap:34px; padding-top:2px}
.nav a{
  position:relative; color:var(--chalk); text-decoration:none; font-weight:700;
  font-size:18px; opacity:.98; padding:0 0 14px;
}
.nav a.active::before, .nav a.active::after{content:"";position:absolute;left:50%;transform:translateX(-50%) rotate(-1deg);border-radius:999px;pointer-events:none}
.nav a.active::before{bottom:1px;width:58px;height:5px;background:rgba(218,113,75,.48)}
.nav a.active::after{bottom:2px;width:54px;height:2.6px;background:#eb8b63;box-shadow:8px 1px 0 -1px rgba(239,140,102,.55),-5px -1px 0 -1px rgba(239,140,102,.42)}
.top-right{display:flex; align-items:center; gap:14px}
.logout{
  width:48px; height:48px; border-radius:10px; border:2px solid rgba(246,243,235,.88);
  background:rgba(8,18,15,.18); color:var(--chalk); display:grid; place-items:center;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
  padding:0;
}
.logout svg{width:23px; height:23px; opacity:.98}
#account-support{height:38px;padding:0 13px;border-radius:10px;border:1px solid rgba(245,241,231,.16);background:rgba(255,255,255,.04);color:#f5f1e7;font-family:Inter,system-ui,sans-serif;font-size:12px;font-weight:650}
#account-club-label{display:flex; align-items:center; gap:8px; font-size:14px; font-weight:700; color:var(--chalk)}
#account-club{
  height:40px; max-width:220px; border-radius:8px; border:2px solid rgba(246,243,235,.78);
  background:rgba(4,16,12,.55); color:#f6f3eb; padding:0 8px;
}
.hero{display:grid; grid-template-columns: 1.08fr 1.22fr; gap:26px; align-items:start; margin-top:10px}
.hero h1{
  margin:0; display:inline-block; position:relative; font-family:"Cabin Sketch", cursive; font-size:76px; line-height:.96; font-weight:700; letter-spacing:-.02em;
  color:#f7f4ec; text-shadow:0 0 2px rgba(255,255,255,.25), 0 0 8px rgba(255,255,255,.05);
}
.hero h1::before,.hero h1::after{content:"";position:absolute;pointer-events:none;transform-origin:left center}
.hero h1::before{
  left:8px; width:92%; height:6px; bottom:-12px;
  background:#de744f;
  border-radius:48% 56% 45% 52% / 54% 46% 58% 42%;
  transform:rotate(-.35deg) skewX(-1deg);
  filter:url(#offball-login-chalk-border);
  opacity:.95;
}
.hero h1::after{
  left:91%; width:7%; height:2px; bottom:-11px;
  background:#d96f4c;
  border-radius:999px;
  transform:rotate(.9deg);
  filter:url(#offball-login-chalk-border);
  opacity:.50;
}
.top-controls{
  display:flex; flex-direction:column; gap:14px; align-items:flex-end; padding-top:10px;
}
.search-actions{display:flex; align-items:center; justify-content:flex-end; gap:14px; width:100%}
.search{
  display:flex; align-items:center; gap:11px; min-width:0; width:355px; height:50px; padding:0 15px;
  border:2px solid rgba(246,243,235,.86); border-radius:9px; background:rgba(3,12,9,.26);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.035), 0 0 2px rgba(255,255,255,.06);
}
.search svg{width:21px;height:21px; flex:0 0 auto}
.search input{
  border:none; outline:none; background:transparent; color:var(--chalk); width:100%;
  font-size:14px;
}
.search input::placeholder{color:rgba(246,243,235,.55)}
.search input::-webkit-search-cancel-button,.search input::-webkit-search-decoration{display:none}
.actions{display:flex; align-items:center; gap:12px}
.btn, .filter-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:12px;
  border:3px solid rgba(246,243,235,.9); border-radius:9px; background:rgba(5,16,12,.24);
  color:var(--chalk); font-weight:700;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
  text-decoration:none;
}
.btn{height:50px; padding:0 17px; font-size:14px}
.btn svg{width:19px; height:19px; flex:0 0 auto}
.btn.primary{
  position:relative; padding:0 24px 0 18px; min-width:192px;
  background:linear-gradient(180deg, rgba(220,123,82,.96), rgba(208,105,63,.94));
}
.btn.primary .rays{position:absolute; right:-33px; top:50%; transform:translateY(-50%); width:27px; height:34px; object-fit:contain; pointer-events:none}
.filters{display:flex; gap:10px; flex-wrap:wrap; width:100%; justify-content:flex-end}
.filter-btn{height:40px; padding:0 14px; font-size:14px; font-weight:700}
.filter-btn svg{width:15px; height:15px}
.board{
  margin-top:22px;
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px;
  align-items:start;
}
.column{
  min-height:650px; background:rgba(6,16,12,.18);
  border:3px solid rgba(246,243,235,.78); border-radius:10px; padding:14px 13px 13px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.03);
}
.col-header{
  display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:12px;
}
.col-left{display:flex; align-items:center; gap:14px; min-width:0}
.title-pill{position:relative; display:inline-flex; align-items:center; justify-content:center; min-width:160px; height:52px;}
.title-pill img{position:absolute; inset:0; width:100%; height:100%; object-fit:fill;}
.title-pill span{position:relative; z-index:1; font-family:"Patrick Hand", cursive; font-size:23px; font-weight:400; color:#f7f4ec; text-shadow:0 0 2px rgba(255,255,255,.16); padding:0 18px; white-space:nowrap}
.count{
  width:42px; height:42px; border-radius:50%; border:3px solid rgba(246,243,235,.9);
  display:grid; place-items:center; font-size:18px; font-weight:800; color:var(--chalk);
  flex:0 0 auto; background:rgba(6,18,14,.12);
}
.col-icon{width:38px; height:38px; object-fit:contain; flex:0 0 auto; margin-right:10px}
.cards{display:flex; flex-direction:column; gap:10px}
.system-card{
  display:grid; grid-template-columns:116px 1fr auto; gap:12px; align-items:start;
  min-height:116px; border:2px solid rgba(246,243,235,.78); border-radius:10px;
  background:rgba(6,16,12,.28); padding:9px 10px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.03);
}
.thumb{
  width:116px; height:82px; border:2px solid rgba(246,243,235,.72); border-radius:4px;
  overflow:hidden; background:linear-gradient(180deg, rgba(7,20,15,.92), rgba(8,22,17,.82));
  align-self:center;
}
.thumb svg{width:100%; height:100%; display:block}
.card-main{min-width:0}
.card-title{margin:0 0 7px; font-size:18px; line-height:1.12; font-weight:800; color:#f6f3eb}
.meta{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:7px}
.pill{
  display:inline-flex; align-items:center; justify-content:center; border-radius:999px;
  border:2px solid currentColor; padding:3px 8px; font-size:12px; font-weight:700; line-height:1.05;
  background:rgba(10,23,18,.3)
}
.pill.attack{color:#f0a24a}
.pill.defense{color:#63b7e4}
.pill.neutral{color:#8ec5ef}
.pill.full{color:#8ec5ef}
.desc{font-size:13px; line-height:1.22; color:rgba(246,243,235,.86); margin-bottom:4px}
.date{font-size:12px; line-height:1.1; color:rgba(246,243,235,.88)}
.share-row{grid-column:1 / -1; display:flex; align-items:center; gap:10px; margin-top:2px; padding-top:8px; border-top:1.5px solid rgba(246,243,235,.22)}
.share-link{display:flex; align-items:center; gap:8px; min-width:0}
.share-row.is-changed{flex-wrap:wrap; row-gap:8px}
.share-row.is-changed .share-link{margin-left:0; width:100%}
.publish-btn,.link-copy{height:28px; border-radius:999px; font-size:12px; font-weight:800; cursor:pointer}
.publish-btn{padding:0 12px; border:1.5px solid #2f6a3d; background:#478b57; color:#f7f4ec}
.share-row.is-changed .publish-btn{border-color:#eda62c; background:transparent; color:#eda62c}
.publish-btn.is-busy{position:relative; color:transparent; pointer-events:none; min-width:74px}
.publish-btn.is-busy::after{content:""; position:absolute; left:50%; top:50%; width:12px; height:12px; margin:-6px 0 0 -6px; border-radius:50%; border:2px solid rgba(247,244,236,.4); border-top-color:#f7f4ec; animation:publish-spin .7s linear infinite}
@keyframes publish-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.publish-btn.is-busy::after{animation:none;border-color:#f7f4ec}}
.link-copy{padding:0 10px; border:1.5px solid rgba(246,243,235,.5); background:rgba(6,16,12,.28); color:#f6f3eb}
.share-state{font-size:12px; font-weight:800; color:rgba(246,243,235,.58); white-space:nowrap}
.share-row.is-on .share-state{color:#478b57}
.share-switch{position:relative; width:40px; height:22px; flex:none}
.share-switch input{position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer; z-index:1}
.share-switch span{position:absolute; inset:0; border-radius:99px; background:rgba(4,14,10,.55); border:2px solid rgba(246,243,235,.38)}
.share-switch span::after{content:""; position:absolute; top:1px; left:1px; width:16px; height:16px; border-radius:50%; background:#f6f3eb; transition:transform .15s}
.share-switch input:checked + span{background:#478b57; border-color:#478b57}
.share-switch input:checked + span::after{transform:translateX(18px)}
.share-switch input:focus-visible + span,.publish-btn:focus-visible,.link-copy:focus-visible{outline:2px solid #f6f3eb; outline-offset:2px}
.share-switch input:disabled + span{opacity:.55}
.card-actions{display:flex; flex-direction:column; gap:8px; padding-left:3px; align-self:center; position:relative; z-index:5}
.mini-btn{
  width:34px; height:34px; border-radius:8px; border:2px solid rgba(246,243,235,.82); background:rgba(4,14,10,.28);
  display:grid; place-items:center; padding:0; color:#f6f3eb;
}
.mini-btn img{width:17px; height:17px; object-fit:contain}
.mini-btn .dots{display:flex; flex-direction:column; gap:3px; align-items:center; justify-content:center}
.mini-btn .dots span{width:4px; height:4px; background:#f6f3eb; border-radius:50%}
@media (max-width: 1500px){
  .board{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width: 1180px){
  .hero{grid-template-columns:1fr}
  .top-controls{align-items:flex-start; padding-top:4px}
  .search-actions, .filters{justify-content:flex-start}
}
@media (max-height: 980px){
  .column{min-height:0}
}
@media (max-width: 860px){
  .app{padding:16px}
  .logo-nav{gap:20px; flex-direction:column}
  .nav{gap:22px; flex-wrap:wrap}
  .hero h1{font-size:58px}
  .search{width:100%}
  .search-actions{flex-direction:column; align-items:stretch}
  .actions{width:100%; flex-wrap:wrap}
  .board{grid-template-columns:1fr}
  .column{min-height:0}
}

.column,
.system-card{
  position:relative;
  border-color:transparent !important;
}
.column::before,
.system-card::before{
  content:"";
  position:absolute;
  inset:0;
  border:2.4px solid #f5efe2;
  border-radius:inherit;
  pointer-events:none;
  z-index:4;
  filter:url(#offball-login-chalk-border);
  opacity:.96;
}
.column::before{border-width:3.4px}

.search-actions{
  gap:14px;
  width:100%;
  justify-content:flex-end;
  align-items:center;
}
.search{
  width:380px;
  height:56px;
  padding:0 17px;
  gap:13px;
  border:2px solid rgba(246,243,235,.92);
  border-radius:9px;
  background:rgba(4,16,12,.34);
  box-shadow:none;
}
.search svg{width:22px;height:22px;stroke-width:2.2}
.search input{font-size:15px;font-weight:400}
.search input::placeholder{color:rgba(246,243,235,.64)}
.actions{gap:14px}
.btn{
  height:56px;
  border:2px solid rgba(246,243,235,.92);
  border-radius:9px;
  background:rgba(4,16,12,.34);
  box-shadow:none;
  font-size:15px;
  font-weight:700;
}
.btn:not(.primary){
  width:145px;
  padding:0 15px;
}
.btn svg{width:21px;height:21px}
.btn.primary{
  min-width:232px;
  width:232px;
  padding:0 21px;
  border-color:rgba(239,195,174,.68);
  background:linear-gradient(180deg, #d87855 0%, #ca6a49 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
}
.btn.primary .rays{
  right:-39px;
  top:50%;
  width:29px;
  height:38px;
  transform:translateY(-50%);
  object-fit:contain;
}

.hero{
  grid-template-columns:minmax(520px,1fr) auto;
  column-gap:34px;
  align-items:start;
  margin-top:18px;
}
.hero-copy{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  min-width:0;
}
.hero-copy .filters{
  justify-content:flex-start;
  width:auto;
  margin-top:58px;
  gap:15px;
}
.filter-btn{
  height:43px;
  padding:0 18px;
  border:2px solid rgba(246,243,235,.78);
  border-radius:7px;
  background:rgba(5,16,12,.25);
  font-family:"Patrick Hand", cursive;
  font-size:18px;
  font-weight:400;
  letter-spacing:.01em;
  box-shadow:none;
}
.filter-btn svg{width:16px;height:16px;stroke-width:1.65}
.top-controls{
  padding-top:40px;
  gap:0;
  align-items:flex-end;
  width:auto;
}
.search-actions{
  width:auto;
  gap:16px;
  justify-content:flex-end;
  align-items:center;
}
.search{
  width:470px;
  height:58px;
  padding:0 18px;
  gap:14px;
  border:2px solid rgba(246,243,235,.78);
  border-radius:7px;
  background:rgba(4,16,12,.26);
  box-shadow:none;
}
.search svg{width:22px;height:22px;stroke-width:2}
.search input{
  font-family:"Patrick Hand", cursive;
  font-size:19px;
  font-weight:400;
  color:#f5f1e7;
}
.search input::placeholder{color:rgba(235,231,219,.58)}
.actions{gap:16px}
.btn{
  height:58px;
  border:2px solid rgba(246,243,235,.78);
  border-radius:7px;
  background:rgba(4,16,12,.26);
  box-shadow:none;
  font-family:"Patrick Hand", cursive;
  font-size:19px;
  font-weight:400;
  letter-spacing:.01em;
}
.btn:not(.primary){
  width:176px;
  padding:0 18px;
}
.btn svg{width:22px;height:22px;stroke-width:1.9}
.btn.primary{
  width:292px;
  min-width:292px;
  padding:0 26px;
  border-color:rgba(244,234,220,.72);
  background-color:#d36f4b;
  background-image:linear-gradient(rgba(211,111,75,.10),rgba(211,111,75,.10)),url("brand/systems/btn-texture.png");
  background-size:cover;
  background-position:center;
  color:#fff8ef;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);
}
.btn.primary .rays{
  right:-45px;
  top:50%;
  width:36px;
  height:42px;
  transform:translateY(-50%);
  object-fit:contain;
}
@media(max-width:1450px){
  .hero{grid-template-columns:1fr;row-gap:26px}
  .top-controls{padding-top:0;align-items:flex-start}
  .search-actions{justify-content:flex-start;flex-wrap:wrap}
  .hero-copy .filters{margin-top:48px}
}

.search-actions{
  gap:14px;
  align-items:center;
  justify-content:flex-end;
  overflow:visible;
}
.actions{
  gap:14px;
  padding-right:26px;
  overflow:visible;
}
.search{
  position:relative;
  width:420px;
  height:48px;
  padding:0 16px;
  gap:12px;
  border:0 !important;
  border-radius:7px;
  background:rgba(3,14,10,.40);
  box-shadow:none !important;
  overflow:visible;
}
.search::after,
.btn:not(.primary)::after{
  content:"";
  position:absolute;
  inset:0;
  border:1.9px solid rgba(243,239,228,.92);
  border-radius:7px;
  pointer-events:none;
  filter:url(#offball-login-chalk-border);
  opacity:.92;
}
.search svg{
  width:19px;
  height:19px;
  stroke-width:2;
  color:#f3f0e7;
}
.search input{
  font-family:Inter,system-ui,sans-serif;
  font-size:13.5px;
  line-height:1;
  font-weight:400;
  letter-spacing:0;
  color:#f3f0e7;
}
.search input::placeholder{
  color:rgba(226,224,216,.61);
  opacity:1;
}
.btn{
  position:relative;
  height:48px;
  border:0 !important;
  border-radius:7px;
  box-shadow:none !important;
  font-family:"Patrick Hand",cursive;
  font-size:16px;
  font-weight:400;
  line-height:1;
  letter-spacing:.005em;
}
.btn:not(.primary){
  width:150px;
  padding:0 14px;
  background:rgba(3,14,10,.40);
}
.btn svg{
  width:19px;
  height:19px;
  stroke-width:1.85;
}
.btn.primary{
  width:240px;
  min-width:240px;
  padding:0 20px;
  color:#fff8ef;
  border-radius:7px;
  background-color:#c9623f;
  box-shadow:
    inset 0 0 0 999px rgba(126,42,20,.10),
    inset 0 0 0 1px rgba(255,226,209,.08) !important;
}
.btn.primary::after{
  content:"";
  position:absolute;
  inset:0;
  border:1.9px solid #e27a53;
  border-radius:7px;
  pointer-events:none;
  filter:url(#offball-login-chalk-border);
  opacity:.92;
}
.btn.primary .rays{
  right:-46px;
  top:36%;
  width:42px;
  height:42px;
  transform:translateY(-50%) rotate(-4deg);
  object-fit:contain;
  transform-origin:center;
}
.btn.primary .rays{
  right:-36px !important;
  top:-14px !important;
  width:42px !important;
  height:42px !important;
  transform:rotate(-14deg) !important;
  transform-origin:center !important;
  object-fit:contain !important;
  z-index:2;
}
.column:nth-child(2) .title-pill span{color:#1b1d17;text-shadow:none}
.column:nth-child(2) .title-pill{min-width:196px}
.column:nth-child(3) .title-pill{min-width:188px}

.sr-sink{position:fixed;left:0;top:0;width:1px;height:1px;margin:0;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);pointer-events:none}
.filter-drop{position:relative}
.filter-menu{
  position:absolute; top:calc(100% + 8px); left:0; z-index:40; min-width:180px;
  padding:6px; border-radius:10px; background:rgba(8,18,14,.94);
  border:1.5px solid rgba(246,243,235,.55); box-shadow:0 16px 40px rgba(0,0,0,.35);
  display:flex; flex-direction:column; gap:2px;
}
.filter-menu button{
  text-align:left; background:transparent; color:#f6f3eb; border:0; border-radius:7px;
  padding:8px 10px; font-family:Inter,system-ui,sans-serif; font-size:14px; font-weight:600;
}
.filter-menu button:hover,.filter-menu button.is-on{background:rgba(216,116,78,.28)}
.filter-btn.is-set{box-shadow:inset 0 0 0 1px rgba(226,122,83,.85)}
.team-count{
  min-width:18px; height:18px; padding:0 5px; border-radius:999px;
  background:#d8744e; color:#fff8ef; font-family:Inter,system-ui,sans-serif; font-size:11px; font-weight:800;
  display:grid; place-items:center;
}
.team-panel{
  position:absolute; top:calc(100% + 8px); left:0; z-index:40; min-width:240px;
  padding:10px; border-radius:10px; background:rgba(8,18,14,.96);
  border:1.5px solid rgba(246,243,235,.55); box-shadow:0 16px 40px rgba(0,0,0,.35);
}
.team-panel-head{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:6px}
.team-panel-title{font-size:13px; font-weight:800}
.team-clear{border:0; background:transparent; color:#f0a24a; font-size:13px; font-weight:700; padding:0}
.team-option{display:flex; align-items:center; gap:8px; padding:7px 4px; font-size:14px; font-weight:600; cursor:pointer}
.team-option input{width:16px; height:16px; accent-color:#d8744e}
.system-card.is-menu-open{z-index:40}
.cards,.column,.system-card{overflow:visible}
.card-menu{
  position:absolute; top:calc(100% + 6px); right:0; z-index:5; min-width:210px;
  padding:6px; border-radius:10px; background:rgba(8,18,14,.96);
  border:1.5px solid rgba(246,243,235,.55); box-shadow:0 16px 40px rgba(0,0,0,.35);
  display:flex; flex-direction:column; gap:2px;
}
.card-menu button{
  text-align:left; background:transparent; color:#f6f3eb; border:0; border-radius:7px;
  padding:8px 10px; font-family:Inter,system-ui,sans-serif; font-size:13px; font-weight:600;
}
.card-menu button:hover{background:rgba(255,255,255,.08)}
.card-menu button.danger{color:#ffb4a8}
.ui-toast{
  position:fixed; left:28px; bottom:18px; z-index:80; display:flex; align-items:center; gap:10px;
  max-width:min(520px,calc(100vw - 48px)); padding:12px 14px; border-radius:10px;
  background:rgba(8,16,13,.94); color:#f6f3eb; border:1.5px solid rgba(246,243,235,.7);
  font-size:14px; box-shadow:0 16px 40px rgba(0,0,0,.35);
}
.ui-toast .dot{width:8px; height:8px; border-radius:50%; background:#6fcc84; flex:0 0 auto}
.ui-toast.warning .dot{background:#e0ac43}
.ui-toast.error .dot{background:#db6d58}
#account-banner:not([hidden]){
  margin:0 0 12px; color:#fff2e9; background:#542f26; border:1px solid #db987e;
  border-radius:8px; padding:10px 12px; font-size:14px;
}
.state-box{margin:36px auto 10px; max-width:680px; text-align:center; color:#f6f3eb}
.state-title{font-family:"Cabin Sketch",cursive; font-size:42px; line-height:1; margin:8px 0}
.state-text{font-size:16px; line-height:1.4; color:rgba(246,243,235,.82)}
.state-actions{display:flex; justify-content:center; gap:12px; margin-top:18px; flex-wrap:wrap}
.state-actions button{
  height:48px; padding:0 16px; border-radius:7px; font-family:"Patrick Hand",cursive; font-size:18px;
}
.state-actions .primary{background:#c9623f; color:#fff8ef; border:0}
.state-actions .secondary{background:rgba(3,14,10,.4); color:#f6f3eb; border:1.5px solid rgba(243,239,228,.8)}
#library-state[data-kind="loading"]{
  position:fixed; inset:0; z-index:90; margin:0; max-width:none; width:auto;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(rgba(8,13,11,.55), rgba(8,13,11,.62)), url("brand/login-board.png?v=v27") center/cover no-repeat;
}
#library-state[data-kind="loading"] .loader-scene{
  width:min(92vw, 980px);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:24px; gap:12px;
}
#library-state[data-kind="loading"] .spinner-zone{
  position:relative; width:210px; height:210px; display:grid; place-items:center; margin-bottom:2px;
}
#library-state[data-kind="loading"] .ring{position:absolute; border-radius:50%}
#library-state[data-kind="loading"] .ring.outer-base{
  inset:12px; border:5px solid rgba(244,240,230,.22);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05), 0 0 0 1px rgba(255,255,255,.04);
  filter:url(#chalkStrokeSoft);
}
#library-state[data-kind="loading"] .ring.main-spin{
  inset:6px; border:none; background:none; overflow:visible;
  transform:rotate(-24deg); animation:loader-spin 1.9s linear infinite;
}
#library-state[data-kind="loading"] .ring.orange-accent{
  inset:0; border:none; background:none; overflow:visible; opacity:.95;
  transform:rotate(18deg); animation:loader-spin-reverse 2.8s linear infinite;
}
#library-state[data-kind="loading"] .ring.ghost-dashes{
  inset:22px; border:3px dashed rgba(244,240,230,.22);
  filter:url(#chalkStrokeSoft); animation:loader-pulse 2.2s ease-in-out infinite;
}
#library-state[data-kind="loading"] .ring.main-spin::before,
#library-state[data-kind="loading"] .ring.orange-accent::before,
#library-state[data-kind="loading"] .ring.main-spin::after,
#library-state[data-kind="loading"] .ring.orange-accent::after{
  content:""; position:absolute; display:block; border-radius:50%;
}
#library-state[data-kind="loading"] .ring.main-spin::before{
  inset:0;
  background:conic-gradient(from -90deg, rgba(249,245,238,1) 0deg, rgba(249,245,238,.98) 18deg, rgba(249,245,238,.82) 58deg, rgba(249,245,238,.48) 110deg, rgba(249,245,238,.18) 156deg, rgba(249,245,238,.02) 188deg, transparent 215deg 360deg);
  -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 12px), #000 calc(100% - 12px) calc(100% - 6px), transparent calc(100% - 6px));
  mask:radial-gradient(farthest-side, transparent calc(100% - 12px), #000 calc(100% - 12px) calc(100% - 6px), transparent calc(100% - 6px));
  filter:url(#chalkStrokeWhite) drop-shadow(0 0 1px rgba(255,255,255,.16));
}
#library-state[data-kind="loading"] .ring.main-spin::after{
  width:14px; height:14px; left:50%; top:6px; transform:translateX(-50%);
  background:rgba(249,245,238,.95);
  filter:url(#chalkDot) drop-shadow(0 0 1px rgba(255,255,255,.22));
}
#library-state[data-kind="loading"] .ring.orange-accent::before{
  inset:0;
  background:conic-gradient(from -90deg, rgba(223,131,91,.98) 0deg, rgba(223,131,91,.96) 20deg, rgba(223,131,91,.78) 52deg, rgba(223,131,91,.46) 96deg, rgba(223,131,91,.18) 136deg, rgba(223,131,91,.03) 166deg, transparent 192deg 360deg);
  -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 10px), #000 calc(100% - 10px) calc(100% - 5px), transparent calc(100% - 5px));
  mask:radial-gradient(farthest-side, transparent calc(100% - 10px), #000 calc(100% - 10px) calc(100% - 5px), transparent calc(100% - 5px));
  filter:url(#chalkStrokeOrange) drop-shadow(0 0 1px rgba(223,131,91,.18));
}
#library-state[data-kind="loading"] .ring.orange-accent::after{
  width:12px; height:12px; left:50%; top:5px; transform:translateX(-50%);
  background:#df835b;
  filter:url(#chalkDot) drop-shadow(0 0 1px rgba(223,131,91,.2));
}
#library-state[data-kind="loading"] .orbit{position:absolute; inset:0; animation:loader-spin 4.1s linear infinite}
#library-state[data-kind="loading"] .orbit::before,
#library-state[data-kind="loading"] .orbit::after{
  content:""; position:absolute; width:8px; height:8px; border-radius:50%;
  background:rgba(255,255,255,.7); filter:url(#chalkDot);
}
#library-state[data-kind="loading"] .orbit::before{top:8px; left:50%; transform:translateX(-50%)}
#library-state[data-kind="loading"] .orbit::after{right:20px; top:40px; width:6px; height:6px; opacity:.65}
#library-state[data-kind="loading"] .ball-shell{
  width:112px; height:112px; border-radius:50%;
  background:radial-gradient(circle at 32% 28%, rgba(255,255,255,.08), rgba(255,255,255,.02) 36%, rgba(0,0,0,.12) 100%);
  border:2px solid rgba(255,255,255,.18); display:grid; place-items:center;
  box-shadow:inset 0 0 24px rgba(255,255,255,.05), 0 0 18px rgba(0,0,0,.16);
  animation:loader-shell 2.2s ease-in-out infinite;
}
#library-state[data-kind="loading"] .ball-shell img{
  width:80px; height:80px; max-width:none; object-fit:contain; display:block;
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.22));
  animation:loader-bob 2.1s ease-in-out infinite;
}
#library-state[data-kind="loading"] .title{
  position:relative; margin:0; padding:0 10px 13px;
  font-family:"Cabin Sketch", cursive; font-size:clamp(40px, 5vw, 64px); font-weight:700;
  line-height:1; letter-spacing:-.018em; color:#f4f0e6;
  text-shadow:0 0 1px rgba(255,255,255,.24);
}
#library-state[data-kind="loading"] .title::after{
  content:""; position:absolute; left:15%; right:13%; bottom:0; height:6px;
  border-radius:42% 58% 45% 55% / 55% 45% 58% 42%;
  background:linear-gradient(90deg, transparent 0%, rgba(213,111,74,.60) 3%, #d56f4a 10%, #e68a63 53%, #d56f4a 88%, rgba(213,111,74,.40) 97%, transparent 100%);
  transform:rotate(-.8deg) skewX(-6deg); opacity:.92; filter:url(#chalkUnderline);
}
#library-state[data-kind="loading"] .subtitle{
  margin:20px 0 0; color:rgba(244,240,230,.70);
  font-family:Inter, system-ui, sans-serif; font-size:clamp(16px, 1.6vw, 21px); font-weight:400;
}
@keyframes loader-spin{to{transform:rotate(336deg)}}
@keyframes loader-spin-reverse{to{transform:rotate(-342deg)}}
@keyframes loader-bob{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-3px) scale(1.02)}}
@keyframes loader-shell{0%,100%{transform:scale(1)}50%{transform:scale(1.02)}}
@keyframes loader-pulse{0%,100%{opacity:.4; transform:scale(1)}50%{opacity:.75; transform:scale(1.015)}}
@media(max-width:700px){
  #library-state[data-kind="loading"] .spinner-zone{width:180px; height:180px}
  #library-state[data-kind="loading"] .ball-shell{width:98px; height:98px}
  #library-state[data-kind="loading"] .ball-shell img{width:70px; height:70px}
}
@media(prefers-reduced-motion:reduce){
  #library-state[data-kind="loading"] .ring,
  #library-state[data-kind="loading"] .orbit,
  #library-state[data-kind="loading"] .ball-shell,
  #library-state[data-kind="loading"] .ball-shell img{animation:none}
}

dialog{color-scheme:light}
dialog::backdrop{background:rgba(7,16,12,.62)}
#create-dialog{position:relative;width:min(816px,94vw);max-width:calc(100vw - 32px);max-height:calc(100dvh - 28px);margin:auto;padding:21px 27px 19px;border:0;border-radius:18px;color:#f2efe6;color-scheme:dark;background:linear-gradient(rgba(8,28,22,.86),rgba(7,25,20,.92)),url("brand/login-board.png?v=v27") center/cover no-repeat;box-shadow:0 22px 72px rgba(0,0,0,.55),inset 0 0 44px rgba(0,0,0,.2);overflow:auto;isolation:isolate}
#create-dialog::backdrop{background:rgba(2,9,7,.66);backdrop-filter:blur(1.3px) saturate(.8)}
#create-dialog::before{content:"";position:absolute;inset:2px;border:2.4px solid #f5efe2;border-radius:20px;pointer-events:none;filter:url(#offball-login-chalk-border);opacity:.96}
#create-dialog::after{content:"";position:absolute;inset:8px 7px 7px 8px;border:1.4px solid rgba(242,239,230,.28);border-radius:17px;pointer-events:none;filter:url(#chalkStrokeSoft)}
#create-dialog #create-close{position:absolute;right:18px;top:14px;z-index:6;width:43px;height:43px;border:0;border-radius:50%;background:rgba(8,23,18,.42);color:#f2efe6;font:400 34px/1 "Patrick Hand",cursive;display:grid;place-items:center;box-shadow:0 3px 11px rgba(0,0,0,.16)}
#create-dialog #create-close::before{content:"";position:absolute;inset:0;border:2px solid rgba(243,239,228,.92);border-radius:50%;pointer-events:none;filter:url(#offball-login-chalk-border)}
#create-dialog #create-close:hover{color:#ee7d3f;background:rgba(20,18,13,.48)}
#create-dialog #create-close:hover::before{border-color:#e27a53;filter:url(#chalkStrokeOrange)}
#create-dialog .create-header{display:grid;grid-template-columns:78px 1fr;align-items:start;gap:12px;min-height:88px;padding:2px 210px 4px 8px}
#create-dialog .header-icon{width:67px;height:67px;max-width:none;object-fit:contain;transform:rotate(-4deg);filter:drop-shadow(0 0 1px rgba(255,255,255,.3))}
#create-dialog .create-titles{min-width:0;padding-top:3px}
#create-dialog .title{margin:0;display:inline-block;position:relative;font-family:"Patrick Hand",cursive;font-size:43px;font-weight:400;line-height:.96;letter-spacing:.4px;color:#f2efe6}
#create-dialog .title::after{content:"";display:block;width:98%;height:6px;margin-top:4px;border-radius:42% 58% 45% 55% / 55% 45% 58% 42%;background:linear-gradient(90deg,transparent 0%,rgba(213,111,74,.6) 3%,#d56f4a 10%,#e68a63 53%,#d56f4a 88%,rgba(213,111,74,.4) 97%,transparent 100%);transform:rotate(-.8deg) skewX(-6deg);opacity:.92;filter:url(#chalkUnderline)}
#create-dialog .subtitle{margin:10px 0 0;font-family:"Patrick Hand",cursive;font-size:19px;font-weight:400;color:rgba(242,239,230,.84)}
#create-dialog .doodle{position:absolute;right:78px;top:12px;width:156px;height:68px;display:block;overflow:visible;pointer-events:none}
#create-dialog .form{padding:0 8px;counter-reset:create-step}
#create-dialog .section{margin:4px 0 8px;counter-increment:create-step}
#create-dialog .section-head{display:flex;gap:11px;align-items:flex-start;margin-bottom:7px}
#create-dialog .num{position:relative;flex:0 0 36px;width:36px;height:36px;border:0;border-radius:50%;display:grid;place-items:center;font:400 22px/1 "Patrick Hand",cursive;color:#ee7d3f;transform:rotate(-3deg)}
#create-dialog .num::after{content:"";position:absolute;inset:0;border:2.6px solid #e27a53;border-radius:50%;pointer-events:none;filter:url(#chalkStrokeOrange)}
#create-dialog .num::before{content:counter(create-step)}
#create-dialog .section-title{margin-top:2px;font:400 20px/1.1 "Patrick Hand",cursive}
#create-dialog .section-title small{font:500 11px Inter,sans-serif;color:#b9bdb6}
#create-dialog .section-help{margin-top:4px;font:500 11px/1.25 Inter,sans-serif;color:#b9bdb6}
#create-dialog .options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px;margin-left:48px}
#create-dialog .options.three{grid-template-columns:repeat(3,minmax(0,1fr))}
#create-dialog .choice{position:relative;min-height:78px;border:0;border-radius:12px;background:rgba(3,18,14,.20);display:flex;align-items:center;gap:14px;padding:10px 16px;color:#f2efe6;text-align:left;overflow:visible;box-shadow:none;transform:translateZ(0)}
#create-dialog .choice::before{content:"";position:absolute;inset:0;border:2.2px solid rgba(243,239,228,.92);border-radius:15px;pointer-events:none;filter:url(#offball-login-chalk-border);opacity:.92}
#create-dialog .choice::after{content:"";position:absolute;inset:5px 6px 6px 5px;border-radius:11px;pointer-events:none;opacity:.16;background:repeating-linear-gradient(9deg,rgba(255,255,255,.028) 0 1px,transparent 1px 7px),repeating-linear-gradient(-11deg,rgba(255,255,255,.018) 0 1px,transparent 1px 9px);mix-blend-mode:screen}
#create-dialog .choice:hover{background:rgba(255,255,255,.025)}
#create-dialog .choice.is-on{background:radial-gradient(circle at 22% 28%,rgba(238,125,63,.12),transparent 38%),linear-gradient(92deg,rgba(79,50,26,.72),rgba(64,42,24,.57));box-shadow:inset 0 0 32px rgba(238,125,63,.055),inset 0 0 0 1px rgba(238,125,63,.035)}
#create-dialog .choice.is-on::before{border-color:#e27a53;filter:url(#chalkStrokeOrange);opacity:1}
#create-dialog .choice.is-on::after{opacity:.25;background:repeating-linear-gradient(8deg,rgba(238,125,63,.06) 0 1px,transparent 1px 8px),repeating-linear-gradient(-10deg,rgba(255,255,255,.018) 0 1px,transparent 1px 10px)}
#create-dialog .choice:disabled{opacity:.42;cursor:not-allowed}
#create-dialog .choice-icon{position:relative;z-index:2;width:56px;height:56px;max-width:none;flex:0 0 56px;object-fit:contain}
#create-dialog .choice-copy{position:relative;z-index:2;min-width:0;display:block}
#create-dialog .choice-name{display:block;font:400 22px/1.02 "Patrick Hand",cursive;letter-spacing:.12px;color:#f2efe6}
#create-dialog .choice.is-on .choice-name{color:#f18447}
#create-dialog .choice-desc{display:block;margin-top:6px;font:500 12px/1.35 Inter,sans-serif;color:rgba(213,213,205,.78)}
#create-dialog .corner-marks{display:none;position:absolute;right:6px;top:3px;z-index:6;width:27px;height:27px;background:url("brand/create/rays.png?v=v9") center/contain no-repeat;transform:rotate(-14deg);pointer-events:none}
#create-dialog .choice.is-on .corner-marks{display:block}
#create-dialog .options.three .choice{min-height:68px;padding:8px 12px;gap:8px;border-radius:10px}
#create-dialog .options.three .choice::before{border-radius:10px}
#create-dialog .options.three .choice-icon{width:44px;height:44px;flex-basis:44px}
#create-dialog .options.three .choice-name{font-size:18px}
#create-dialog .options.three .choice-desc{margin-top:4px;font-size:10px;line-height:1.3}
#create-dialog .options.three .corner-marks{right:10px;top:7px;transform:rotate(-14deg) scale(.88);transform-origin:top right}
#create-dialog .create-note{margin:8px 0 0 48px;padding:0;border-radius:0;background:none;color:rgba(213,213,205,.78);font:500 11px/1.4 Inter,sans-serif}
#create-dialog .name-wrap{position:relative;margin-left:48px}
#create-dialog #create-name{width:100%;height:43px;margin:0;border-radius:9px;border:0;background:rgba(3,14,11,.34);color:#f2efe6;font:500 14px Inter,sans-serif;padding:0 13px;outline:none}
#create-dialog #create-name::placeholder{color:rgba(185,189,182,.68)}
#create-dialog .name-wrap::after{content:"";position:absolute;inset:0;border:1.9px solid rgba(243,239,228,.92);border-radius:9px;pointer-events:none;filter:url(#offball-login-chalk-border);opacity:.92}
#create-dialog .name-wrap:focus-within::after{border-color:#e27a53;filter:url(#chalkStrokeOrange);opacity:1}
#create-dialog .create-footer{position:relative;display:flex;justify-content:space-between;align-items:flex-end;gap:14px;margin:18px 13px 2px 48px;padding-top:11px}
#create-dialog .create-actions{display:flex;align-items:center;gap:14px}
#create-dialog .create-footer::before{content:"";position:absolute;left:0;right:0;top:0;height:5px;border-radius:42% 58% 45% 55%;background:linear-gradient(90deg,transparent,#f3efe4 12%,rgba(243,239,228,.55) 77%,transparent);filter:url(#chalkUnderline);opacity:.8}
#create-dialog #create-cancel{position:relative;height:38px;min-width:106px;padding:0 14px;border-radius:8px;border:0;background:rgba(3,13,10,.26);color:#f2efe6;font:400 17px/1 "Patrick Hand",cursive}
#create-dialog #create-cancel::after{content:"";position:absolute;inset:0;border:1.9px solid rgba(243,239,228,.92);border-radius:8px;pointer-events:none;filter:url(#offball-login-chalk-border);opacity:.92}
#create-dialog #create-cancel:hover{transform:translateY(-1px)}
#create-dialog #create-accept{position:relative;min-width:147px;height:45px;padding:0 21px;border:0;border-radius:0;background:transparent;color:#fff8ef;font:400 17px/1 "Patrick Hand",cursive;filter:drop-shadow(0 2px 8px rgba(0,0,0,.18));overflow:visible}
#create-dialog #create-accept::before{content:"";position:absolute;inset:0;background:url("brand/create/create-btn.png?v=v9") center/100% 100% no-repeat;pointer-events:none}
#create-dialog #create-accept span{position:relative;z-index:1;display:block;letter-spacing:.2px;transform:translateY(-1px);white-space:nowrap}
#create-dialog .bottom-doodle{position:relative;width:94px;height:54px;flex:none;pointer-events:none}
#create-dialog .bottom-doodle span{position:absolute;font-family:"Patrick Hand",cursive;color:#f2efe6;font-size:27px;filter:url(#chalkStrokeWhite)}
#create-dialog .bottom-doodle .bx1{left:0;bottom:3px;transform:rotate(-16deg)}
#create-dialog .bottom-doodle .bo{left:35px;bottom:6px;font-size:31px}
#create-dialog .bottom-doodle .barrow{right:2px;top:0;font-size:37px;transform:rotate(16deg)}
@media(max-width:860px){
  #create-dialog{padding:18px 14px 14px}
  #create-dialog .create-header{grid-template-columns:68px 1fr;gap:8px;min-height:83px;padding-right:180px}
  #create-dialog .header-icon{width:59px;height:59px}
  #create-dialog .doodle{width:132px;height:58px;right:68px}
  #create-dialog .title{font-size:34px}
  #create-dialog .subtitle{font-size:16px}
  #create-dialog .options,#create-dialog .name-wrap,#create-dialog .create-note,#create-dialog .create-footer{margin-left:0}
  #create-dialog .options,#create-dialog .options.three{grid-template-columns:1fr}
  #create-dialog .bottom-doodle{display:none}
}
@media(max-width:560px){
  #create-dialog{width:min(816px,calc(100vw - 16px));max-height:calc(100dvh - 16px);border-radius:13px;overflow:auto}
  #create-dialog .create-header{grid-template-columns:50px 1fr;padding-right:48px}
  #create-dialog .header-icon{width:45px;height:45px}
  #create-dialog .doodle{display:none}
  #create-dialog .title{font-size:27px}
  #create-dialog .subtitle{font-size:14px}
  #create-dialog .num{width:30px;height:30px;flex-basis:30px;font-size:19px}
  #create-dialog .num::after{border-width:2px}
  #create-dialog .section-title{font-size:18px}
  #create-dialog .choice{min-height:78px;padding:10px 11px;gap:10px}
  #create-dialog .choice-icon{width:46px;height:46px;flex-basis:46px}
  #create-dialog .choice-name{font-size:18px}
  #create-dialog .choice-desc{margin-top:4px;font-size:10px}
  #create-dialog .create-footer{justify-content:stretch}
  #create-dialog .create-actions{flex:1}
  #create-dialog #create-cancel,#create-dialog #create-accept{flex:1}
}
dialog.ui-confirm,#assign-dialog,#password-dialog,#login-dialog{width:min(480px,calc(100vw - 32px));margin:auto;padding:0;border:0;border-radius:20px;background:#fff;color:#102d55}
dialog.ui-confirm h2,#assign-dialog h2,#password-dialog h2,#login-dialog h2{margin:0;padding:16px 18px;border-bottom:1px solid #e2e9f0;font-size:18px;color:#102d55}
dialog.ui-confirm p,#assign-dialog p{margin:0;padding:14px 18px;color:#6f8398;font-size:14px;line-height:1.5}
dialog.ui-confirm p:empty,#assign-dialog p:empty,#login-error:empty,#password-error:empty{display:none}
.modal-foot{display:flex;justify-content:flex-end;gap:8px;margin:0;padding:14px 18px;border-top:1px solid #e2e9f0}
.modal-foot button,#password-dialog button,#login-dialog button[type="submit"],#assign-save{min-height:40px;border-radius:12px;padding:0 14px;font-size:14px;font-weight:800;border:1px solid #cfdae5;background:#fff;color:#08284a;cursor:pointer}
#delete-accept{border:1px solid #efc1c1;background:#fff4f4;color:#ca4949}
#logout-accept,#assign-save,#password-dialog button[type="submit"],#login-dialog button[type="submit"]{border:0;background:linear-gradient(180deg,#ff7d18,#ff6900);color:#fff}
#password-dialog form,#login-dialog form{padding:8px 0 0}
#password-dialog label,#login-dialog label{display:flex;flex-direction:column;gap:6px;padding:0 18px 12px;font-size:13px;font-weight:700;color:#102d55}
#password-dialog input,#login-dialog input{height:42px;border-radius:10px;border:1px solid #c9d7e4;padding:0 12px;background:#fff;color:#102d55}
#assign-list{padding:0 18px 8px}
#assign-dialog .team-option{color:#14365f}
@media(max-width:720px){
  .btn.primary{width:100%;min-width:0}
  .btn:not(.primary){width:auto}
}
@media(max-width:860px){
  .search{width:100%}
  .search-actions{flex-direction:column;align-items:stretch}
  .actions{width:100%;padding-right:0}
}