:root {
  --bg:#101319;
  --bg2:#151922;
  --bg3:#1a1f29;
  --bg-card:#161a22;
  --panel:#151922;
  --panel-2:#1a1f29;
  --panel-3:#161a22;
  --line:rgba(255,255,255,.09);
  --line-soft:rgba(255,255,255,.09);
  --border:rgba(255,255,255,.09);
  --border2:rgba(255,255,255,.14);
  --text:#deded8;
  --text-white:#f4f4ef;
  --text2:rgba(226,226,218,.76);
  --text3:rgba(218,218,210,.52);
  --muted:rgba(218,218,210,.52);
  --accent:#a855f7;
  --accent2:#c084fc;
  --accent-rgb:168,85,247;
  --tools-rgb:150,20,90;
  --accent-soft:rgba(168,85,247,.13);
  --pink:#e963a8;
  --danger:#f87171;
  --fire:#ef4444;
  --water:#3b82f6;
  --earth:#84cc16;
  --air:#a855f7;
  --light:#f0c040;
  --neutral:#a89070;
}

* { box-sizing:border-box; }
html,body { min-height:100%; }
body {
  margin:0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 20%,rgba(var(--tools-rgb),.28),transparent 70%),
    radial-gradient(ellipse 50% 80% at 10% 80%,rgba(110,15,70,.22),transparent 60%),
    radial-gradient(ellipse 50% 80% at 90% 20%,rgba(130,20,90,.16),transparent 60%),
    var(--bg);
  color:var(--text);
  font-family:'Inter','Segoe UI',system-ui,sans-serif;
  overflow:hidden;
}
button,input,select,textarea { font:inherit; }
button { color:inherit; }

