@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap');

:root { --ink:#263a32; --muted:#7d8b82; --line:#eadfc9; --paper:#fff9ef; --white:#fffdf9; --lime:#f4cf68; --mint:#fff0b2; --gold:#e39a38; }
* { box-sizing:border-box; }
body { margin:0; background:radial-gradient(circle at 8% 3%,#fff2bd 0,transparent 27%),linear-gradient(135deg,#fffaf0 0%,#f8f3e8 100%); color:var(--ink); font-family:Manrope,Arial,sans-serif; }
.wild-hive-decor { position:absolute; z-index:0; top:18px; right:22px; width:205px; height:170px; pointer-events:none; opacity:.8; } .wild-hive-cells { position:absolute; top:7px; right:3px; display:grid; grid-template-columns:repeat(3,54px); gap:3px; transform:rotate(8deg); filter:drop-shadow(0 9px 7px #a76b1c22); } .wild-hive-cells i { display:block; width:54px; height:62px; background:linear-gradient(145deg,#f5b83d,#f8db68); clip-path:polygon(25% 2%,75% 2%,100% 50%,75% 98%,25% 98%,0 50%); } .wild-hive-cells i:nth-child(2),.wild-hive-cells i:nth-child(5) { transform:translateY(31px); } .wild-bee { position:absolute; display:block; font-size:23px; filter:drop-shadow(0 4px 3px #8f641f55); } .bee-one { top:25px; left:2px; animation:decor-flight-one 6s ease-in-out infinite; } .bee-two { top:113px; right:0; font-size:18px; animation:decor-flight-two 7s ease-in-out infinite; } .bee-three { top:78px; left:73px; font-size:15px; animation:decor-flight-three 5s ease-in-out infinite; } @keyframes decor-flight-one { 0%,100% { transform:translate(0,0) rotate(-12deg); } 50% { transform:translate(35px,-17px) rotate(12deg); } } @keyframes decor-flight-two { 0%,100% { transform:translate(0,0) rotate(12deg); } 50% { transform:translate(-37px,18px) rotate(-15deg); } } @keyframes decor-flight-three { 0%,100% { transform:translate(0,0) rotate(5deg); } 50% { transform:translate(24px,22px) rotate(18deg); } }
.page-shell { position:relative; z-index:1; max-width:1160px; margin:0 auto; padding:38px 20px 34px; }
.hero { display:flex; align-items:center; gap:18px; padding:22px 0 46px; }
.brand-mark { display:grid; place-items:center; width:51px; height:51px; border-radius:16px; background:var(--lime); color:var(--ink); font-size:26px; transform:rotate(12deg); }
.eyebrow { margin:0 0 7px; color:#88968f; font:500 11px/1.2 'DM Mono',monospace; letter-spacing:.1em; text-transform:uppercase; }
h1,h2,p { margin-top:0; } h1 { margin-bottom:7px; font-size:clamp(30px,4vw,47px); letter-spacing:-.055em; line-height:1; } h2 { margin:0; font-size:26px; letter-spacing:-.04em; }
.hero-copy { margin:0; color:var(--muted); font-size:14px; }
.hero-date { margin-left:auto; align-self:flex-start; color:#88968f; font:500 11px 'DM Mono',monospace; text-transform:uppercase; letter-spacing:.08em; }
.overview { display:grid; grid-template-columns:2fr 1fr 1fr; gap:13px; margin-bottom:54px; }
.stat-card { min-height:152px; display:flex; flex-direction:column; justify-content:space-between; padding:23px; border:1px solid var(--line); border-radius:21px; background:var(--white); }
.stat-main { background:var(--ink); color:white; border-color:var(--ink); }
.stat-label,.stat-note { font-size:12px; color:var(--muted); } .stat-main .stat-label,.stat-main .stat-note { color:#9eada5; }
.stat-card strong { font-size:37px; letter-spacing:-.06em; } .stat-card small { font-size:14px; letter-spacing:0; font-weight:500; }
.progress { height:5px; overflow:hidden; border-radius:10px; background:#34483f; } .progress span { display:block; width:100%; height:100%; border-radius:inherit; background:var(--lime); transition:width .3s; }
.section-heading { display:flex; justify-content:space-between; align-items:end; margin-bottom:19px; } .reset-button { border:1px solid var(--line); border-radius:10px; padding:10px 14px; background:transparent; color:var(--muted); font:500 12px Manrope; cursor:pointer; } .reset-button:hover { border-color:var(--ink); color:var(--ink); }
.workspace { display:grid; grid-template-columns:235px minmax(0,1fr) 315px; align-items:start; gap:12px; } .content-column { min-width:0; grid-column:2; grid-row:1; } 
.hives-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.hive-card { min-height:315px; padding:28px 25px 22px; border:1px solid var(--line); border-radius:24px; background:var(--white); box-shadow:0 8px 24px #10251f08; }
.hive-top { display:flex; justify-content:space-between; gap:10px; margin-bottom:23px; } .hive-number { color:#a2afa9; font:500 11px 'DM Mono'; } .hive-card h3 { margin:3px 0 6px; font-size:18px; letter-spacing:-.04em; }
.hive-total { color:var(--muted); font-size:12px; } .hive-total b { color:var(--ink); font-size:15px; }
.cells { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; } .cell { position:relative; display:grid; place-items:center; min-width:0; aspect-ratio:1.08; padding:8px; border:0; background:#cdd9d0; color:#496157; cursor:pointer; font:500 12px 'DM Mono'; filter:drop-shadow(0 3px 2px #10251f12); clip-path:polygon(25% 3%,75% 3%,100% 50%,75% 97%,25% 97%,0 50%); transition:transform .15s,filter .15s; } .cell::before { position:absolute; content:''; inset:2px; z-index:0; background:var(--mint); clip-path:inherit; } .cell:hover { transform:translateY(-3px) scale(1.03); filter:drop-shadow(0 6px 4px #10251f20); } .cell.occupied::before { background:#fff8e5; } .cell.drag-over { background:var(--gold); transform:scale(1.07); filter:drop-shadow(0 6px 5px #edb84b66); } .cell-number { position:relative; z-index:1; } .cell-bee { position:relative; z-index:1; display:grid; grid-template-columns:1fr auto; align-items:center; gap:3px; overflow:hidden; width:100%; color:var(--ink); font:700 11px/1.15 Manrope; text-align:center; } .cell-bee b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .bee-mini { grid-column:1/-1; font-size:25px; line-height:1; filter:drop-shadow(0 2px 1px #9b6c1333); } .remove-bee { width:21px; height:21px; padding:0; border:0; border-radius:50%; background:#f0d79c; color:#795b21; cursor:pointer; font:700 15px/21px Arial; } .remove-bee:hover { background:#d99e35; color:white; }
.hive-footer { display:flex; justify-content:space-between; align-items:center; margin-top:18px; padding-top:14px; border-top:1px solid var(--line); font-size:11px; color:var(--muted); } .availability { color:#638c38; font-weight:700; } .availability.none { color:#a4aba7; }
.roster-panel,.swarm-panel { position:sticky; top:18px; padding:21px 14px 17px; border:1px solid var(--line); border-radius:21px; background:var(--white); box-shadow:0 12px 30px #9d7b3a12; } .roster-panel { grid-column:1; grid-row:1; } .swarm-panel { grid-column:3; grid-row:1; } .panel-heading { display:flex; justify-content:space-between; align-items:start; gap:8px; margin-bottom:12px; } .panel-help { margin:0 0 17px; color:var(--muted); font-size:11px; line-height:1.55; } .live-indicator { color:#77934b; font:500 10px 'DM Mono'; text-transform:uppercase; white-space:nowrap; } .live-indicator i { display:inline-block; width:7px; height:7px; margin-right:5px; border-radius:50%; background:#8ab552; }
.swarm-list,.roster-list { display:flex; flex-direction:column; gap:13px; max-height:650px; overflow:auto; padding:2px; } .roster-group { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; } .roster-title { grid-column:1/-1; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:6px; margin-top:3px; padding:0 3px 3px; border-bottom:1px solid var(--line); } .roster-title span { color:#a58c59; font:500 8px 'DM Mono'; } .roster-title b { overflow:hidden; font-size:11px; text-overflow:ellipsis; white-space:nowrap; } .roster-title small { color:#9aa49d; font-size:9px; } .empty-roster { grid-column:1/-1; margin:0; padding:4px 4px 1px; color:#b2b7ae; font-size:10px; font-style:italic; } .free-group { padding-top:4px; border-top:1px dashed #e4d2ac; } .bee { display:flex; align-items:center; min-width:0; gap:7px; padding:8px 6px; border:1px solid var(--line); border-radius:13px; background:var(--white); font-size:11px; font-weight:600; cursor:grab; user-select:none; transition:transform .15s,border-color .15s,opacity .15s; } .bee:hover { transform:translateX(2px); border-color:#d5b96f; } .bee:active { cursor:grabbing; } .bee.assigned { border-color:#cbdcae; background:#f7f8df; } .bee.selected { border-color:var(--gold); box-shadow:0 0 0 3px #edb84b33; transform:translateX(2px); } .bee-info { display:flex; min-width:0; flex:1; flex-direction:column; gap:2px; } .bee-info b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .bee-info small { overflow:hidden; color:#9ba69f; font-size:8px; font-weight:500; text-overflow:ellipsis; white-space:nowrap; } .bee-location { display:block; max-width:42px; overflow:hidden; color:#82a052; font:500 8px 'DM Mono'; text-align:right; text-overflow:ellipsis; white-space:nowrap; } .bee-avatar { display:grid; place-items:center; flex:0 0 26px; width:26px; height:26px; border-radius:9px; background:#ffe5a3; color:#9b6c13; font-size:15px; } .remove-zone { display:flex; align-items:center; gap:10px; margin-top:14px; padding:11px; border:1px dashed #d8b96f; border-radius:13px; background:#fffaf0; color:#866b37; transition:background .15s,border-color .15s; } .remove-zone.drag-over { border-color:#d18e1b; background:#fff0c7; } .remove-icon { display:grid; place-items:center; width:28px; height:28px; border-radius:9px; background:#f4e2b4; font-size:21px; line-height:1; } .remove-zone b,.remove-zone small { display:block; } .remove-zone b { font-size:11px; } .remove-zone small { margin-top:3px; color:#a18b5f; font-size:9px; }
.hive-card { background:#fffdf9; }
.swarm-panel .swarm-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; max-height:650px; }
.swarm-panel .bee-location { display:none; }
.roster-name { overflow:hidden; padding:7px 9px; border-bottom:1px solid #f0e7d5; color:var(--ink); cursor:grab; font-size:11px; text-overflow:ellipsis; white-space:nowrap; } .roster-name:hover,.roster-name.selected { border-radius:8px; background:#fff4d0; color:#8a641e; } .roster-name:active { cursor:grabbing; }
.roster-name { user-select:text; font-weight:800; } .copy-button { border:1px solid #e5d5b4; border-radius:8px; padding:7px 8px; background:#fffaf0; color:#8a6b32; cursor:pointer; font:700 9px Manrope; white-space:nowrap; } .copy-button:hover { border-color:var(--gold); background:#fff1c9; }
.add-bee-form { margin:0 0 15px; padding:10px; border:1px solid #eadbb9; border-radius:14px; background:#fffaf0; } .add-bee-fields { display:grid; grid-template-columns:1fr; gap:6px; } .add-bee-form input { width:100%; min-width:0; border:1px solid #e8dcc5; border-radius:8px; padding:8px 9px; outline:none; background:#fffdf9; color:var(--ink); font:500 10px Manrope; } .add-bee-form input:focus { border-color:var(--gold); box-shadow:0 0 0 3px #edb84b33; } .add-bee-form button { width:100%; margin-top:7px; border:0; border-radius:8px; padding:9px; background:var(--ink); color:#fffdf4; cursor:pointer; font:700 10px Manrope; } .add-bee-form button:hover { background:#3a5548; } .form-message { display:block; min-height:12px; margin-top:6px; color:#78934a; font-size:9px; }
footer { margin-top:40px; color:#9aa59f; font-size:11px; text-align:center; }
@media (max-width:1100px) { .workspace { grid-template-columns:210px minmax(0,1fr) 285px; gap:10px; } }
@media (max-width:760px) { .workspace { grid-template-columns:1fr; } .roster-panel { grid-column:1; grid-row:1; position:static; } .content-column { grid-column:1; grid-row:2; } .swarm-panel { grid-column:1; grid-row:3; position:static; } .swarm-list,.roster-list { max-height:none; } }
.flying-bee { position:fixed; z-index:20; left:0; top:0; pointer-events:none; opacity:0; font-size:34px; filter:drop-shadow(0 6px 5px #10251f33); transform:translate(var(--from-x),var(--from-y)) rotate(-8deg) scale(.8); } .flying-bee.fly { animation:bee-flight .72s cubic-bezier(.22,.8,.32,1) forwards; } @keyframes bee-flight { 0% { opacity:0; transform:translate(var(--from-x),var(--from-y)) rotate(-12deg) scale(.7); } 12% { opacity:1; } 52% { transform:translate(calc((var(--from-x) + var(--to-x)) / 2),calc((var(--from-y) + var(--to-y)) / 2 - 54px)) rotate(10deg) scale(1.12); } 100% { opacity:0; transform:translate(var(--to-x),var(--to-y)) rotate(0deg) scale(.9); } }
.cells { display:flex; flex-direction:column; align-items:center; gap:0; padding:2px 0 6px; }
.cell-row { display:flex; justify-content:center; width:100%; gap:0; margin-top:-4px; }
.cell-row:first-child { margin-top:0; }
.cell-row.offset { transform:translateX(12.5%); }
.cell-row .cell { flex:0 0 25%; width:25%; }
.cell-row .cell:hover { transform:translateY(-3px) scale(1.03); }
.cell-row .cell.drag-over { transform:scale(1.07); }
@media (max-width:760px) { .wild-hive-decor { display:none; } .page-shell { padding:22px 17px 28px; } .hero { padding-bottom:32px; } .hero-date { display:none; } .overview { grid-template-columns:1fr 1fr; margin-bottom:39px; } .stat-main { grid-column:1/-1; } .hives-grid { grid-template-columns:1fr; } .hive-card { padding:24px 20px 20px; } }
@media (max-width:430px) { .hives-grid { grid-template-columns:1fr; } .section-heading { align-items:start; gap:12px; flex-direction:column; } .reset-button { align-self:flex-start; } }