:root {
  --account-motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 240'%3E%3Cg fill='none' stroke='%23b6aa7c' stroke-width='1' stroke-opacity='.055'%3E%3Cpath d='M0 60h22c0 24 18 24 30 0s30-24 30 0-18 24-30 0H0m240 120h-22c0-24-18-24-30 0s-30 24-30 0 18-24 30 0h52M60 0v22c24 0 24 18 0 30s-24 30 0 30 24-18 0-30V0m120 240v-22c-24 0-24-18 0-30s24-30 0-30-24 18 0 30v52'/%3E%3Cpath d='M120 60l60 60-60 60-60-60zM120 82l38 38-38 38-38-38z'/%3E%3Ccircle cx='120' cy='120' r='18'/%3E%3C/g%3E%3C/svg%3E");
}
html, body { min-height:100%; background:#1d2927 !important; color:#eee7d8; }
body { display:block !important; width:100%; min-height:100vh; margin:0 !important; overflow-x:hidden; font-size:16px !important; background:radial-gradient(ellipse at 50% 0%,rgba(69,91,72,.25),transparent 55%),var(--account-motif),#1d2927 !important; }
.warp { width:min(1160px,100%) !important; min-height:100vh; margin:0 auto !important; overflow:visible !important; background:transparent !important; box-shadow:none !important; }
.cj { width:100% !important; margin:0 !important; }
.cj img.imga { display:none !important; }
.cj .p_2 { position:relative !important; inset:auto !important; z-index:auto !important; width:100% !important; height:auto !important; padding:34px 28px 42px !important; }
.container-header { position:relative !important; inset:auto !important; width:100% !important; height:auto !important; min-height:112px; padding:22px 26px !important; display:flex; align-items:center; justify-content:space-between; gap:20px; background:rgba(7,18,20,.86); border:1px solid rgba(218,176,94,.25); border-radius:18px; }
.container-title { position:static !important; width:auto !important; height:auto !important; line-height:1.2 !important; display:flex !important; flex-direction:column; align-items:flex-start !important; justify-content:center !important; gap:7px; color:#f1c36c !important; border:0 !important; box-shadow:none !important; text-align:left !important; pointer-events:auto !important; text-shadow:none !important; }
.container-title h1 { color:#f1c36c; font-size:clamp(25px,3vw,34px); line-height:1.1; font-weight:750; }
.container-title span#headerUsername { display:inline !important; max-width:100% !important; color:#c8c3b3; font-size:14px; font-weight:500; text-align:left !important; }
.header-actions { position:static !important; display:flex; flex-wrap:wrap; align-items:center; gap:12px; font-size:14px !important; }
.header-actions .home-link,.header-actions .logout { color:#f0ca79 !important; text-decoration:none !important; }
.header-actions .sep { color:rgba(240,202,121,.45) !important; }
.container { position:static !important; display:grid; grid-template-columns:245px minmax(0,1fr); gap:20px; width:100% !important; height:auto !important; margin-top:20px; align-items:start; }
.container .row { position:static !important; width:auto !important; height:auto !important; z-index:auto !important; padding:18px; border:1px solid rgba(218,176,94,.27); border-radius:16px; background:rgba(9,25,23,.74); }
.container .row dl { display:grid; gap:8px; }
.container .row dt { position:relative; width:100% !important; height:auto !important; min-height:48px; margin:0 !important; padding:13px 15px; display:flex; align-items:center; text-align:left !important; line-height:1.3 !important; color:#cfc8b7 !important; font-size:15px !important; font-weight:650; border:1px solid transparent; border-radius:10px; background:transparent !important; transition:background .18s,border-color .18s,color .18s; }
.container .row dt:hover { filter:none !important; background:rgba(220,177,93,.08) !important; }
.container .row dt.on { color:#f4ca74 !important; background:linear-gradient(110deg,rgba(181,127,47,.22),rgba(21,57,48,.54)) !important; border-color:rgba(218,176,94,.38); text-shadow:none !important; }
.container .row dt em { display:none !important; }
.container .row-content { position:static !important; width:auto !important; height:auto !important; min-height:380px; max-height:none !important; overflow:visible !important; padding:24px !important; z-index:auto !important; border:1px solid rgba(218,176,94,.29); border-radius:16px; background:linear-gradient(145deg,rgba(10,28,25,.94),rgba(13,34,31,.86)); box-shadow:0 18px 44px rgba(0,0,0,.14); }
.content-box { width:100%; padding:0 !important; color:#eee7d8; background:transparent !important; border:0 !important; box-shadow:none !important; }
.content-row { min-height:54px; margin:0 !important; padding:14px 0; display:grid; grid-template-columns:minmax(145px, .8fr) minmax(0,1.5fr); gap:14px; align-items:center; border-bottom:1px solid rgba(222,211,183,.1); }
.content-row:last-child { border-bottom:0; }
.content-row .label { color:#aaa995 !important; font-size:14px !important; }
.content-row .label-val { color:#f0eadb !important; font-size:15px !important; overflow-wrap:anywhere; }
.form-tip-note { margin:0 0 22px !important; padding:13px 15px; color:#c7c5b4 !important; background:rgba(218,176,94,.07); border-left:3px solid #c99a46; border-radius:4px 10px 10px 4px; font-size:14px !important; }
.form-group-custom { margin:0 0 18px !important; }
.form-group-custom label { display:block; margin-bottom:8px; color:#d4cdbd !important; font-size:14px !important; }
.textbox-custom { width:100% !important; height:46px !important; padding:0 14px !important; color:#f4efe3 !important; background:#0a1b19 !important; border:1px solid rgba(218,176,94,.28) !important; border-radius:9px !important; font-size:15px !important; }
.textbox-custom::placeholder { color:#75827a !important; }
.btn-submit-custom { min-height:46px; display:inline-flex !important; align-items:center; justify-content:center; margin:6px 0 0 !important; padding:12px 20px !important; color:#171b14 !important; background:linear-gradient(135deg,#f0cf7d,#bd8736) !important; border:1px solid #e1b85d !important; border-radius:9px !important; font-size:15px !important; font-weight:750 !important; text-align:center; text-decoration:none; cursor:pointer; }
.btn-submit-custom:hover { filter:brightness(1.06); }
.alert-custom { margin-top:14px !important; padding:12px 14px !important; border-radius:8px !important; font-size:14px !important; }
.alert-custom.success { color:#b8e2bd !important; background:rgba(51,126,80,.15) !important; border:1px solid rgba(93,174,115,.28) !important; }
.alert-custom.error { color:#f0b2a7 !important; background:rgba(150,58,47,.16) !important; border:1px solid rgba(201,100,82,.3) !important; }
.section-heading { margin-bottom:18px; padding-bottom:14px; color:#f0ca79; border-bottom:1px solid rgba(218,176,94,.2); font-size:20px; font-weight:750; }
.character-loading,.empty-state { padding:24px 10px; color:#b6b5a8; font-size:15px; }
.character-card { display:flex; align-items:center; gap:16px; margin:0 0 12px; padding:16px; border:1px solid rgba(218,176,94,.19); border-radius:12px; background:rgba(19,47,41,.58); }
.character-avatar { width:46px; height:46px; flex:0 0 46px; display:grid; place-items:center; color:#f1c36c; background:rgba(196,145,64,.15); border:1px solid rgba(218,176,94,.4); border-radius:50%; font-size:20px; font-weight:750; }
.character-main { min-width:140px; }
.character-name { color:#f2ead9; font-size:16px; font-weight:700; }
.character-server { margin-top:4px; color:#999f91; font-size:13px; }
.character-stats { display:flex; flex-wrap:wrap; gap:24px; margin-left:auto; }
.character-stats span { display:grid; gap:4px; text-align:right; }
.character-stats small { color:#999f91; font-size:12px; }
.character-stats b { color:#e8c77e; font-size:14px; }
.auth-guard { padding:55px 20px !important; text-align:center; }
.auth-guard h3 { margin-bottom:12px; color:#f0ca79 !important; font-size:23px !important; }
.auth-guard p { margin-bottom:20px; color:#c1c0b5 !important; font-size:15px !important; }
.auth-guard .btn-login-now { display:inline-block; padding:12px 20px !important; color:#171b14 !important; background:linear-gradient(135deg,#f0cf7d,#bd8736) !important; border:0 !important; border-radius:9px !important; font-size:15px !important; text-decoration:none; }
.footer { height:auto !important; padding:22px 12px 28px; color:#828b80 !important; font-size:13px !important; line-height:1.5 !important; }
@media(max-width:760px) {
  .warp { width:100% !important; }
  .cj .p_2 { padding:16px 14px 28px !important; }
  .container-header { min-height:0; padding:18px !important; align-items:flex-start; flex-direction:column; gap:14px; }
  .container { grid-template-columns:minmax(0,1fr); gap:12px; margin-top:12px; }
  .container .row { padding:10px; }
  .container .row dl { grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; }
  .container .row dt { min-height:42px; padding:10px 11px; font-size:13px !important; }
  .container .row-content { min-height:300px; padding:17px !important; }
  .content-row { grid-template-columns:minmax(110px,.8fr) minmax(0,1.2fr); gap:10px; }
  .content-row .label,.content-row .label-val { font-size:13px !important; }
  .character-card { align-items:flex-start; flex-wrap:wrap; gap:12px; }
  .character-stats { width:100%; justify-content:space-between; margin:0; padding-left:58px; gap:10px; }
  .character-stats span { text-align:left; }
}
@media(max-width:380px) { .container .row dl { grid-template-columns:1fr; } .header-actions { gap:8px; } }
.webshop-placeholder { min-height:270px; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:35px 20px; text-align:center; border:1px dashed rgba(218,176,94,.24); border-radius:14px; background:radial-gradient(ellipse at 50% 25%,rgba(189,135,54,.10),transparent 60%),rgba(4,17,15,.22); }
.webshop-mark { width:58px; height:58px; display:grid; place-items:center; margin-bottom:16px; color:#e9c471; border:1px solid rgba(218,176,94,.48); border-radius:50%; background:rgba(189,135,54,.12); font-size:28px; }
.webshop-placeholder h2 { margin:0 0 9px; color:#efe5d0; font-size:19px; }
.webshop-placeholder p { max-width:420px; color:#aeb4a7; font-size:14px; line-height:1.7; }
.character-server { min-width:190px; display:grid; gap:5px; padding-left:18px; border-left:1px solid rgba(222,211,183,.12); }
.character-server small { color:#999f91; font-size:12px; }
.character-server b { color:#e8c77e; font-size:14px; font-weight:650; }
@media(max-width:760px) {
  .character-server { min-width:0; flex:1 1 calc(100% - 60px); margin-left:58px; padding:0; border:0; }
}