:root{
--yes:#16a34a;
--yes-bg:#dcfce7;
--yes-text:#14532d;
--no:#dc2626;
--no-bg:#fee2e2;
--no-text:#7f1d1d;
--accent:#2563eb;
--bg:#f4f4f5;
--surface:#ffffff;
--surface-2:#f0f0f1;
--text:#18181b;
--text-2:#52525b;
--text-3:#a1a1aa;
--border:#e4e4e7;
}
[data-theme="dark"]{
--yes:#22c55e;
--yes-bg:#14532d;
--yes-text:#dcfce7;
--no:#f87171;
--no-bg:#7f1d1d;
--no-text:#fee2e2;
--accent:#3b82f6;
--bg:#09090b;
--surface:#141414;
--surface-2:#1e1e20;
--text:#fafafa;
--text-2:#a1a1aa;
--text-3:#52525b;
--border:#27272a;
}
*{box-sizing:border-box;margin:0;padding:0;}
body{
font-family:'Segoe UI',system-ui,-apple-system,sans-serif;
font-size:14px;
line-height:1.5;
background:var(--bg);
color:var(--text);
height:100dvh;
display:flex;
flex-direction:column;
transition:background .2s,color .2s;
}
header{
background:var(--surface);
border-bottom:1px solid var(--border);
padding:0 1.25rem;
height:46px;
display:flex;
align-items:center;
justify-content:space-between;
flex-shrink:0;
}
.h-title{font-size:.9rem;font-weight:700;letter-spacing:-.01em;}
.h-title span{font-weight:300;color:var(--text-2);margin-left:6px;font-size:.8rem;}
.status-badge{
font-size:.65rem;
font-weight:700;
letter-spacing:.07em;
text-transform:uppercase;
padding:3px 9px;
border-radius:99px;
background:var(--surface-2);
color:var(--text-3);
border:1px solid var(--border);
}
.app-body{display:flex;flex:1;overflow:hidden;}
.side-panel{
width:290px;
flex-shrink:0;
background:var(--surface);
border-right:1px solid var(--border);
display:flex;
flex-direction:column;
overflow:hidden;
}
.panel-toggle{
display:none;
width:100%;
padding:7px;
border:none;
border-bottom:1px solid var(--border);
background:var(--surface);
color:var(--accent);
font-size:.72rem;
font-weight:600;
cursor:pointer;
letter-spacing:.03em;
flex-shrink:0;
}
.side-inner{
flex:1;
overflow-y:auto;
padding:.875rem;
display:flex;
flex-direction:column;
gap:1rem;
}
.pool-wrap{flex:1;display:flex;flex-direction:column;overflow:hidden;}
.pool-header{
padding:.5rem .875rem;
border-bottom:1px solid var(--border);
background:var(--surface);
display:flex;
align-items:center;
justify-content:space-between;
font-size:.78rem;
color:var(--text-2);
flex-shrink:0;
}
.pool-area{
flex:1;
background:var(--bg);
background-image:radial-gradient(var(--border) 1px,transparent 1px);
background-size:20px 20px;
overflow:auto;
padding:14px;
display:flex;
flex-wrap:wrap;
align-content:flex-start;
gap:8px;
}
.empty-state{width:100%;text-align:center;color:var(--text-3);margin-top:48px;font-size:.85rem;}
.section{padding-top:1rem;border-top:1px solid var(--border);}
.section:first-child{padding-top:0;border-top:none;}
.sec-title{
font-size:.62rem;
font-weight:700;
letter-spacing:.08em;
text-transform:uppercase;
color:var(--text-3);
margin-bottom:.6rem;
}
.switch-row{
display:flex;
gap:3px;
background:var(--surface-2);
padding:3px;
border-radius:6px;
margin-bottom:.5rem;
}
.sw-btn{
flex:1;
padding:4px;
border:none;
border-radius:4px;
background:transparent;
color:var(--text-2);
cursor:pointer;
font-size:.72rem;
font-weight:500;
transition:all .15s;
}
.sw-btn.active{
background:var(--surface);
color:var(--text);
box-shadow:0 1px 2px rgba(0,0,0,.1);
}
.field{margin-bottom:.625rem;}
.field label{display:block;font-size:.72rem;font-weight:500;color:var(--text-2);margin-bottom:3px;}
.field input,.field select{
width:100%;
padding:5px 7px;
border:1px solid var(--border);
border-radius:5px;
font-size:.82rem;
background:var(--surface-2);
color:var(--text);
outline:none;
transition:border-color .15s;
}
.field input:focus,.field select:focus{border-color:var(--accent);}
.field input:disabled{opacity:.4;cursor:not-allowed;}
.field small{display:block;font-size:.68rem;color:var(--text-3);margin-top:2px;}
.btn{
width:100%;
padding:6px 10px;
border:none;
border-radius:5px;
font-size:.78rem;
font-weight:600;
cursor:pointer;
transition:opacity .15s;
}
.btn:hover:not(:disabled){opacity:.85;}
.btn:disabled{opacity:.35;cursor:not-allowed;}
.btn-accent{background:var(--accent);color:#fff;}
.btn-yes{background:var(--yes);color:#fff;margin-bottom:4px;}
.btn-no{background:var(--no);color:#fff;}
.btn-ghost{background:transparent;border:1px solid var(--border);color:var(--text-2);}
.price-row{display:flex;gap:.4rem;margin-bottom:.5rem;}
.price-chip{flex:1;text-align:center;padding:6px 4px;border-radius:5px;}
.price-chip.yes{background:var(--yes);color:#fff;}
.price-chip.no{background:var(--no);color:#fff;}
.chip-label{display:block;font-size:.58rem;opacity:.85;letter-spacing:.06em;}
.chip-val{display:block;font-size:.95rem;font-weight:800;}
.formula-box{
font-family:'Courier New',monospace;
font-size:.7rem;
line-height:1.7;
color:var(--text-2);
background:var(--surface-2);
border:1px solid var(--border);
border-radius:5px;
padding:7px 9px;
margin-bottom:.3rem;
}
.formula-hint{font-size:.63rem;color:var(--text-3);}
.c-yes{color:var(--yes);}
.c-no{color:var(--no);}
.stat-grid{display:grid;gap:.4rem;}
.stat-card{
background:var(--surface-2);
border:1px solid var(--border);
border-radius:5px;
padding:.5rem .625rem;
}
.stat-label{
font-size:.6rem;
font-weight:700;
letter-spacing:.07em;
text-transform:uppercase;
color:var(--text-3);
margin-bottom:3px;
}
.stat-val{font-size:1rem;font-weight:700;color:var(--text);}
.stat-sub{font-size:.67rem;color:var(--text-3);margin-top:2px;}
.kv-row{display:flex;justify-content:space-between;font-size:.75rem;padding:2px 0;}
.kv-row+.kv-row{border-top:1px solid var(--border);}
.member{
width:88px;
height:88px;
border-radius:6px;
padding:6px;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
cursor:pointer;
transition:transform .15s,box-shadow .15s;
border:1.5px solid transparent;
font-size:.68rem;
text-align:center;
animation:popIn .25s ease-out;
}
.member:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,.12);}
.member.type-yes{background:var(--yes-bg);border-color:var(--yes);color:var(--yes-text);}
.member.type-no{background:var(--no-bg);border-color:var(--no);color:var(--no-text);}
.member-uuid{font-family:'Courier New',monospace;font-weight:700;font-size:.7rem;margin-bottom:2px;}
.member-info{line-height:1.3;}
.modal-overlay{
position:fixed;
inset:0;
background:rgba(0,0,0,.45);
display:none;
justify-content:center;
align-items:center;
z-index:1000;
}
#dialogModal{z-index:2000;}
.modal{
background:var(--surface);
border:1px solid var(--border);
border-radius:10px;
padding:1.375rem;
width:400px;
max-width:92vw;
max-height:85vh;
overflow-y:auto;
box-shadow:0 16px 32px rgba(0,0,0,.15);
color:var(--text);
}
.modal h3{font-size:.95rem;margin-bottom:.625rem;}
.modal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:.875rem;}
.modal-head h3{margin-bottom:0;}
.modal ul,.modal ol{text-align:left;line-height:1.9;color:var(--text-2);margin:.75rem 0 .75rem 1.25rem;}
.modal-actions{margin-top:1.125rem;display:flex;gap:.625rem;}
.summary-row{display:flex;justify-content:space-between;font-size:.8rem;padding:5px 0;border-bottom:1px solid var(--border);}
.win-text{font-size:1.05rem;font-weight:700;text-align:center;padding:.625rem 0;}
.input-group{margin-bottom:.875rem;}
.input-group label{display:block;font-size:.78rem;font-weight:600;margin-bottom:4px;}
.input-group input{
width:100%;
padding:7px 9px;
font-size:.95rem;
border:1.5px solid var(--accent);
border-radius:5px;
background:var(--surface-2);
color:var(--text);
outline:none;
}
@keyframes popIn{0%{transform:scale(.8);opacity:0;}100%{transform:scale(1);opacity:1;}}
.hidden{display:none!important;}
@media(max-width:768px){
.app-body{flex-direction:column;}
.side-panel{
width:100%;
border-right:none;
border-top:1px solid var(--border);
max-height:44vh;
order:2;
}
.side-panel.collapsed{max-height:40px;overflow:hidden;}
.pool-wrap{order:1;flex:1;min-height:0;}
.panel-toggle{display:block;}
}
@media(max-width:480px){
.member{width:76px;height:76px;}
}