:root { color-scheme:dark; --bg:#111315; --panel:#2b2e31; --panel2:#222528; --line:#44484b; --text:#f1f1f1; --muted:#b5b9bc; --green:#77ba76; --red:#d57575; font-family:Arial,"Segoe UI",sans-serif; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; color:var(--text); background:#0d0f10; }
body::before { content:""; position:fixed; inset:0; z-index:0; background:linear-gradient(#090b0d44,#090b0d44),url('/assets/profile-bg.webp') center/cover no-repeat; pointer-events:none; }
button { font:inherit; cursor:pointer; }
button:disabled { opacity:.55; cursor:default; }
.shell { position:relative; z-index:1; width:min(100%,1120px); margin:auto; padding:env(safe-area-inset-top) 12px calc(24px + env(safe-area-inset-bottom)); }
.topbar { display:flex; align-items:center; justify-content:space-between; min-height:52px; border-bottom:1px solid #363a3d; }
.brand { font-size:15px; font-weight:700; }
.icon-button,.close { width:34px; height:34px; border:1px solid var(--line); border-radius:4px; background:#303437; color:var(--text); font-size:21px; }
.notice { margin:12px 0; border:1px solid var(--line); background:var(--panel); padding:10px 12px; font-size:13px; }
.notice[hidden] { display:none; }
.notice.error { border-color:var(--red); color:#ffd4d4; }
.hero { display:grid; grid-template-columns:230px 1fr; gap:14px; align-items:center; margin:16px 0; padding:16px 18px; background:var(--panel); border:1px solid var(--line); border-radius:4px; }
.identity { display:flex; align-items:center; gap:14px; min-width:0; }
.avatar { position:relative; display:grid; place-items:center; flex:none; width:82px; height:82px; overflow:hidden; border-radius:50%; background:#17191b; border:2px solid #676c70; color:#e0e3e4; font-size:38px; font-weight:700; }
.avatar-image { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.identity-text { min-width:0; }
.hero h1 { margin:0 0 7px; font-size:20px; line-height:1.15; overflow-wrap:anywhere; }
.hero-sub { color:var(--muted); font-size:12px; line-height:1.4; }
.hero-stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px 18px; border-left:1px solid var(--line); padding-left:18px; }
.hero-stat { display:flex; align-items:baseline; gap:7px; min-width:0; }
.hero-stat strong { color:#e6e6e6; font-size:18px; }
.hero-stat span { color:var(--muted); font-size:12px; white-space:nowrap; }
.tabs { display:flex; gap:0; background:#24272a; border:1px solid var(--line); margin-bottom:16px; }
.tab { flex:1; border:0; border-right:1px solid var(--line); background:transparent; color:#c6c9ca; min-height:42px; font-size:13px; }
.tab:last-child { border-right:0; }
.tab.active { background:#111315; color:#fff; font-weight:700; }
.overview-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(290px,.92fr); gap:18px; align-items:start; }
.section { min-width:0; background:var(--panel); border:1px solid var(--line); border-radius:3px; padding:16px; margin:0 0 16px; }
.section-title { display:flex; align-items:baseline; justify-content:center; gap:9px; padding-bottom:12px; margin-bottom:12px; border-bottom:1px solid var(--line); text-align:center; }
.section-title h2 { margin:0; font-size:15px; font-weight:400; }
.section-title small { color:var(--muted); font-size:11px; }
.filters { display:flex; gap:5px; overflow-x:auto; padding-bottom:10px; scrollbar-width:thin; }
.filter { flex:none; border:1px solid #555a5e; border-radius:3px; color:#d5d7d8; background:#33373a; padding:5px 8px; font-size:11px; }
.filter.active { color:#fff; background:#39764a; border-color:#5a9f6b; }
.inventory-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:5px; align-content:start; }
.item { display:flex; position:relative; align-items:center; justify-content:center; aspect-ratio:1; min-width:0; padding:3px; background:#363a3d; border:1px solid #555b5e; border-radius:3px; color:var(--text); }
.item:hover,.equipment-slot:hover { border-color:#9fb9c4; background:#41474a; }
.item.equipped { border-color:#86a583; }
.item-icon { display:block; width:82%; height:82%; object-fit:contain; }
.item-count,.item-level { position:absolute; right:2px; bottom:1px; padding:0 2px; background:#171a1ccc; color:#fff; font-size:10px; line-height:1.25; border-radius:2px; }
.item-level { color:#d5e6d2; }
.equipment-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:7px; }
.equipment-slot { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; min-height:90px; border:1px solid #50565a; border-radius:3px; color:var(--muted); background:#35393c; padding:5px; }
.equipment-slot.occupied { color:var(--text); }
.equipment-icon { display:block; width:48px; height:48px; max-width:85%; object-fit:contain; }
.equipment-icon.vacant { opacity:.32; filter:grayscale(1); }
.equipment-label { width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:10px; text-align:center; }
.stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; }
.stat { display:flex; justify-content:space-between; gap:8px; border-bottom:1px solid var(--line); padding:8px 4px; }
.stat-label { color:var(--muted); font-size:13px; }
.stat-value { font-size:14px; font-weight:700; }
.empty { color:var(--muted); font-size:13px; padding:18px 5px; }
.details { width:min(calc(100% - 24px),430px); max-height:85vh; border:1px solid #5d6265; border-radius:5px; color:var(--text); background:#2b2f32; padding:20px; box-shadow:0 20px 70px #000a; }
.details::backdrop { background:#000b; }
.close { position:absolute; right:12px; top:12px; }
.details h2 { margin:0 38px 10px 0; font-size:20px; }
.details p { color:var(--muted); font-size:13px; line-height:1.4; }
.eyebrow { color:#a9cbb0; font-size:11px; margin-bottom:7px; }
.resource-detail-icon { display:block; width:76px; height:76px; object-fit:contain; margin-bottom:9px; }
.detail-stats { margin:15px 0; }
.detail-row { display:flex; justify-content:space-between; gap:10px; padding:9px 0; border-bottom:1px solid var(--line); font-size:13px; }
.detail-row span:first-child { color:var(--muted); }
.action { width:100%; min-height:42px; border:0; border-radius:3px; color:#fff; background:#39764a; font-weight:700; }
.action.remove { background:#884747; }
.action:disabled { background:#52585b; color:#c7cdcf; }
@media (max-width:700px) { body::before { background-image:linear-gradient(#090b0d44,#090b0d44),url('/assets/profile-bg-mobile.webp'); background-position:center top; } .hero { grid-template-columns:1fr; gap:12px; } .hero-stats { border-left:0; border-top:1px solid var(--line); padding:12px 0 0; } .overview-grid { grid-template-columns:1fr; gap:0; } }
@media (max-width:430px) { .shell { padding-left:8px; padding-right:8px; } .hero { padding:12px; } .avatar { width:56px; height:56px; font-size:26px; } .hero h1 { font-size:17px; } .hero-stats { gap:6px; } .hero-stat strong { font-size:15px; } .hero-stat span { font-size:10px; } .section { padding:10px; } .inventory-grid { grid-template-columns:repeat(6,minmax(0,1fr)); gap:4px; } .equipment-slot { min-height:75px; } }