/*
 * 账号服务页统一样式
 * 用于 register.php、ope/user_center.php、ope/item_exchange.php
 */
* { margin: 0; padding: 0; box-sizing: border-box; }
:root {
  --primary: #ff6b35; --secondary: #ff4500; --accent: #ffd700;
  --dark: #0d0d0d; --dark-light: #1a0a0a; --dark-card: #2d1212;
  --panel: rgba(45, 18, 18, 0.92); --panel-border: rgba(255, 107, 53, 0.35);
  --input-bg: rgba(13, 13, 13, 0.85); --text-primary: #ffffff;
  --text-secondary: rgba(255, 255, 255, 0.7); --text-muted: rgba(255, 255, 255, 0.5);
  --site-hero-bg: url('./images/index/index_showcase_1.png');
}
body.service-page {
  font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif; color: var(--text-primary);
  min-height: 100vh; position: relative; background-color: #1a0a0a;
  background-image: linear-gradient(180deg, rgba(13,13,13,.5) 0%, rgba(26,10,10,.88) 100%), var(--site-hero-bg);
  background-size: cover; background-position: center center; background-attachment: fixed; background-repeat: no-repeat;
}
.site-nav { position: fixed; top: 0; left: 0; width: 100%; background: rgba(13,13,13,.9); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(255,255,255,.1); z-index: 100; transition: all .3s ease; }
.site-nav .nav-content { max-width: 1400px; margin: 0 auto; padding: 0 32px; display: flex; align-items: center; justify-content: space-between; height: 70px; }
.site-nav .logo { display: flex; align-items: center; gap: 12px; cursor: pointer; text-decoration: none; }
.site-nav .logo-icon { width: 48px; height: 48px; }
.site-nav .logo-icon img { width: 100%; height: 100%; object-fit: contain; }
.site-nav .logo-text { font-size: 20px; font-weight: 700; background: linear-gradient(135deg, var(--primary), var(--accent)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.site-nav .nav-links { display: flex; align-items: center; gap: 32px; list-style: none; }
.site-nav .nav-links li a { text-decoration: none; color: var(--text-secondary); font-size: 14px; font-weight: 500; transition: all .3s ease; position: relative; }
.site-nav .nav-links li a:hover { color: var(--text-primary); }
.site-nav .nav-links li a::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 0; height: 2px; background: linear-gradient(90deg, var(--primary), var(--secondary)); transition: width .3s ease; }
.site-nav .nav-links li a:hover::after { width: 100%; }
.site-nav .dropdown { position: static; }
.site-nav .dropdown-toggle { cursor: pointer; display: flex; align-items: center; gap: 4px; }
.site-nav .dropdown-toggle .arrow { font-size: 10px; transition: transform .3s ease; }
.site-nav .dropdown:hover .dropdown-toggle .arrow { transform: rotate(180deg); }
.site-nav .dropdown-menu { position: fixed; top: 70px; left: 0; width: 100%; background: linear-gradient(180deg, rgba(13,13,13,.98) 0%, rgba(26,10,10,.98) 100%); backdrop-filter: blur(20px); border-bottom: 1px solid rgba(255,107,53,.3); padding: 40px 32px; opacity: 0; visibility: hidden; transform: translateY(-10px); transition: all .3s ease; z-index: 99; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.site-nav .dropdown:hover .dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.site-nav .dropdown-content { max-width: 1200px; margin: 0 auto; display: flex; gap: 40px; justify-content: center; }
.site-nav .dropdown-item { display: flex; align-items: center; gap: 20px; padding: 24px 32px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: 16px; text-decoration: none; transition: all .3s ease; min-width: 280px; }
.site-nav .dropdown-item:hover { background: rgba(255,107,53,.15); border-color: rgba(255,107,53,.5); transform: translateY(-3px); box-shadow: 0 10px 30px rgba(255,107,53,.2); }
.site-nav .dropdown-icon { font-size: 36px; width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--primary), var(--secondary)); border-radius: 12px; }
.site-nav .dropdown-text { flex: 1; }
.site-nav .dropdown-title { font-size: 18px; font-weight: 600; color: var(--text-primary); margin-bottom: 6px; }
.site-nav .dropdown-desc { font-size: 13px; color: var(--text-muted); }
.site-nav .nav-actions { display: flex; align-items: center; gap: 16px; }
.site-nav .particle-toggle { width: 40px; height: 40px; border: 1px solid rgba(255,255,255,.2); border-radius: 8px; background: rgba(255,255,255,.05); color: var(--text-primary); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all .3s ease; }
.site-nav .particle-toggle:hover { background: rgba(255,107,53,.15); border-color: rgba(255,107,53,.5); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(255,107,53,.2); }
.site-nav .particle-toggle.active { background: linear-gradient(135deg, var(--primary), var(--secondary)); border-color: transparent; box-shadow: 0 4px 15px rgba(255,107,53,.4); }
.site-nav .nav-btn { padding: 12px 28px; border: none; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; transition: all .3s ease; }
.site-nav .btn-primary { background: linear-gradient(135deg, var(--primary), var(--secondary)); color: white; box-shadow: 0 4px 15px rgba(255,107,53,.4); }
.site-nav .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 6px 25px rgba(255,107,53,.6); }
.site-nav .btn-secondary { background: rgba(255,255,255,.1); color: var(--text-primary); border: 1px solid rgba(255,255,255,.2); }
.site-nav .btn-secondary:hover { background: rgba(255,255,255,.15); border-color: rgba(255,107,53,.5); }
.site-nav .btn-ghost { background: transparent; color: var(--text-primary); border: 1px solid rgba(255,107,53,.45); }
.site-nav .btn-ghost:hover { background: rgba(255,107,53,.12); border-color: var(--primary); }
.site-nav .mobile-menu-btn { display: none; background: none; border: none; color: white; cursor: pointer; padding: 8px; z-index: 101; }
.site-nav .mobile-menu-btn .close-icon { display: none; }
.site-nav .mobile-menu { display: none; position: fixed; top: 70px; left: 0; width: 100%; background: linear-gradient(180deg, rgba(13,13,13,.98) 0%, rgba(26,10,10,.98) 100%); backdrop-filter: blur(20px); border-bottom: 1px solid rgba(255,107,53,.3); padding: 24px 16px; z-index: 99; }
body.site-nav-mobile-open .site-nav .mobile-menu { display: block; }
body.site-nav-mobile-open .site-nav .mobile-menu-btn .menu-icon { display: none; }
body.site-nav-mobile-open .site-nav .mobile-menu-btn .close-icon { display: block; }
.site-nav .mobile-nav-links { list-style: none; margin-bottom: 24px; }
.site-nav .mobile-nav-links li { margin-bottom: 16px; }
.site-nav .mobile-nav-links li a { text-decoration: none; color: var(--text-secondary); font-size: 16px; font-weight: 500; display: block; padding: 8px 0; transition: color .3s ease; }
.site-nav .mobile-nav-links li a:hover { color: var(--primary); }
.site-nav .mobile-nav-actions { display: flex; flex-direction: column; gap: 12px; }
.service-page--with-nav { padding-top: 86px; }
.service-page--center { display: flex; justify-content: center; align-items: flex-start; padding: 86px 16px 24px; }
.service-bg { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.service-bg__gradient { position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle at 30% 20%, rgba(255,107,53,.2) 0%, transparent 50%), radial-gradient(circle at 70% 80%, rgba(255,69,0,.15) 0%, transparent 50%); animation: serviceBgShift 15s ease infinite; }
@keyframes serviceBgShift { 0%,100%{transform:translate(0,0);} 50%{transform:translate(5%,5%);} }
.service-wrap, .container { position: relative; z-index: 1; max-width: 1000px; margin: 0 auto; padding: 20px; width: 100%; }
.service-card, .login-box, .main-content { background: var(--panel); border: 1px solid var(--panel-border); border-radius: 16px; box-shadow: 0 16px 48px rgba(0,0,0,.45); }
.service-card { padding: 36px 32px; width: 100%; }
.service-card--narrow { max-width: 440px; margin: 24px auto; }
.main-content { padding: 0; overflow: hidden; }
.main-content.shop-panel { padding: 24px; }
.login-box { max-width: 420px; margin: 32px auto; padding: 32px 28px; }
.service-logo, .logo { text-align: center; margin-bottom: 28px; }
.service-logo h1, .logo h1, .panel-title { font-size: 28px; font-weight: 700; margin-bottom: 8px; background: linear-gradient(135deg, var(--primary), var(--accent)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.service-logo p, .logo p { color: var(--text-secondary); font-size: 14px; }
.login-box h2 { text-align: center; margin-bottom: 20px; font-size: 22px; background: linear-gradient(135deg, var(--primary), var(--accent)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.online-banner { text-align: center; margin-bottom: 20px; color: #66bb6a; font-size: 14px; }
.online-banner .muted { color: var(--text-muted); font-size: 12px; }
.form-group { margin-bottom: 18px; }
.form-group label, label { display: block; margin-bottom: 8px; color: var(--text-secondary); font-size: 14px; font-weight: 500; }
.form-group input, input, select { width: 100%; padding: 12px 14px; border: 1px solid rgba(255,107,53,.25); border-radius: 10px; background: var(--input-bg); color: var(--text-primary); font-size: 15px; transition: border-color .25s, box-shadow .25s; }
.form-group input::placeholder, input::placeholder { color: var(--text-muted); }
.form-group input:focus, input:focus, select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(255,107,53,.2); }
.btn { padding: 12px 24px; border: none; border-radius: 10px; cursor: pointer; font-size: 15px; font-weight: 600; transition: transform .2s, box-shadow .2s; }
.btn-primary, .btn:not(.btn-danger):not(.btn-send-code):not(.btn-link) { width: 100%; background: linear-gradient(135deg, var(--primary), var(--secondary)); color: #fff; }
.btn-primary:hover, .btn:not(.btn-danger):not(.btn-send-code):not(.btn-link):hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(255,107,53,.35); }
.btn-danger { background: #c0392b; color: #fff; text-decoration: none; display: inline-block; }
.btn-danger.logout, a.btn-danger.logout { position: absolute; top: 20px; right: 20px; padding: 8px 16px; font-size: 13px; }
.btn-danger:hover { background: #a93226; }
.btn-send-code { flex-shrink: 0; padding: 12px 14px; border: 1px solid var(--primary); border-radius: 10px; background: rgba(255,107,53,.15); color: var(--accent); font-size: 13px; white-space: nowrap; width: auto; }
.btn-send-code:hover:not(:disabled) { background: rgba(255,107,53,.28); }
.btn-send-code:disabled { opacity: .5; cursor: not-allowed; }
.btn-link { background: transparent; color: var(--primary); border: none; cursor: pointer; font-size: 14px; text-decoration: underline; width: auto; padding: 8px 0; }
.email-code-row { display: flex; gap: 10px; align-items: center; }
.email-code-row input { flex: 1; }
.login-switch { text-align: center; margin-top: 16px; }
.tips { background: rgba(13,13,13,.6); border: 1px solid rgba(255,107,53,.15); border-radius: 10px; padding: 14px 16px; margin-bottom: 20px; font-size: 13px; color: var(--text-secondary); }
.tips ul { margin: 8px 0 0 18px; }
.tips li { margin-bottom: 4px; }
.message, .alert { padding: 14px 16px; border-radius: 10px; margin-bottom: 18px; font-size: 14px; }
.message.success, .alert-success { background: rgba(40,167,69,.2); border: 1px solid rgba(40,167,69,.5); color: #8fd9a0; }
.message.error, .alert-error { background: rgba(220,53,69,.2); border: 1px solid rgba(220,53,69,.5); color: #f5a5ad; }
.alert-warning { background: rgba(255,193,7,.15); border: 1px solid rgba(255,193,7,.45); color: #ffe08a; }
.field-hint { margin-top: 8px; font-size: 12px; color: var(--text-muted); min-height: 18px; }
.field-hint.ok { color: #8fd9a0; }
.field-hint.err { color: #f5a5ad; }
.footer { text-align: center; margin-top: 24px; padding-top: 20px; border-top: 1px solid rgba(255,107,53,.2); }
.footer a { color: var(--primary); text-decoration: none; }
.footer a:hover { color: var(--accent); }
.captcha-group .captcha-row { display: flex; gap: 10px; align-items: center; }
.captcha-group .captcha-row input { flex: 1; }
.captcha-box { background: linear-gradient(135deg, var(--primary), var(--secondary)); color: #fff; padding: 12px 18px; border-radius: 10px; font-size: 20px; font-weight: bold; letter-spacing: 4px; font-family: 'Courier New', monospace; cursor: pointer; user-select: none; min-width: 96px; text-align: center; }
.captcha-box:hover { opacity: .9; }
.tabs { display: flex; border-bottom: 1px solid rgba(255,107,53,.25); background: rgba(13,13,13,.85); }
.tab-btn { flex: 1; padding: 15px 20px; background: transparent; border: none; color: var(--text-secondary); font-size: 15px; font-weight: 600; cursor: pointer; transition: all .25s; text-align: center; text-decoration: none; display: inline-block; }
.tab-btn:hover { color: var(--text-primary); background: rgba(255,107,53,.08); }
.tab-btn.active { color: var(--accent); background: rgba(255,107,53,.15); box-shadow: inset 0 -3px 0 var(--primary); }
.tab-content { display: none; padding: 28px; }
.tab-content.active { display: block; }
.user-info { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 0; padding: 16px 20px; background: rgba(13,13,13,.6); border-bottom: 1px solid rgba(255,107,53,.15); }
.email-status { color: #8fd9a0; font-size: 14px; }
.email-status.unbound { color: var(--accent); }
.password-strength { margin-top: 6px; font-size: 12px; }
.strength-weak { color: #f5a5ad; } .strength-medium { color: #ffe08a; } .strength-strong { color: #8fd9a0; }
.cost-info { background: rgba(255,107,53,.12); border-left: 3px solid var(--primary); padding: 12px; margin: 15px 0; border-radius: 8px; }
.cost-info .price { color: var(--accent); font-size: 18px; font-weight: bold; }
.current-name { font-size: 18px; color: var(--accent); margin: 10px 0; }
.notice-inline { margin-top: 10px; padding: 10px 12px; background: rgba(255,107,53,.1); border-radius: 8px; font-size: 13px; color: var(--text-secondary); }
.char-select { display: flex; gap: 15px; align-items: center; flex-wrap: wrap; }
.char-money { color: var(--accent); font-weight: bold; }
.account-meta { text-align: right; font-size: 14px; }
.account-meta .runes { color: #c77dff; font-weight: bold; }
.account-meta .account-name { color: var(--text-muted); }
.category-tabs { display: flex; gap: 6px; margin-bottom: 20px; background: rgba(13,13,13,.6); padding: 6px; border-radius: 10px; flex-wrap: wrap; }
.category-tab { padding: 10px 20px; background: transparent; border: none; border-radius: 8px; color: var(--text-secondary); cursor: pointer; transition: all .25s; text-decoration: none; font-size: 14px; font-weight: 600; }
.category-tab:hover { color: var(--text-primary); background: rgba(255,107,53,.1); }
.category-tab.active { background: linear-gradient(135deg, var(--primary), var(--secondary)); color: #fff; }
.class-tabs { display: flex; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; }
.class-tab { padding: 10px 18px; background: rgba(13,13,13,.6); border: 2px solid rgba(255,255,255,.1); border-radius: 8px; color: var(--text-secondary); text-decoration: none; transition: all .25s; }
.class-tab:hover, .class-tab.active { border-color: var(--primary); color: var(--primary); }
.class-tab.warrior { border-color: #c79c6e; color: #c79c6e; } .class-tab.monk { border-color: #f58cba; color: #f58cba; } .class-tab.ranger { border-color: #abd473; color: #abd473; } .class-tab.mage { border-color: #69ccf0; color: #69ccf0; }
.class-tab.warrior.active { background: rgba(199,156,110,.2); } .class-tab.monk.active { background: rgba(245,140,186,.2); } .class-tab.ranger.active { background: rgba(171,212,115,.2); } .class-tab.mage.active { background: rgba(105,204,240,.2); }
.items-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 15px; }
.item-card { background: rgba(13,13,13,.65); border: 1px solid rgba(255,107,53,.2); border-radius: 12px; padding: 15px; display: flex; gap: 15px; transition: border-color .25s, transform .25s; }
.item-card:hover { border-color: var(--primary); transform: translateY(-2px); }
.item-card.warrior { border-left: 3px solid #c79c6e; } .item-card.monk { border-left: 3px solid #f58cba; } .item-card.ranger { border-left: 3px solid #abd473; } .item-card.mage { border-left: 3px solid #69ccf0; } .item-card.common { border-left: 3px solid #9d9d9d; }
.item-icon { width: 64px; height: 64px; border-radius: 8px; background: rgba(13,13,13,.8); border: 2px solid rgba(255,107,53,.2); flex-shrink: 0; object-fit: contain; }
.item-icon.missing { display: flex; align-items: center; justify-content: center; color: var(--text-muted); font-size: 24px; }
.item-info { flex: 1; min-width: 0; }
.item-name { color: var(--primary); font-size: 16px; font-weight: bold; margin-bottom: 8px; }
.item-class, .item-price { color: var(--text-muted); font-size: 12px; margin-bottom: 8px; }
.item-price { color: var(--accent); font-size: 14px; }
.item-card .btn { width: auto; padding: 8px 16px; margin-top: 8px; }
.item-form { margin: 0; }
.account-subnav { display:flex; flex-wrap:wrap; max-width:720px; width:100%; margin:0 auto 20px; padding:4px; background:rgba(13,13,13,.75); border:1px solid rgba(255,107,53,.25); border-radius:12px; backdrop-filter:blur(8px); }
.account-subnav-tab { flex:1; min-width:100px; padding:12px 16px; text-align:center; text-decoration:none; color:var(--text-secondary); font-size:15px; font-weight:600; border-radius:8px; transition:all .25s ease; }
.account-subnav-tab:hover { color:var(--text-primary); background:rgba(255,107,53,.1); }
.account-subnav-tab.active { color:var(--accent); background:rgba(255,107,53,.2); box-shadow:inset 0 -2px 0 var(--primary); }
@media (max-width: 768px) { .site-nav .nav-links, .site-nav .nav-actions { display:none; } .site-nav .mobile-menu-btn { display:block; } .site-nav .nav-content { padding: 0 16px; } }
@media (max-width: 600px) { .service-card, .login-box { padding: 24px 18px; } .user-info { flex-direction: column; align-items: flex-start; } .tab-btn { padding: 12px 10px; font-size: 13px; } .char-select { flex-direction: column; align-items: flex-start; } a.btn-danger.logout { position: static; display: block; text-align: center; margin-bottom: 12px; } }