:root {
  --black: #08090a;
  --panel: rgba(17, 19, 20, .93);
  --panel-solid: #131516;
  --panel-soft: #1b1e1f;
  --ink: #e8e4dc;
  --muted: #a7aaa8;
  --line: rgba(214, 31, 31, .27);
  --gold: #a9aca9;
  --gold-light: #f2ede2;
  --red: #ac090d;
  --red-light: #ee3f42;
  --green: #83b693;
  --shadow: 0 25px 70px rgba(0,0,0,.62);
  font-family: "Segoe UI", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--ink);
  background: var(--black);
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; min-height: 100vh; background: #08090a; background-image: repeating-linear-gradient(115deg, rgba(255,255,255,.012) 0 1px, transparent 1px 5px); }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .5; }
.app-shell { min-height: 100vh; }
.login-page { min-height: 100vh; display: grid; place-items: center; overflow: hidden; padding: 38px 18px; position: relative; background: radial-gradient(circle at 50% 34%, rgba(147, 7, 11, .42), transparent 28%), linear-gradient(125deg, #050607, #141010 53%, #050607); }
.login-page::before { content:""; inset:0; position:absolute; opacity:.14; background: url('/lost-mc-official.png') center 53% / min(78vw, 860px) no-repeat; filter: grayscale(1) contrast(1.15); pointer-events:none; }
.login-page::after { content:""; inset:0; position:absolute; background: repeating-linear-gradient(115deg, transparent 0 35px, rgba(255,255,255,.018) 36px 37px), linear-gradient(90deg, rgba(0,0,0,.72), transparent 36%, transparent 64%, rgba(0,0,0,.72)); pointer-events:none; }
.login-card { width: min(100%, 480px); position:relative; z-index:1; padding: 34px; border: 1px solid rgba(224,45,48,.68); border-radius: 5px; background: linear-gradient(135deg, rgba(21,23,24,.98), rgba(9,10,11,.98)); box-shadow: 0 0 0 5px rgba(0,0,0,.35), 0 0 38px rgba(172,9,13,.22), var(--shadow); }
.brand-lockup { display: grid; justify-items:center; gap: 5px; margin-bottom: 28px; text-align:center; }
.brand-lockup img { width: 168px; height:168px; object-fit:contain; filter: drop-shadow(0 12px 20px rgba(0,0,0,.75)); }
.brand-lockup h1, .brand-inline h1 { margin:0; font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif; letter-spacing:.12em; text-transform:uppercase; font-size: 38px; color:var(--gold-light); text-shadow: 0 2px 0 #000, 0 0 18px rgba(225,23,27,.32); }
.brand-lockup span, .eyebrow { font-size:10px; font-weight:800; letter-spacing:.2em; text-transform:uppercase; color:#c2bcb2; }
.stars { color:var(--red-light); letter-spacing:8px; font-size:13px; margin-top:4px; }
.login-copy { color:var(--muted); font-size:14px; line-height:1.55; margin:0 0 20px; text-align:center; }
.form-grid { display:grid; gap:14px; }
label { display:grid; gap:7px; color:#c8bba8; font-size:11px; letter-spacing:.09em; font-weight:700; text-transform:uppercase; }
input, select, textarea { width:100%; border: 1px solid rgba(255,255,255,.16); border-radius:3px; padding:12px 13px; color:var(--ink); background:#101213; outline:none; transition: border-color .15s, box-shadow .15s; }
select option { background: #17191a; }
textarea { min-height:90px; resize:vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--red-light); box-shadow: 0 0 0 3px rgba(210,18,22,.16); }
input[readonly] { color:#a9aaa7; cursor:not-allowed; background:#0d0f10; }
.btn { border:0; border-radius:4px; padding:12px 15px; color:#f7f1e7; font-weight:900; letter-spacing:.035em; text-transform:uppercase; transition: transform .15s, filter .15s, background .15s; }
.btn:hover:not(:disabled) { filter:brightness(1.07); transform: translateY(-1px); }
.btn-primary { background: linear-gradient(115deg, #780307, #d91a20 54%, #860307); color:#fff8ed; border:1px solid #f2484c; box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 6px 16px rgba(116,0,4,.3); }
.btn-secondary { background: #242728; color:var(--ink); border:1px solid rgba(230,230,230,.25); }
.btn-danger { background: rgba(172,9,13,.16); border: 1px solid rgba(238,63,66,.52); color:#ffb8b8; padding:8px 10px; }
.btn-small { font-size:13px; padding:9px 11px; }
.login-card .btn { width:100%; margin-top:8px; }
.demo-access { border-top:1px solid var(--line); margin-top:22px; padding-top:16px; color:var(--muted); font-size:12px; text-align:center; line-height:1.65; }
.demo-access b { color:var(--gold-light); }
.app-layout { min-height:100vh; display:grid; grid-template-columns: 284px minmax(0,1fr); background: radial-gradient(circle at 83% 0%, rgba(125,7,10,.13), transparent 28%), linear-gradient(120deg, #111314, #08090a 42%, #111011); }
.sidebar { position:sticky; top:0; height:100vh; padding:22px 15px; display:flex; flex-direction:column; gap:24px; border-right:1px solid rgba(225,41,44,.36); background:linear-gradient(180deg, rgba(8,9,10,.98), rgba(18,20,21,.96)); backdrop-filter: blur(16px); z-index:5; box-shadow:8px 0 30px rgba(0,0,0,.22); }
.brand-inline { display:flex; align-items:center; gap:11px; padding:2px 6px 13px; border-bottom:1px solid rgba(230,230,230,.1); }
.brand-inline img { width:62px; height:62px; object-fit:contain; filter:drop-shadow(0 5px 10px rgba(0,0,0,.7)); }
.brand-inline h1 { font-size:24px; }
.brand-inline small { color:#a99a87; letter-spacing:.12em; display:block; margin-top:3px; font-size:9px; font-weight:700; text-transform:uppercase; }
.nav { display:grid; gap:5px; }
.nav button { display:flex; align-items:center; gap:12px; text-align:left; color:#b9bab8; background:transparent; border:1px solid transparent; border-radius:3px; padding:12px; font-weight:800; letter-spacing:.025em; }
.nav button:hover { color:var(--ink); background:rgba(255,255,255,.045); }
.nav button.active { color:#fff; background:linear-gradient(90deg, rgba(159,6,9,.63), rgba(159,6,9,.12)); border-color:rgba(243,55,59,.43); box-shadow:inset 3px 0 #ef3f42; }
.nav-icon { width:22px; text-align:center; color:#e33a3d; font-size:17px; }
.profile-chip { margin-top:auto; padding:12px; border:1px solid rgba(255,255,255,.13); border-radius:4px; background:#17191a; display:flex; align-items:center; gap:10px; }
.initials { width:34px; height:34px; display:grid; place-items:center; flex:0 0 auto; border:1px solid var(--red-light); border-radius:2px; color:var(--gold-light); font-family:Impact, sans-serif; font-weight:bold; background:#251012; }
.profile-chip .who { min-width:0; flex:1; }
.profile-chip b, .profile-chip span { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.profile-chip b { font-size:13px; }.profile-chip span { color:var(--muted); font-size:11px; margin-top:2px; }
.logout { background:transparent; border:0; color:#bba9a4; font-size:17px; padding:5px; }
.main { min-width:0; padding:30px clamp(18px, 4vw, 58px) 52px; }
.topbar { display:flex; justify-content:space-between; align-items:flex-start; gap:18px; margin:0 auto 30px; max-width:1380px; }
.topbar h2 { margin:4px 0 0; font-family:Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif; font-size:clamp(30px,4vw,44px); line-height:1.05; letter-spacing:.055em; text-transform:uppercase; text-shadow:0 2px 0 #000; }
.topbar-date { padding:9px 13px; color:#d5d2cc; font-size:12px; border:1px solid rgba(255,255,255,.15); border-radius:3px; background:#17191a; white-space:nowrap; text-transform:uppercase; letter-spacing:.06em; }
.page { max-width:1380px; margin:0 auto; }
.page-intro { color:var(--muted); line-height:1.6; max-width:760px; margin:-15px 0 25px; }
.grid { display:grid; gap:18px; }.stats { grid-template-columns: repeat(4, minmax(0,1fr)); }.two-col { grid-template-columns: 1.1fr .9fr; }.three-col { grid-template-columns:repeat(3,minmax(0,1fr)); }
.card { border:1px solid rgba(255,255,255,.12); border-radius:4px; padding:19px; background:linear-gradient(135deg, rgba(28,31,32,.95), rgba(15,17,18,.96)); box-shadow:inset 0 1px 0 rgba(255,255,255,.035), 0 12px 32px rgba(0,0,0,.22); }
.card h3 { margin:0; font-family:Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif; font-size:20px; letter-spacing:.045em; text-transform:uppercase; color:#f1eee6; }.card-header { display:flex; justify-content:space-between; gap:12px; align-items:center; margin-bottom:17px; }.card-header span { color:var(--muted); font-size:12px; }
.stat { position:relative; overflow:hidden; min-height:132px; border-top:3px solid #8a080b; }.stat::after { content:""; position:absolute; width:100px; height:100px; right:-29px; bottom:-39px; border:1px solid rgba(255,255,255,.12); transform:rotate(45deg); }.stat .stat-label { color:#c8c6c0; font-size:11px; font-weight:800; letter-spacing:.11em; text-transform:uppercase; }.stat strong { display:block; margin:14px 0 6px; font-size:38px; line-height:1; font-family:Impact, sans-serif; letter-spacing:.04em; color:var(--gold-light); }.stat small { color:var(--muted); font-size:12px; }.stat-red strong { color:#ff8a8c; }.stat-green strong { color:#9bd6a9; }
.list { margin:0; padding:0; list-style:none; display:grid; gap:10px; }.activity { padding:10px 0; border-bottom:1px solid rgba(215,177,92,.11); }.activity:last-child { border:0; }.activity strong { display:block; font-size:13px; font-weight:600; line-height:1.45; }.activity span { display:block; color:#aa9b8b; font-size:11px; margin-top:4px; }.empty { color:var(--muted); font-size:14px; padding:18px 0; text-align:center; }
.planning-preview { display:grid; gap:11px; }.event-row { display:grid; grid-template-columns:44px 1fr; gap:10px; padding:10px; border-radius:3px; background:rgba(255,255,255,.025); }.event-date { display:grid; place-items:center; align-content:center; border-left:3px solid var(--red-light); background:#0e1011; border-radius:2px; color:var(--gold-light); font:700 12px Impact, sans-serif; letter-spacing:.06em; text-transform:uppercase; }.event-date b { font-size:17px; }.event-copy b { display:block; font-size:13px; }.event-copy span { display:block; color:var(--muted); font-size:12px; margin-top:4px; }
.section-title { margin:34px 0 14px; display:flex; align-items:center; gap:12px; font-size:12px; font-weight:900; text-transform:uppercase; letter-spacing:.16em; color:#f05a5c; }.section-title::before { content:""; width:8px; height:8px; background:#c31519; transform:rotate(45deg); }.section-title::after { content:""; height:1px; flex:1; background:linear-gradient(90deg, rgba(228,36,40,.65), transparent); }
.chest-card { display:grid; gap:14px; }.chest-card .chest-title { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; }.chest-card h3 { font-size:18px; }.chest-card p { margin:4px 0 0; color:var(--muted); font-size:12px; }.total { color:var(--gold-light); font:700 27px Georgia,serif; }.total small { color:var(--muted); font:500 11px Inter, sans-serif; }.table-wrap { overflow:auto; }.data-table { border-collapse:collapse; width:100%; min-width:620px; }.data-table th { color:#af9d88; font-size:10px; text-transform:uppercase; letter-spacing:.1em; text-align:left; padding:0 10px 10px; }.data-table td { border-top:1px solid rgba(215,177,92,.12); padding:12px 10px; color:#e7ddcc; font-size:13px; vertical-align:top; }.data-table td small { color:var(--muted); display:block; font-size:11px; margin-top:3px; }.pill { display:inline-flex; gap:5px; align-items:center; border-radius:99px; padding:4px 8px; font-size:11px; font-weight:800; }.pill-depot { color:#bde4c7; background:rgba(122,183,138,.14); }.pill-retrait { color:#ffd09a; background:rgba(230,167,58,.13); }.pill-recolte { color:#a4d3ff; background:rgba(94,155,225,.14); }.pill-farm { color:#debfeb; background:rgba(174,99,191,.14); }.pill-fabrication { color:#ffd58a; background:rgba(215,177,92,.14); }
.form-card { padding:22px; }.form-card h3 { margin-bottom:18px; }.form-cols { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }.form-cols .full { grid-column:1 / -1; }.form-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:16px; }.hint { color:var(--muted); line-height:1.5; font-size:12px; }.error-text { color:#ffaaa3; font-size:13px; min-height:18px; margin:0; }.success-text { color:#a9dfb6; font-size:13px; min-height:18px; margin:0; }
.filter-tabs { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 20px; }.filter-tabs button { border:1px solid var(--line); border-radius:999px; padding:8px 11px; background:transparent; color:#c9b9a4; font-size:12px; font-weight:700; }.filter-tabs button.active { background:rgba(198,56,56,.17); color:var(--gold-light); border-color:rgba(215,177,92,.5); }
.point-grid, .recipe-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }.point-card, .recipe-card { padding:18px; min-height:215px; display:flex; flex-direction:column; }.point-card .point-meta { color:var(--muted); font-size:12px; margin:9px 0; }.point-card h3, .recipe-card h3 { font-size:20px; }.point-image { display:block; width:100%; max-height:180px; margin:4px 0; border:1px solid rgba(215,177,92,.25); border-radius:3px; object-fit:cover; background:#0d0e0f; }.materials { display:flex; flex-wrap:wrap; gap:6px; margin:12px 0; }.material { border:1px solid rgba(215,177,92,.18); border-radius:99px; padding:5px 8px; color:#ddcba7; font-size:11px; }.material b { color:var(--gold-light); }.notes { margin:auto 0 0; padding-top:12px; color:#b5a792; font-size:12px; line-height:1.45; }.actions-end { margin-top:12px; display:flex; justify-content:flex-end; }
.recipe-card { border-top:3px solid var(--red); }.recipe-output { display:inline-flex; align-items:center; gap:7px; color:#d9d6ce; font-size:12px; margin:8px 0; }.recipe-output b { color:var(--gold-light); font-size:17px; }
.fab-tools { display:flex; gap:10px; align-items:center; justify-content:space-between; margin-bottom:20px; }.fab-tools .hint { max-width:570px; }.details { margin:18px 0 0; }.details > summary { color:var(--gold-light); cursor:pointer; font:700 13px Georgia,serif; letter-spacing:.04em; }.details > div { margin-top:14px; }
.calendar-list { display:grid; gap:12px; }.calendar-event { display:grid; grid-template-columns:75px minmax(0,1fr) auto; gap:15px; align-items:center; padding:16px; border:1px solid rgba(215,177,92,.14); border-radius:12px; background:rgba(255,255,255,.022); }.calendar-when { text-align:center; padding-right:14px; border-right:1px solid var(--line); color:var(--gold-light); font:700 12px Georgia,serif; text-transform:uppercase; }.calendar-when b { display:block; font-size:27px; }.calendar-event h3 { font-size:17px; }.calendar-event p { color:var(--muted); line-height:1.45; font-size:13px; margin:7px 0; }.calendar-event small { color:#b4a38e; }.badge-private { color:#ffcf96; font-size:11px; font-weight:700; }
.profile-layout { display:grid; grid-template-columns: 290px minmax(0, 1fr); gap:18px; }.identity-card { text-align:center; }.identity-card .initials { width:88px; height:88px; margin:5px auto 17px; font-size:29px; }.identity-card h3 { font-size:23px; }.identity-card p { color:var(--muted); font-size:13px; }.role-banner { display:inline-block; margin-top:8px; color:var(--gold-light); border:1px solid rgba(215,177,92,.32); border-radius:99px; padding:6px 10px; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; }.identity-meta { margin-top:24px; border-top:1px solid var(--line); padding-top:14px; text-align:left; }.identity-meta div { display:flex; justify-content:space-between; gap:12px; padding:8px 0; color:var(--muted); font-size:12px; }.identity-meta b { color:var(--ink); }
.member-list { display:grid; gap:12px; margin-top:16px; }.member-admin { display:grid; grid-template-columns:minmax(170px,.7fr) minmax(0,1.3fr); align-items:center; gap:16px; }.member-admin h3 { font-size:17px; }.member-admin p { margin:5px 0 0; color:var(--muted); font-size:12px; }.member-admin form { display:grid; grid-template-columns:repeat(auto-fit, minmax(120px, 1fr)); align-items:end; gap:10px; }.member-admin label { font-size:10px; }.member-admin .active-label { display:flex; align-items:center; gap:9px; min-height:42px; }.member-admin .active-label input { width:18px; height:18px; accent-color:var(--red-light); }.member-inactive { opacity:.58; }
.permission-set { border:1px solid var(--line); border-radius:10px; padding:12px; margin:2px 0; min-width:0; }.member-admin .permission-set { grid-column:1 / -1; }.permission-set legend { padding:0 6px; color:var(--text); font-weight:700; font-size:12px; }.permission-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }.permission-label { display:flex; align-items:flex-start; gap:8px; padding:9px; border:1px solid rgba(255,255,255,.08); border-radius:8px; background:rgba(255,255,255,.025); cursor:pointer; }.permission-label input { width:17px; height:17px; margin:1px 0 0; accent-color:var(--red-light); }.permission-label span { display:grid; gap:2px; }.permission-label b { font-size:11px; color:var(--text); }.permission-label small { font-size:10px; line-height:1.35; color:var(--muted); }
.toast-region { position:fixed; right:20px; bottom:20px; z-index:30; display:grid; gap:10px; max-width:min(400px,calc(100vw - 40px)); }.toast { padding:13px 15px; color:#f8f0e0; border:1px solid var(--line); border-left:3px solid var(--gold); border-radius:10px; background:#281d1e; box-shadow:var(--shadow); font-size:13px; line-height:1.4; animation:enter .25s ease-out; }.toast.error { border-left-color:var(--red-light); }.toast.success { border-left-color:var(--green); } @keyframes enter { from { opacity:0; transform:translateY(8px); } }
.loader { min-height:100vh; display:grid; place-items:center; color:var(--gold-light); font-family:Georgia,serif; letter-spacing:.08em; }
@media (max-width: 1090px) { .stats { grid-template-columns:repeat(2,minmax(0,1fr)); }.point-grid,.recipe-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.three-col { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width: 760px) { .app-layout { display:block; }.sidebar { position:sticky; top:0; height:auto; padding:9px 10px; flex-direction:row; align-items:center; gap:9px; overflow:auto; border-right:0; border-bottom:1px solid var(--line); }.brand-inline { padding:0; }.brand-inline img { width:35px; height:35px; }.brand-inline h1, .brand-inline small { display:none; }.nav { display:flex; gap:3px; }.nav button { padding:9px 8px; white-space:nowrap; font-size:0; }.nav-icon { font-size:17px; }.profile-chip { margin:0 0 0 auto; border:0; background:transparent; padding:0; }.profile-chip .who { display:none; }.logout { padding:3px; }.main { padding:23px 16px 42px; }.topbar { margin-bottom:25px; }.topbar-date { display:none; }.two-col,.profile-layout,.member-admin { grid-template-columns:1fr; }.member-admin form { grid-template-columns:1fr; }.point-grid,.recipe-grid,.three-col,.permission-grid { grid-template-columns:1fr; }.form-cols { grid-template-columns:1fr; }.form-cols .full { grid-column:auto; }.calendar-event { grid-template-columns:60px 1fr; }.calendar-event .btn-danger { grid-column:2; justify-self:start; }.login-card { padding:25px 20px; }.fab-tools { align-items:flex-start; flex-direction:column; } }
@media (max-width: 430px) { .stats { grid-template-columns:1fr; }.topbar h2 { font-size:30px; }.login-page { padding:14px; }.login-card { border-radius:13px; }.brand-lockup h1 { font-size:29px; } }