.top-glow { position:fixed;z-index:20;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,transparent,var(--accent),#f0c040,var(--pink),transparent);box-shadow:0 0 18px rgba(var(--accent-rgb),.5); }
.app-shell { height:100vh;padding:14px;display:grid;grid-template-columns:260px minmax(460px,1fr) 430px;grid-template-rows:72px minmax(0,1fr);grid-template-areas:"header header header" "characters workspace spells";gap:14px;position:relative;z-index:1; }
[hidden] { display:none !important; }
.login-gate { position:fixed; inset:0; z-index:50; display:grid; place-items:center; padding:24px;
  background:radial-gradient(circle at 50% 12%,rgba(var(--accent-rgb),.22),transparent 45%),rgba(8,10,14,.96); }
.login-gate-card { width:min(400px,100%); text-align:center; padding:34px 30px; border-radius:18px;
  border:1px solid rgba(var(--accent-rgb),.28); background:linear-gradient(180deg,rgba(21,25,34,.98),rgba(16,19,25,.98));
  box-shadow:0 24px 70px rgba(0,0,0,.55); }
.login-gate-card .brand-logo { width:64px; height:64px; margin:0 auto 10px; display:block; }
.login-gate-card .brand-title { font-size:28px; margin:0 0 8px; }
.login-gate-card p { color:var(--muted); font-size:14px; line-height:1.5; margin:0 auto 22px; max-width:320px; }
.login-gate-card .btn.primary { width:100%; height:46px; font-size:15px; justify-content:center; }
.gate-dl { display:inline-block; margin-top:14px; color:#8fb4e8; font-size:12px; text-decoration:none; }
.gate-dl:hover { text-decoration:underline; }
.panel { background:linear-gradient(180deg,rgba(21,25,34,.97),rgba(16,19,25,.98));border:1px solid rgba(var(--accent-rgb),.2);border-radius:12px;box-shadow:0 14px 36px rgba(0,0,0,.32),0 0 24px rgba(var(--accent-rgb),.035);min-height:0; }

.app-header { grid-area:header;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;padding:10px 16px;background:rgba(13,21,35,.92);border:1px solid var(--line-soft);border-radius:16px;backdrop-filter:blur(12px); }
.app-header .brand { justify-self:start; }
.app-header .header-right { justify-self:end; }
.download-cta { justify-self:center; display:inline-flex; align-items:center; gap:11px; text-decoration:none; color:#fff;
  padding:8px 18px; border-radius:12px; background:linear-gradient(135deg,#00d4ff,#7c5cff 55%,#f472b6);
  box-shadow:0 6px 20px rgba(124,92,255,.35),inset 0 1px 0 rgba(255,255,255,.25); transition:transform .12s,box-shadow .12s; white-space:nowrap; }
.download-cta:hover { transform:translateY(-1px); box-shadow:0 9px 26px rgba(124,92,255,.5); }
.download-cta:active { transform:translateY(0); }
.download-cta-ico { font-size:20px; line-height:1; }
.download-cta-txt { display:flex; flex-direction:column; line-height:1.1; }
.download-cta-txt b { font-size:14px; font-weight:800; letter-spacing:.01em; }
.download-cta-txt small { font-size:10.5px; opacity:.85; }
.brand { display:flex;align-items:center;gap:10px;color:var(--text);text-decoration:none; }
.header-right { margin-left:auto; display:flex; align-items:center; gap:10px; }
.brand-logo { width:48px;height:48px;object-fit:contain;flex-shrink:0;filter:drop-shadow(0 3px 8px rgba(0,0,0,.5)); }
.brand-title { font-family:'Cinzel',serif;font-size:22px;font-weight:700;letter-spacing:.05em;background:linear-gradient(90deg,#00d4ff,#90e0ef,#f472b6);-webkit-background-clip:text;background-clip:text;color:transparent;white-space:nowrap; }
.brand b { display:block;font-size:17px;letter-spacing:.04em; }
.brand small { display:block;color:var(--muted);font-size:12px;margin-top:1px; }
.header-copy { flex:1; }
.header-copy h1 { margin:0;font-size:19px;letter-spacing:.035em; }
.header-copy p { margin:2px 0 0;color:var(--muted);font-size:13px; }
.header-actions { display:flex;gap:8px; }
.team-switcher { display:flex;align-items:center;gap:7px;padding:6px 8px;border:1px solid rgba(var(--accent-rgb),.2);border-radius:10px;background:rgba(var(--accent-rgb),.05); }
.team-switcher label { color:var(--text3);font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase; }
.team-switcher select { min-width:150px;max-width:220px;height:30px;padding:4px 28px 4px 8px;border:1px solid var(--border2);border-radius:7px;background:var(--bg3);color:var(--text-white);font:700 12px 'Inter',sans-serif;outline:none; }
.team-switcher select:focus { border-color:var(--accent); }
.team-level { min-width:54px;padding:4px 7px;border:1px solid rgba(var(--accent-rgb),.3);border-radius:7px;color:#d8b4fe;background:rgba(var(--accent-rgb),.09);font-size:11px;font-weight:800;text-align:center;white-space:nowrap; }

.btn,.icon-btn,.combo-add { border:1px solid var(--line);background:#162237;border-radius:9px;padding:8px 12px;cursor:pointer;font-weight:700;transition:border-color .15s,background .15s,transform .1s,box-shadow .15s; }
.btn:hover,.icon-btn:hover,.combo-add:hover { border-color:rgba(var(--accent-rgb),.7);background:var(--bg3); }
.btn:active,.icon-btn:active,.combo-add:active { transform:translateY(1px); }
.btn.primary,.icon-btn.primary { color:#fff;border-color:var(--accent2);background:linear-gradient(135deg,var(--accent2),var(--accent));box-shadow:0 7px 18px rgba(var(--accent-rgb),.16); }
.btn.primary:hover,.icon-btn.primary:hover { box-shadow:0 7px 24px rgba(var(--accent-rgb),.28); }
.btn.ghost { background:rgba(17,30,48,.72); }
.btn.danger { color:#fca5a5;background:rgba(127,29,29,.13);border-color:rgba(248,113,113,.26); }
.btn.danger:hover { background:rgba(127,29,29,.24);border-color:var(--danger); }
.btn.compact { padding:6px 10px;font-size:12px; }
.btn.wide { width:100%; }
.icon-btn { width:34px;height:34px;padding:0;font-size:21px;display:grid;place-items:center; }

.panel-heading { display:flex;align-items:center;justify-content:space-between;padding:15px 16px 13px;border-bottom:1px solid var(--line-soft); }
.panel-heading h2 { margin:2px 0 0;font-size:15px;letter-spacing:.035em; }
.eyebrow { color:var(--accent);font-size:10px;text-transform:uppercase;letter-spacing:.13em;font-weight:700; }
.sidebar-heading { min-width:0; }
.sidebar-tabs { display:flex;gap:4px;margin-top:5px; }
.sidebar-tab { border:0;background:transparent;color:var(--text3);padding:3px 7px 5px;border-bottom:2px solid transparent;cursor:pointer;font-size:13px;font-weight:800; }
.sidebar-tab:hover { color:var(--text2); }
.sidebar-tab.active { color:var(--text-white);border-bottom-color:var(--accent); }

.characters-panel { grid-area:characters;display:flex;flex-direction:column;overflow:hidden; }
.character-list { flex:1;overflow:auto;padding:10px;scrollbar-width:thin;scrollbar-color:#2c415e transparent; }
.character-card { width:100%;border:1px solid transparent;background:transparent;color:var(--text);border-radius:12px;padding:9px;display:grid;grid-template-columns:48px minmax(0,1fr);gap:10px;text-align:left;cursor:pointer;position:relative;overflow:hidden;transition:.15s; }
.character-card + .character-card { margin-top:5px; }
.character-card { --char-rgb:168,85,247; background:linear-gradient(100deg,rgba(var(--char-rgb),.07),transparent 72%);border-color:rgba(var(--char-rgb),.16); }
.character-card:hover { background:linear-gradient(100deg,rgba(var(--char-rgb),.15),rgba(var(--char-rgb),.035));border-color:rgba(var(--char-rgb),.38); }
.character-card.active { background:linear-gradient(100deg,rgba(var(--char-rgb),.2),rgba(var(--char-rgb),.045));border-color:rgba(var(--char-rgb),.62);box-shadow:inset 3px 0 rgb(var(--char-rgb)),0 0 14px rgba(var(--char-rgb),.09); }
.character-thumb { height:52px;border-radius:9px;background:radial-gradient(circle at 50% 35%,rgba(var(--char-rgb),.25),rgba(9,16,27,.55));overflow:hidden;display:flex;align-items:center;justify-content:center; }
.character-thumb img { width:46px;height:46px;object-fit:contain;filter:drop-shadow(0 4px 5px rgba(0,0,0,.55)); }
.character-info { min-width:0;align-self:center; }
.character-info b { display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:15px; }
.character-info span { display:block;color:var(--muted);font-size:12px;margin-top:2px; }
.character-empty { text-align:center;color:var(--muted);font-size:13px;line-height:1.45;padding:30px 15px; }
.character-footer { padding:12px;border-top:1px solid var(--line-soft); }
.character-footer small { display:block;text-align:center;color:#52657c;margin-top:7px;font-size:10px; }
.team-card { --char-rgb:168,85,247;display:block;padding:0; }
.team-card-main { width:100%;min-width:0;border:0;background:transparent;color:inherit;padding:9px 38px 9px 9px;display:grid;grid-template-columns:48px minmax(0,1fr);gap:10px;text-align:left;cursor:pointer; }
.team-thumb { background:radial-gradient(circle at 50% 38%,rgba(var(--accent-rgb),.22),rgba(9,16,27,.62)); }
.team-thumb-image { width:48px!important;height:48px!important;object-fit:contain!important; }
.team-thumb-fallback { color:#d8b4fe;font-size:22px;font-weight:800; }
.team-card-edit { position:absolute;right:8px;top:50%;transform:translateY(-50%);width:27px;height:27px;border:1px solid transparent;border-radius:7px;background:transparent;color:var(--text3);cursor:pointer; }
.team-card-edit:hover { color:var(--text-white);border-color:rgba(var(--accent-rgb),.45);background:rgba(var(--accent-rgb),.12); }
.character-card { padding:0;display:block; }
.character-card-main { width:100%;min-width:0;border:0;background:transparent;color:inherit;padding:9px 38px 9px 9px;display:grid;grid-template-columns:48px minmax(0,1fr);gap:10px;text-align:left;cursor:pointer; }
.character-card-edit { position:absolute;right:8px;top:50%;transform:translateY(-50%);width:27px;height:27px;border:1px solid transparent;border-radius:7px;background:transparent;color:var(--text3);cursor:pointer;z-index:2; }
.character-card-edit:hover { color:var(--text-white);border-color:rgba(var(--char-rgb),.45);background:rgba(var(--char-rgb),.12); }

.workspace { grid-area:workspace;overflow:hidden;position:relative; }
.workspace-empty { height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:32px; }
.workspace-empty h2 { margin:20px 0 5px;font-size:20px; }
.workspace-empty p { max-width:410px;margin:0 0 20px;color:var(--muted);font-size:14px; }
.empty-actions { display:flex;align-items:center;justify-content:center;gap:9px;flex-wrap:wrap; }
.empty-orbit { width:82px;height:82px;border:1px solid rgba(var(--accent-rgb),.36);border-radius:50%;display:grid;place-items:center;box-shadow:0 0 36px rgba(var(--accent-rgb),.09),inset 0 0 24px rgba(var(--accent-rgb),.08);position:relative; }
.empty-orbit::before { content:'';position:absolute;inset:10px;border:1px dashed rgba(233,99,168,.35);border-radius:50%; }
.empty-orbit span { font-size:34px;color:var(--accent); }
.workspace-content { height:100%;display:flex;flex-direction:column;min-height:0; }
.character-hero { --char-rgb:168,85,247;height:104px;min-height:104px;display:flex;align-items:center;padding:13px 18px;border-bottom:1px solid rgba(var(--char-rgb),.2);position:relative;overflow:hidden;background:radial-gradient(360px 160px at 8% 50%,rgba(var(--char-rgb),.16),transparent 70%); }
.hero-art-wrap { width:76px;height:72px;overflow:hidden;display:flex;justify-content:center;align-items:center;margin-right:14px;border:0;background:transparent; }
.hero-art-wrap img { width:68px;height:68px;object-fit:contain;filter:drop-shadow(0 7px 6px rgba(0,0,0,.55)); }
.hero-identity { flex:1; }
.hero-identity h2 { margin:3px 0 7px;font-size:22px;letter-spacing:.025em; }
.level-chip { display:inline-flex;border:1px solid rgba(var(--accent-rgb),.42);background:rgba(var(--accent-rgb),.1);color:var(--text-white);border-radius:999px;padding:3px 9px;font-size:11px;font-weight:700; }
.hero-toggle { margin-left:10px;background:transparent;border:0;color:#8fb4e8;font:600 12px 'Inter',sans-serif;cursor:pointer;text-decoration:underline;text-underline-offset:2px; }
.hero-toggle:hover { color:#b9d3f2; }

.combo-toolbar { min-height:53px;display:flex;align-items:center;padding:8px 13px;border-bottom:1px solid var(--line-soft);gap:7px; }
.combo-tabs { display:flex;gap:6px;overflow:auto;scrollbar-width:none;flex:1; }
.combo-tabs::-webkit-scrollbar { display:none; }
.combo-tab { flex:none;max-width:180px;border:1px solid var(--line);background:#101b2d;color:#8195ae;border-radius:9px;padding:7px 12px;font-weight:700;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.combo-tab:hover { color:var(--text);border-color:#405675; }
.combo-tab.active { color:#a4f2ff;border-color:rgba(41,200,232,.58);background:rgba(41,200,232,.12);box-shadow:inset 0 -2px var(--accent); }
.combo-add { flex:none;width:32px;height:32px;padding:0;font-size:19px; }
.combo-title-row { display:flex;align-items:end;gap:14px;padding:13px 16px; }
.combo-name-field { flex:1;min-width:0; }
.combo-name-field span,.form-grid label>span { display:block;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.08em;font-weight:700;margin-bottom:5px; }
.combo-name-field input,.form-grid input,.form-grid select,.modal textarea,.search-field input { width:100%;border:1px solid var(--line);background:#0b1423;color:var(--text);border-radius:9px;outline:none; }
.combo-name-field input { padding:8px 10px;font-size:16px;font-weight:700; }
.combo-name-field input:focus,.form-grid input:focus,.form-grid select:focus,.modal textarea:focus,.search-field:focus-within { border-color:var(--accent);box-shadow:0 0 0 3px rgba(var(--accent-rgb),.1); }
.combo-actions { display:flex;gap:7px; }

.combo-sequence { flex:1;min-height:0;overflow:auto;padding:5px 16px 16px;scrollbar-width:thin;scrollbar-color:#2c415e transparent; }
.sequence-empty { min-height:210px;height:100%;border:1px dashed #30445f;border-radius:14px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:var(--muted);background:rgba(5,11,20,.27); }
.sequence-empty.drag-over { border-color:var(--accent);background:rgba(41,200,232,.08); }
.sequence-empty b { color:#a7bacf;font-size:15px;margin-bottom:4px; }
.sequence-list { display:flex;flex-direction:column;gap:8px;min-height:100%;padding-bottom:8px; }
.sequence-card { display:grid;grid-template-columns:28px 50px minmax(0,1fr) auto 32px;align-items:center;gap:11px;border:1px solid var(--line);border-left:5px solid var(--neutral);border-radius:11px;background:linear-gradient(90deg,rgba(23,35,53,.94),rgba(13,22,36,.94));padding:8px 8px 8px 7px;cursor:grab;transition:transform .12s,border-color .12s,opacity .12s; }
.sequence-card:hover { border-color:#3c5270;transform:translateX(2px); }
.sequence-card.dragging { opacity:.35; }
.sequence-card.drag-over { box-shadow:0 -3px var(--accent); }
.sequence-index { width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:#0b1423;color:#7f95af;font-weight:700;font-size:12px; }
.sequence-icon { width:48px;height:48px;border-radius:9px;object-fit:cover;background:#09111e;box-shadow:0 4px 12px rgba(0,0,0,.3); }
.sequence-main { min-width:0; }
.sequence-main b { display:block;font-size:16px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.sequence-main small { display:block;color:var(--muted);margin-top:2px;font-size:11px; }
.costs { display:flex;gap:5px; }
.cost { border:1px solid #30435e;background:#0b1423;border-radius:6px;padding:3px 6px;font-size:11px;color:#b9c8da;font-weight:700;white-space:nowrap; }
.remove-spell { border:0;background:transparent;color:#61758d;width:30px;height:30px;border-radius:7px;font-size:18px;cursor:pointer; }
.remove-spell:hover { color:#fca5a5;background:rgba(248,113,113,.1); }
.combo-hint { border-top:1px solid var(--line-soft);padding:9px 16px;color:#657b95;font-size:11px; }
.combo-hint span { color:var(--pink);font-weight:700;text-transform:uppercase;letter-spacing:.08em;margin-right:5px; }

.spell-panel { grid-area:spells;display:flex;flex-direction:column;overflow:hidden; }
.spell-heading { min-height:67px; }
.spell-count { min-width:31px;height:25px;border-radius:20px;display:grid;place-items:center;color:#f0c040;background:rgba(240,192,64,.1);border:1px solid rgba(240,192,64,.3);font-size:11px;font-weight:700; }
.spell-tools { padding:11px;border-bottom:1px solid var(--line-soft); }
.search-field { display:flex;align-items:center;gap:7px;border:1px solid var(--line);background:#0b1423;border-radius:9px;padding:0 9px;color:#70849c; }
.search-field input { border:0;background:transparent;padding:8px 0;box-shadow:none!important; }
.element-filters { display:flex;gap:5px;margin-top:9px; }
.element-filter { flex:1;min-width:0;height:29px;border:1px solid var(--line);border-radius:7px;background:#101a2b;color:#71859e;cursor:pointer;font-size:10px;font-weight:700;padding:0; }
.element-filter:hover,.element-filter.active { color:var(--text);border-color:var(--filter-color,var(--accent));background:color-mix(in srgb,var(--filter-color,var(--accent)) 12%,#101a2b); }
.spell-library { flex:1;overflow:auto;padding:12px;scrollbar-width:thin;scrollbar-color:#2c415e transparent; }
.spell-section + .spell-section { margin-top:17px; }
.spell-section h3 { margin:0 0 8px;color:#71869f;font-size:10px;text-transform:uppercase;letter-spacing:.11em; }
.spell-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px; }
.spell-card { min-width:0;border:1px solid var(--line);border-left:4px solid var(--neutral);background:#0e1828;border-radius:9px;padding:6px;display:grid;grid-template-columns:40px minmax(0,1fr);gap:7px;align-items:center;text-align:left;cursor:pointer;transition:.13s; }
.spell-card:hover { transform:translateY(-1px);border-color:#405b7c;background:#142137;box-shadow:0 7px 14px rgba(0,0,0,.18); }
.spell-card:active { transform:scale(.98); }
.spell-card img { width:39px;height:39px;object-fit:cover;border-radius:7px;background:#08111e; }
.spell-card b { display:block;font-size:12px;line-height:1.06;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.spell-card small { display:block;color:#667b94;font-size:10px;margin-top:3px; }
.library-placeholder { min-height:180px;display:flex;align-items:center;justify-content:center;text-align:center;color:#61758e;font-size:13px;padding:20px; }
.library-error { color:#fca5a5; }

.modal { width:min(640px,calc(100vw - 30px));border:1px solid #2b3b53;border-radius:16px;padding:0;background:#101928;color:var(--text);box-shadow:0 24px 70px rgba(0,0,0,.65); }
.modal::backdrop { background:rgba(2,6,12,.76);backdrop-filter:blur(6px); }
.modal form { margin:0; }
.modal-head { display:flex;align-items:center;justify-content:space-between;padding:18px 20px 14px;border-bottom:1px solid var(--line-soft); }
.modal-head h2 { margin:2px 0 0;font-size:18px; }
.modal-close { border:0;background:transparent;color:#71849a;font-size:24px;cursor:pointer;width:32px;height:32px;border-radius:8px; }
.modal-close:hover { color:var(--text);background:#1b2a40; }
.form-grid { display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:18px 20px 0; }
.form-grid label:first-child { grid-column:1/-1; }
.character-form-grid { grid-template-columns:1fr; }
.form-grid input,.form-grid select { height:39px;padding:7px 10px; }
.modal-preview { height:108px;margin:17px 20px 0;border:1px solid var(--line);border-radius:12px;overflow:hidden;display:flex;align-items:center;background:radial-gradient(260px 120px at 10% 40%,rgba(var(--accent-rgb),.16),transparent 70%),#0b1423; }
.modal-preview img { width:78px;height:78px;object-fit:contain;margin:0 18px;filter:drop-shadow(0 7px 6px rgba(0,0,0,.5)); }
.modal-preview b { display:block;font-size:17px; }
.modal-preview small { display:block;max-width:260px;color:var(--muted);font-size:12px;margin-top:5px;line-height:1.3; }
.modal-actions { display:flex;align-items:center;gap:8px;padding:16px 20px 18px; }
.grow { flex:1; }
.modal-copy { color:var(--muted);font-size:13px;line-height:1.45;margin:17px 20px 10px; }
.modal-copy code { color:#9eefff; }
.modal textarea { display:block;width:calc(100% - 40px);margin:0 20px;padding:10px;resize:vertical;min-height:130px; }
.team-modal { width:min(780px,calc(100vw - 30px)); }
.team-modal form { max-height:calc(100vh - 42px);overflow:auto;scrollbar-width:thin;scrollbar-color:#4b3267 transparent; }
.team-form-grid label:first-child { grid-column:auto; }
.team-members-head { display:flex;align-items:center;justify-content:space-between;margin:17px 20px 8px;color:var(--text3);font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase; }
.team-members-head b { color:#d8b4fe; }
.team-asset-help { margin:0 20px 9px;color:var(--text3);font-size:11px; }
.team-asset-results { min-height:92px;max-height:270px;overflow:auto;margin:0 20px;padding:9px;border:1px solid var(--border2);border-radius:11px;background:rgba(8,12,19,.46);scrollbar-width:thin;scrollbar-color:#4b3267 transparent; }
.team-asset-bracket { margin:0 1px 8px;color:#d8b4fe;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.08em; }
.team-asset-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px; }
.team-asset-card { min-width:0;min-height:62px;border:1px solid var(--line);border-radius:9px;background:var(--bg3);color:var(--text);padding:6px;display:grid;grid-template-columns:50px minmax(0,1fr);gap:8px;align-items:center;text-align:left;cursor:pointer; }
.team-asset-card:hover,.team-asset-card.selected { border-color:rgba(var(--accent-rgb),.62);background:rgba(var(--accent-rgb),.11);box-shadow:0 0 13px rgba(var(--accent-rgb),.08); }
.team-asset-image { width:48px;height:48px;object-fit:contain;filter:drop-shadow(0 4px 4px rgba(0,0,0,.5)); }
.team-asset-card span { min-width:0; }
.team-asset-card b { display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-white);font-size:12px; }
.team-asset-card small { display:block;margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text3);font-size:9px; }
.team-asset-nav { display:flex;align-items:center;gap:9px;margin-bottom:9px; }
.team-asset-nav b { min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-white);font-size:13px; }
.team-asset-nav small { margin-left:auto;color:#d8b4fe;font-size:10px;font-weight:800; }
.team-asset-back { border:1px solid var(--line);border-radius:7px;background:var(--bg3);color:var(--text2);padding:5px 8px;cursor:pointer;font-size:10px;font-weight:800; }
.team-asset-back:hover { border-color:var(--accent);color:var(--text-white); }
.team-asset-empty { grid-column:1/-1;padding:22px;color:var(--text3);text-align:center;font-size:12px; }
.team-asset-empty.error { color:#fca5a5; }
.team-members { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;max-height:310px;overflow:auto;margin:0 20px;padding:1px; }
.team-member { --char-rgb:168,85,247; display:grid;grid-template-columns:38px minmax(0,1fr) 20px;align-items:center;gap:9px;min-width:0;padding:7px 8px;border:1px solid rgba(var(--char-rgb),.18);border-radius:9px;background:rgba(var(--char-rgb),.045);cursor:pointer;transition:.13s; }
.team-member:hover { border-color:rgba(var(--char-rgb),.48);background:rgba(var(--char-rgb),.1); }
.team-member.selected { border-color:rgba(var(--char-rgb),.75);background:rgba(var(--char-rgb),.16);box-shadow:inset 3px 0 rgb(var(--char-rgb)); }
.team-member.limit { opacity:.42;cursor:not-allowed; }
.team-member img { width:36px;height:36px;object-fit:contain; }
.team-member span { min-width:0; }
.team-member b { display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-white);font-size:13px; }
.team-member small { display:block;color:var(--text3);font-size:10px;margin-top:2px; }
.team-member input { width:16px;height:16px;accent-color:rgb(var(--char-rgb)); }
.team-members-empty { margin:10px 20px 0;padding:18px;border:1px dashed var(--border2);border-radius:9px;color:var(--text3);text-align:center;font-size:12px; }
.team-combo-assignments { display:grid;gap:7px;margin:0 20px; }
.team-combo-assignment { display:grid;grid-template-columns:minmax(150px,1fr) minmax(190px,1.2fr);align-items:center;gap:10px;padding:9px 11px;border:1px solid var(--border2);border-radius:9px;background:rgba(8,12,19,.38); }
.team-combo-assignment span { display:flex;align-items:center;gap:8px;min-width:0; }
.team-combo-assignment img { width:34px;height:34px;object-fit:contain;border-radius:50%; }
.team-combo-assignment b { overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-white);font-size:12px; }
.team-combo-assignment select { width:100%;min-width:0;border:1px solid var(--border2);border-radius:7px;background:var(--bg3);color:var(--text);padding:7px 9px;font:700 12px 'Inter',sans-serif; }
.team-combo-assignment.empty select { color:var(--text3); }
.team-combo-assignments > .team-asset-empty { padding:13px; }

.toast { position:fixed;z-index:100;left:50%;bottom:22px;transform:translate(-50%,18px);padding:9px 14px;border:1px solid rgba(var(--accent-rgb),.45);border-radius:9px;background:var(--bg3);color:var(--text-white);box-shadow:0 14px 36px rgba(0,0,0,.45);font-size:13px;font-weight:700;opacity:0;pointer-events:none;transition:.18s; }
.toast.show { opacity:1;transform:translate(-50%,0); }
.toast.error { border-color:rgba(248,113,113,.55);color:#fecaca; }

[data-element="1"] { --elem:var(--fire); }
[data-element="2"] { --elem:var(--water); }
[data-element="3"] { --elem:var(--earth); }
[data-element="4"] { --elem:var(--air); }
[data-element="5"],[data-element="6"] { --elem:var(--light); }
.spell-card[data-element],.sequence-card[data-element] { border-left-color:var(--elem,var(--neutral)); }

@media (max-width:1120px) {
  .app-shell { grid-template-columns:220px minmax(480px,1fr) 310px; }
  .header-copy p { display:none; }
  .spell-grid { grid-template-columns:1fr; }
}

@media (max-width:860px) {
  body { overflow:auto; }
  .app-shell { height:auto;min-height:100vh;grid-template-columns:1fr;grid-template-rows:auto auto minmax(620px,auto) minmax(560px,auto);grid-template-areas:"header" "characters" "workspace" "spells"; }
  .app-header { flex-wrap:wrap;gap:12px; }
  .brand { min-width:0; }
  .header-copy { display:none; }
  .header-actions { margin-left:auto; }
  .team-switcher { order:3;width:100%; }
  .team-switcher select { flex:1;max-width:none; }
  .characters-panel { max-height:265px; }
  .character-list { display:flex;gap:6px; }
  .character-card { min-width:190px;margin:0!important; }
  .spell-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .spell-library { max-height:520px; }
}

@media (max-width:560px) {
  .app-shell { padding:8px;gap:8px; }
  .app-header { padding:10px; }
  .brand small { display:none; }
  .header-actions { width:100%; }
  .header-actions .btn { flex:1;font-size:11px; }
  .character-hero { height:96px;min-height:96px; }
  .hero-art-wrap { width:70px;height:68px; }
  .hero-art-wrap img { width:58px;height:58px; }
  .hero-identity h2 { font-size:18px; }
  .combo-title-row { align-items:stretch;flex-direction:column; }
  .combo-actions { justify-content:flex-end; }
  .sequence-card { grid-template-columns:25px 42px minmax(0,1fr) 28px; }
  .sequence-icon { width:40px;height:40px; }
  .costs { display:none; }
  .spell-grid { grid-template-columns:1fr 1fr; }
  .form-grid { grid-template-columns:1fr; }
  .form-grid label:first-child { grid-column:auto; }
  .modal-preview { display:none; }
  .modal-actions { flex-wrap:wrap; }
  #deleteCharacterBtn { width:100%; }
  .team-members { grid-template-columns:1fr; }
  .team-asset-grid { grid-template-columns:1fr; }
}

@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { scroll-behavior:auto!important;transition:none!important; }
}

/* ═══════════════════════════════════════════════════════════════
   Repères partagés avec le calculateur du Builder
   ═══════════════════════════════════════════════════════════════ */
.combo-toolbar.dc-combo-row { min-height:53px; padding:8px 13px; }
.dc-combo-row { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.dc-combo-lbl { font:700 11px 'Inter',sans-serif; text-transform:uppercase; letter-spacing:.4px; color:var(--text2); margin-right:2px; }
.combo-tabs { display:flex; align-items:center; gap:6px; flex:1; overflow-x:auto; scrollbar-width:none; }
.combo-tabs::-webkit-scrollbar { display:none; }
.dc-combo-tab { display:inline-flex; align-items:center; gap:6px; max-width:190px; padding:6px 10px; border-radius:8px; cursor:pointer; transition:.15s; background:var(--bg3); border:1px solid var(--border2); color:var(--text2); font:700 12px 'Inter',sans-serif; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dc-combo-tab:hover { color:var(--text-white); }
.dc-combo-tab.on { background:rgba(240,192,64,.14); border-color:#f0c040; color:#f0c040; }
.dc-combo-add { width:28px; height:28px; border-radius:8px; cursor:pointer; transition:.15s; background:var(--bg3); border:1px solid var(--border2); color:var(--text2); font-size:16px; font-weight:700; }
.dc-combo-add:hover { border-color:#f0c040; color:#f0c040; }
.dc-combo-io { font:700 11px 'Inter',sans-serif; text-transform:uppercase; letter-spacing:.3px; padding:6px 10px; border-radius:8px; cursor:pointer; transition:.15s; background:var(--bg3); border:1px solid var(--border2); color:var(--text2); }
.dc-combo-io:hover { border-color:#3ddc97; color:#3ddc97; }
.combo-name-field input { background:var(--bg3); border-color:var(--border2); color:var(--text-white); }
.combo-name-field input:focus { border-color:#f0c040; box-shadow:0 0 0 3px rgba(240,192,64,.1); }
.combo-sequence { padding:5px 16px 16px; }
.sequence-list { gap:8px; }
.sequence-empty { border-color:var(--border2); background:rgba(0,0,0,.18); }
.sequence-empty.drag-over { border-color:#f0c040; background:rgba(240,192,64,.06); }

.dc-card { position:relative; border:1px solid rgba(var(--sp-effect-rgb),.55); border-radius:12px; padding:10px 12px; background:color-mix(in srgb,rgb(var(--sp-effect-rgb)) 7%,var(--bg-card)); }
.dc-card-compact { width:100%; min-height:64px; display:grid; grid-template-columns:24px 82px minmax(0,1fr) 32px; align-items:center; gap:9px; text-align:left; color:var(--text); cursor:grab; transition:border-color .15s,background .15s,box-shadow .15s,opacity .15s; }
.dc-card-compact:hover { border-color:rgb(var(--sp-effect-rgb)); background:color-mix(in srgb,rgb(var(--sp-effect-rgb)) 12%,var(--bg-card)); }
.dc-card-compact.dragging { opacity:.35; }
.dc-card-compact.drag-over { box-shadow:0 -3px rgb(var(--sp-effect-rgb)); }
.dc-card-order { width:20px; height:20px; flex-shrink:0; border-radius:50%; background:rgb(var(--sp-effect-rgb)); color:#0e1014; font:700 12px 'Inter',sans-serif; display:inline-flex; align-items:center; justify-content:center; }
.dc-card-compact-spell { display:flex; flex-direction:column; align-items:center; gap:4px; min-width:0; }
.dc-card-ico { width:38px; height:38px; border-radius:6px; object-fit:cover; flex-shrink:0; border:1px solid rgba(var(--sp-effect-rgb),.6); }
.dc-card-compact-costs { display:flex; align-items:center; justify-content:center; gap:3px; flex-wrap:wrap; }
.dc-resource-chip { display:inline-flex; align-items:center; justify-content:center; gap:2px; min-width:34px; padding:2px 5px; border-radius:6px; border:1px solid var(--border2); background:var(--bg3); color:#dce8f8; font:700 12px 'Inter',sans-serif; white-space:nowrap; }
.dc-resource-chip img { width:16px; height:16px; object-fit:contain; }
.dc-card-compact-lines { min-width:0; display:flex; flex-direction:column; align-items:stretch; gap:3px; }
.dc-card-name { color:var(--text-white); font:700 15px 'Inter',sans-serif; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dc-compact-summary { color:var(--text2); font-size:13px; line-height:1.3; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.remove-spell { border:0; background:transparent; color:var(--text3); width:30px; height:30px; border-radius:7px; font-size:18px; cursor:pointer; }
.remove-spell:hover { color:#ef4444; background:rgba(239,68,68,.1); }

.spell-library { padding:14px; }
.sp-pool-section { margin-bottom:16px; }
.sp-pool-section:last-child { margin-bottom:0; }
.spell-section h3.sp-pool-section-title { margin:0 0 8px 2px; color:var(--text3); font:700 12px 'Inter',sans-serif; letter-spacing:.06em; text-transform:uppercase; }
.sp-pool-grid { display:flex; flex-direction:row; flex-wrap:wrap; gap:9px; }
.sp-pool-row { display:flex; flex-direction:row; flex-wrap:nowrap; gap:9px; margin-bottom:9px; }
.sp-pool-row:last-child { margin-bottom:0; }
.sp-pool-ico-btn { position:relative; width:68px; height:68px; flex:none; border-radius:10px; cursor:grab; background:transparent; border:2px solid #334155; display:flex; align-items:center; justify-content:center; transition:.12s; padding:0; color:var(--text); }
.sp-pool-ico-btn:hover { box-shadow:0 0 10px rgba(255,255,255,.18); }
.sp-pool-ico-btn:active { cursor:grabbing; }
.sp-pool-ico-btn img { width:100%; height:100%; object-fit:cover; border-radius:8px; }
.sp-pool-ico-lvl { position:absolute; bottom:3px; right:3px; z-index:2; padding:0 4px; border-radius:4px; background:rgba(0,0,0,.8); color:#f1f5f9; font:700 10px 'Inter',sans-serif; }
.sp-pool-ico-btn.el-feu { border-color:#ef4444; box-shadow:0 0 7px rgba(239,68,68,.6); }
.sp-pool-ico-btn.el-eau { border-color:#3b82f6; box-shadow:0 0 7px rgba(59,130,246,.6); }
.sp-pool-ico-btn.el-terre { border-color:#84cc16; box-shadow:0 0 7px rgba(132,204,22,.6); }
.sp-pool-ico-btn.el-air { border-color:#a855f7; box-shadow:0 0 7px rgba(168,85,247,.6); }
.sp-pool-ico-btn.el-lumiere { border-color:#f0c040; box-shadow:0 0 7px rgba(240,192,64,.6); }
.sp-pool-ico-btn.el-feu:hover { box-shadow:0 0 13px rgba(239,68,68,.9); }
.sp-pool-ico-btn.el-eau:hover { box-shadow:0 0 13px rgba(59,130,246,.9); }
.sp-pool-ico-btn.el-terre:hover { box-shadow:0 0 13px rgba(132,204,22,.9); }
.sp-pool-ico-btn.el-air:hover { box-shadow:0 0 13px rgba(168,85,247,.9); }
.sp-pool-ico-btn.el-lumiere:hover { box-shadow:0 0 13px rgba(240,192,64,.9); }
.sp-pool-ico-btn.is-in-combo { filter:brightness(.55) saturate(.7); }
.sp-pool-ico-btn.is-in-combo::after { content:'+'; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#fff; font-size:28px; font-weight:800; text-shadow:0 0 8px #000; border-radius:10px; box-shadow:0 0 0 2px rgba(255,255,255,.85),0 0 16px rgba(255,255,255,.45); pointer-events:none; }

#spPoolTip { scrollbar-width:thin; scrollbar-color:rgba(var(--accent-rgb),.72) rgba(255,255,255,.05); }
#spPoolTip::-webkit-scrollbar { width:7px; }
#spPoolTip::-webkit-scrollbar-track { background:rgba(255,255,255,.05); }
#spPoolTip::-webkit-scrollbar-thumb { background:rgba(var(--accent-rgb),.72); border-radius:999px; }
.sp-class-effects-title { margin-top:12px; color:rgb(var(--sp-effect-rgb,240,192,64)); font-weight:700; font-size:14px; }
.sp-class-effects { margin:6px 0 0; padding-left:20px; color:#e8f0f8; font-size:17px; line-height:1.5; }
.sp-class-effects li { margin:4px 0; }
.sp-class-effects .sp-effect-child-row { position:relative; list-style:none; margin-left:8px; padding-left:20px; color:rgb(var(--sp-effect-rgb,240,192,64)); font-weight:700; }
.sp-class-effects .sp-effect-child-row::before { content:''; position:absolute; left:0; top:-3px; bottom:-3px; width:2px; border-radius:2px; background:rgba(var(--sp-effect-rgb,240,192,64),.72); }
.sp-effect-child-arrow { margin-right:7px; font-weight:900; }
.sp-class-description { margin:13px 0 0; color:#f0ebe0; font-size:16px; line-height:1.55; }
#spPoolTip .spell-cast-limits { display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; padding-top:9px; border-top:1px solid rgba(var(--sp-effect-rgb,144,144,144),.28); }
#spPoolTip .spell-cast-limits span { padding:3px 7px; border:1px solid rgba(var(--sp-effect-rgb,144,144,144),.42); border-radius:7px; color:rgb(var(--sp-effect-rgb,210,210,210)); background:rgba(var(--sp-effect-rgb,144,144,144),.08); font-size:12px; font-weight:700; }
.sp-inline-icon { width:17px; height:17px; object-fit:contain; vertical-align:-3px; margin-right:4px; }
.sp-text-ref,.sp-element-ref,.sp-entity-ref,.sp-rune-ref { display:inline-flex; align-items:baseline; font-weight:700; white-space:nowrap; }
.sp-state,.sp-text-ref { color:#f0c040; cursor:pointer; border-bottom:1px dotted rgba(240,192,64,.65); }
.sp-entity-caster { color:#38bdf8; }.sp-entity-ally { color:#65d68a; }.sp-entity-enemy { color:#f87171; }
.sp-element-feu,.sp-rune-feu { color:#ef5a45; }.sp-element-eau,.sp-rune-eau { color:#4aa8e8; }.sp-element-terre,.sp-rune-terre { color:#8acb45; }.sp-element-air,.sp-rune-air { color:#bd78e8; }.sp-element-lumiere { color:#f0d35d; }

/* ═══════════════════════════════════════════════════════════════
   Séquence horizontale (sort après sort) + plan d'équipe par tours
   ═══════════════════════════════════════════════════════════════ */
.character-editor { display:flex; flex-direction:column; min-height:0; flex:1; }
.character-editor[hidden], .team-plan[hidden], .workspace-modes[hidden] { display:none; }
.workspace-modes { display:flex; gap:6px; padding:8px 14px 0; }
.ws-mode { padding:6px 13px; border-radius:8px; cursor:pointer; background:var(--bg3); border:1px solid var(--border2); color:var(--text2); font:700 12px 'Inter',sans-serif; transition:.15s; }
.ws-mode:hover { color:var(--text-white); }
.ws-mode.on { background:rgba(240,192,64,.14); border-color:#f0c040; color:#f0c040; }

.account-chip { display:inline-flex; align-items:center; gap:7px; padding:5px 11px; border-radius:999px; border:1px solid var(--border2); background:var(--bg3); color:var(--text2); font:600 12px 'Inter',sans-serif; white-space:nowrap; }
.account-chip img { width:20px; height:20px; border-radius:50%; object-fit:cover; }
.account-chip a { color:#8fb4e8; text-decoration:none; font-weight:700; }
.account-chip a:hover { text-decoration:underline; }

.class-picker { margin-top:6px; }
.field-label { display:block; color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.08em; font-weight:700; margin-bottom:8px; }
.class-grid { display:grid; grid-template-columns:repeat(9,52px); justify-content:center; gap:8px; }
.class-face { --char-rgb:168,85,247; width:52px; height:52px; padding:0; border:2px solid var(--border2); border-radius:10px; background:rgba(255,255,255,.03); cursor:pointer; overflow:hidden; display:flex; align-items:center; justify-content:center; transition:border-color .12s,box-shadow .12s,background .12s; }
.class-face img { width:100%; height:100%; object-fit:contain; }
.class-face:hover { border-color:rgb(var(--char-rgb)); }
.class-face.selected { border-color:rgb(var(--char-rgb)); box-shadow:0 0 0 1px rgb(var(--char-rgb)),0 0 12px rgba(var(--char-rgb),.5); background:rgba(var(--char-rgb),.14); }

.pages-bar { display:flex; align-items:center; gap:7px; flex-wrap:wrap; padding:9px 13px 0; }
.pages-lbl { font:700 11px 'Inter',sans-serif; text-transform:uppercase; letter-spacing:.4px; color:var(--text2); margin-right:2px; }
.page-chip { display:inline-flex; align-items:center; gap:6px; padding:5px 10px; border-radius:8px; cursor:pointer; background:var(--bg3); border:1px solid var(--border2); color:var(--text2); font:700 12px 'Inter',sans-serif; transition:.12s; }
.page-chip:hover { color:var(--text-white); border-color:#3ddc97; }
.page-chip.on { background:rgba(61,220,151,.14); border-color:#3ddc97; color:#3ddc97; }
.page-chip.add { color:var(--text3); }
.page-chip.add:hover { color:#3ddc97; }
.page-chip-lvl { display:inline-flex; align-items:center; justify-content:center; min-width:24px; height:16px; padding:0 5px; border-radius:5px; background:rgba(240,192,64,.2); color:#f0c040; font:800 10px 'Inter',sans-serif; }
.page-chip-base { color:#f0c040; font-size:12px; line-height:1; cursor:default; }
.page-chip-heart { color:var(--text3); font-size:13px; line-height:1; cursor:pointer; }
.page-chip-heart.on { color:#e963a8; }
.page-chip-heart:hover { color:#e963a8; }
.page-chip-del { display:inline-flex; align-items:center; justify-content:center; width:15px; height:15px; border-radius:50%; background:rgba(255,255,255,.08); color:var(--text2); font-size:12px; line-height:1; }
.page-chip-del:hover { background:#ef4444; color:#fff; }

.combo-pages-row { display:flex; align-items:center; gap:7px; flex-wrap:wrap; padding:10px 16px 0; }
.combo-pages-lbl,.combo-pages-hint { font-size:12px; color:var(--text3); }
.page-tag { padding:4px 10px; border-radius:999px; cursor:pointer; background:var(--bg3); border:1px solid var(--border2); color:var(--text2); font:700 12px 'Inter',sans-serif; transition:.12s; }
.page-tag:hover { color:var(--text-white); border-color:#3ddc97; }
.page-tag.on { background:rgba(61,220,151,.16); border-color:#3ddc97; color:#3ddc97; }
.combo-tabs-empty { color:var(--text3); font-size:13px; padding:6px 2px; }

.combo-list { flex:1; min-height:0; overflow:auto; padding:10px 16px 16px; display:flex; flex-direction:column; gap:12px; scrollbar-width:thin; scrollbar-color:#2c415e transparent; }
.combo-list-empty { color:var(--muted); font-size:13px; padding:8px 2px; }
.combo-block { border:1px solid var(--line-soft); border-radius:12px; background:rgba(5,11,20,.3); padding:10px 12px; transition:border-color .15s,box-shadow .15s; }
.combo-block.active { border-color:rgba(240,192,64,.6); box-shadow:0 0 0 1px rgba(240,192,64,.3); }
.combo-block-head { display:flex; align-items:center; gap:8px; margin-bottom:9px; flex-wrap:wrap; }
.cb-level-badge { flex:none; padding:6px 10px; border-radius:7px; background:rgba(240,192,64,.14); color:#f0c040; font:800 12px 'Inter',sans-serif; white-space:nowrap; }
.cb-name { flex:1; min-width:120px; background:var(--bg3); border:1px solid var(--border2); color:var(--text-white); border-radius:7px; padding:6px 10px; font:700 14px 'Inter',sans-serif; }
.cb-name:focus { border-color:#f0c040; box-shadow:0 0 0 2px rgba(240,192,64,.12); outline:none; }
.name-picto { width:16px; height:16px; object-fit:contain; vertical-align:-3px; margin:0 1px; }
.cb-name, .editable-name { white-space:nowrap; overflow:hidden; min-height:20px; line-height:20px; outline:none; cursor:text; }
.cb-name[contenteditable]:empty::before, .editable-name:empty::before { content:attr(data-placeholder); color:var(--text3); pointer-events:none; }
.name-field { display:flex; align-items:center; gap:6px; }
.editable-name { flex:1; min-width:0; background:var(--bg3); border:1px solid var(--border2); color:var(--text-white); border-radius:7px; padding:8px 10px; font:600 14px 'Inter',sans-serif; }
.editable-name:focus { border-color:#f0c040; box-shadow:0 0 0 2px rgba(240,192,64,.12); }
.cb-name-wrap { position:relative; flex:1; min-width:140px; display:flex; align-items:center; gap:5px; }
.cb-name-wrap .cb-name { flex:1; min-width:0; }
.cb-picto { position:relative; flex:none; }
.cb-picto-btn { list-style:none; cursor:pointer; border:1px solid var(--border2); background:var(--bg3); border-radius:7px; padding:5px 8px; font-size:13px; }
.cb-picto-btn::-webkit-details-marker { display:none; }
.cb-picto-btn:hover { border-color:var(--accent); }
.cb-picto-menu { position:absolute; top:calc(100% + 6px); right:0; z-index:30; width:224px; padding:8px; border:1px solid var(--border2); border-radius:10px; background:#141b28; box-shadow:0 12px 30px rgba(0,0,0,.55); display:grid; grid-template-columns:repeat(6,1fr); gap:5px; }
.cb-picto-opt { border:1px solid var(--border2); background:var(--bg3); border-radius:7px; padding:4px; cursor:pointer; display:grid; place-items:center; }
.cb-picto-opt:hover { border-color:var(--accent); }
.cb-picto-opt img { width:20px; height:20px; object-fit:contain; }
.cb-pages { display:flex; align-items:center; gap:5px; flex-wrap:wrap; }
.cb-pages-lbl { font:700 10px 'Inter',sans-serif; text-transform:uppercase; letter-spacing:.4px; color:var(--text3); margin-right:2px; }
.cb-nopage { color:var(--text3); font-size:12px; }
.cb-page-picker { position:relative; }
.cb-page-add { list-style:none; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; min-width:26px; height:24px; padding:0 9px; border-radius:999px; border:1px dashed var(--border2); color:var(--text2); font:700 12px 'Inter',sans-serif; }
.cb-page-add::-webkit-details-marker { display:none; }
.cb-page-add:hover { border-color:#3ddc97; color:#3ddc97; }
.cb-page-menu { position:absolute; top:calc(100% + 6px); left:0; z-index:30; min-width:150px; padding:8px; border:1px solid var(--border2); border-radius:10px; background:#141b28; box-shadow:0 12px 30px rgba(0,0,0,.55); display:flex; flex-direction:column; gap:5px; }
.cb-page-opt { text-align:left; padding:6px 10px; border-radius:7px; border:1px solid var(--border2); background:var(--bg3); color:var(--text2); cursor:pointer; font:700 12px 'Inter',sans-serif; }
.cb-page-opt:hover { color:var(--text-white); }
.cb-page-opt.on { background:rgba(61,220,151,.16); border-color:#3ddc97; color:#3ddc97; }
.cb-page-opt.on::before { content:'✓ '; }
.cb-actions { display:flex; gap:5px; margin-left:auto; }
.cb-icon-btn { width:30px; height:30px; flex:none; border:1px solid var(--border2); background:var(--bg3); color:var(--text2); border-radius:7px; cursor:pointer; font-size:15px; line-height:1; }
.cb-icon-btn:hover:not(:disabled) { border-color:#f0c040; color:#f0c040; }
.cb-icon-btn.danger:hover:not(:disabled) { border-color:#ef4444; color:#ef4444; }
.cb-icon-btn:disabled { opacity:.3; cursor:default; }
.combo-add-btn { align-self:flex-start; border:1px dashed var(--border2); background:transparent; color:var(--text2); border-radius:9px; padding:9px 16px; cursor:pointer; font:700 13px 'Inter',sans-serif; }
.combo-add-btn:hover { border-color:#f0c040; color:#f0c040; }

.combo-flow { display:flex; flex-wrap:wrap; gap:8px; align-content:flex-start; }
.combo-flow.empty-flow { min-height:78px; border:1px dashed var(--border2); border-radius:12px; padding:14px; align-items:center; justify-content:center; }
.combo-flow.empty-flow.drag-over { border-color:#f0c040; background:rgba(240,192,64,.06); }
.combo-flow-empty { text-align:center; color:var(--muted); }
.combo-flow-empty b { display:block; color:#a7bacf; font-size:14px; margin-bottom:2px; }
.combo-flow-empty span { font-size:12.5px; }
.combo-tile { position:relative; width:60px; height:60px; border-radius:12px; border:1.5px solid rgba(var(--sp-effect-rgb),.75); background:rgba(5,11,20,.42); display:flex; align-items:center; justify-content:center; cursor:grab; overflow:hidden; transition:border-color .15s,box-shadow .15s,opacity .15s; }
.combo-tile:hover { border-color:rgb(var(--sp-effect-rgb)); box-shadow:0 0 10px rgba(var(--sp-effect-rgb),.45); }
.combo-tile.static { cursor:pointer; }
.combo-tile.dragging { opacity:.35; }
.combo-tile.drag-over { box-shadow:0 0 0 2px rgb(var(--sp-effect-rgb)); }
.combo-tile-ico { width:100%; height:100%; object-fit:cover; }
.combo-tile-ico.empty { display:flex; align-items:center; justify-content:center; font:700 22px 'Inter',sans-serif; color:#8aa0b8; }
.combo-tile-order { position:absolute; top:2px; left:2px; z-index:2; min-width:16px; height:16px; padding:0 3px; border-radius:8px; background:rgb(var(--sp-effect-rgb)); color:#0e1014; font:800 10px 'Inter',sans-serif; display:inline-flex; align-items:center; justify-content:center; box-shadow:0 1px 3px rgba(0,0,0,.5); }
.combo-tile-remove { position:absolute; top:1px; right:1px; z-index:2; width:17px; height:17px; border:none; border-radius:50%; background:rgba(0,0,0,.65); color:#fff; font-size:12px; line-height:1; cursor:pointer; opacity:0; transition:opacity .12s; }
.combo-tile:hover .combo-tile-remove { opacity:1; }
.combo-tile-remove:hover { background:#ef4444; }
.combo-flow.mini { gap:6px; }
.combo-flow.mini .combo-tile { width:46px; height:46px; border-radius:10px; }

.combo-level-field { width:88px; flex:none; }
.combo-level-field span { display:block; color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.08em; font-weight:700; margin-bottom:5px; }
.combo-level-field input { width:100%; background:var(--bg3); border:1px solid var(--border2); color:var(--text-white); border-radius:8px; padding:9px 10px; font:700 14px 'Inter',sans-serif; }
.combo-level-field input:focus { border-color:#f0c040; box-shadow:0 0 0 3px rgba(240,192,64,.1); outline:none; }
.dc-combo-tab-lvl { display:inline-flex; align-items:center; justify-content:center; min-width:26px; height:17px; padding:0 5px; border-radius:5px; background:rgba(240,192,64,.2); color:#f0c040; font:800 10px 'Inter',sans-serif; }
.dc-combo-tab.on .dc-combo-tab-lvl { background:rgba(240,192,64,.32); }

.team-plan { flex:1; min-height:0; overflow:auto; padding:12px 16px 18px; scrollbar-width:thin; scrollbar-color:#2c415e transparent; }
.team-plan-empty { color:var(--muted); text-align:center; padding:40px 16px; font-size:14px; }
.team-plan-none { color:var(--text3); font-size:13px; padding:4px 0; }

.ta-member { --char-rgb:168,85,247; border:1px solid var(--border2); border-left:3px solid rgb(var(--char-rgb)); border-radius:10px; margin-bottom:9px; background:rgba(5,11,20,.32); overflow:hidden; }
.ta-member[open] { border-color:rgba(var(--char-rgb),.6); }
.ta-member-head { list-style:none; display:flex; align-items:center; gap:11px; padding:9px 12px; cursor:pointer; user-select:none; }
.ta-member-head::-webkit-details-marker { display:none; }
.ta-member-head::after { content:'▸'; margin-left:auto; color:var(--text3); transition:transform .15s; }
.ta-member[open] > .ta-member-head::after { transform:rotate(90deg); }
.ta-member-portrait { width:40px; height:40px; flex-shrink:0; border-radius:9px; border:1px solid rgba(var(--char-rgb),.5); background:rgba(var(--char-rgb),.1); display:flex; align-items:center; justify-content:center; overflow:hidden; }
.ta-member-portrait img { width:34px; height:34px; object-fit:contain; }
.ta-member-id b { display:block; color:var(--text-white); font:700 14px 'Inter',sans-serif; }
.ta-member-id small { color:var(--text2); font-size:12px; }
.ta-member-body { padding:2px 12px 10px 12px; }

.tp-header { margin-bottom:16px; padding-bottom:12px; border-bottom:1px solid var(--line-soft); }
.tp-header-top { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; }
.tp-header-btns { display:flex; gap:7px; }
.tp-header-label { color:#f0c040; font:800 12px 'Inter',sans-serif; letter-spacing:.05em; text-transform:uppercase; }
.tp-init-row { display:flex; align-items:flex-start; gap:10px; flex-wrap:wrap; }
.tp-init-face { --char-rgb:168,85,247; display:flex; flex-direction:column; align-items:center; gap:4px; width:52px; }
.tp-init-face > img { width:52px; height:52px; border-radius:50%; object-fit:cover; border:2px solid rgb(var(--char-rgb)); background:rgba(var(--char-rgb),.1); display:block; }
.tp-init-val { min-width:26px; height:19px; padding:0 6px; border-radius:9px; background:rgba(240,192,64,.16); color:#f0c040; font:800 12px 'Inter',sans-serif; display:flex; align-items:center; justify-content:center; }
.tp-init-input { width:52px; text-align:center; border:1px solid var(--border2); background:var(--bg3); color:var(--text-white); border-radius:7px; padding:4px 2px; font:700 13px 'Inter',sans-serif; }
.tp-init-input:focus { border-color:#f0c040; box-shadow:0 0 0 2px rgba(240,192,64,.12); outline:none; }
.tp-init-hint { margin-top:9px; color:var(--muted); font-size:12px; }

.tp-entry { margin-bottom:14px; }
.tp-label { color:#f0c040; font:800 12px 'Inter',sans-serif; letter-spacing:.04em; margin-bottom:6px; }
.tp-line { display:flex; align-items:center; gap:12px; }
.tp-face { width:48px; height:48px; flex:none; border-radius:50%; overflow:hidden; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.04); }
.tp-face img { width:100%; height:100%; object-fit:cover; }

.ta-combo { --char-rgb:168,85,247; border:1px solid var(--line-soft); border-left:3px solid rgb(var(--char-rgb)); border-radius:8px; margin-top:7px; background:rgba(0,0,0,.2); overflow:hidden; }
.ta-combo .ta-member-portrait { width:32px; height:32px; border-radius:8px; }
.ta-combo .ta-member-portrait img { width:27px; height:27px; }
.ta-combo-head { list-style:none; display:flex; align-items:center; gap:9px; padding:7px 10px; cursor:pointer; user-select:none; }
.ta-combo-head::-webkit-details-marker { display:none; }
.ta-combo-head::after { content:'▸'; margin-left:auto; color:var(--text3); transition:transform .15s; }
.ta-combo[open] > .ta-combo-head::after { transform:rotate(90deg); }
.ta-combo-lvl { display:inline-flex; align-items:center; justify-content:center; min-width:30px; height:18px; padding:0 5px; border-radius:5px; background:rgba(240,192,64,.18); color:#f0c040; font:800 11px 'Inter',sans-serif; }
.ta-combo-name { color:var(--text-white); font:700 13px 'Inter',sans-serif; }
.ta-combo-count { color:var(--text3); font-size:12px; }
.ta-combo-body { padding:8px 10px 10px; }

@media (max-width:1100px) {
  .sp-pool-row { flex-wrap:wrap; }
  .sp-pool-ico-btn { width:58px; height:58px; }
}