@charset "utf-8";
/* ==========================================================================
   Dragon Ball Ultimate — modern theme
   Palette: deep space navy background, Goku-orange + Ki-blue accents.
   NOTE: legacy selectors below (used by system/pages/*.php raw output)
   are kept intact and re-skinned, not removed, so other pages stay working.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@500;600;700&family=Inter:wght@400;500;600&display=swap');

:root{
	--bg-deep:#080b14;
	--bg-space:#0c1120;
	--bg-panel:#111a2e;
	--bg-panel-alt:#0e1626;
	--border-soft: rgba(120,160,255,0.14);
	--border-glow: rgba(255,140,0,0.35);
	--text:#e7ecf7;
	--text-muted:#93a0bd;
	--accent-orange:#ff8c1a;
	--accent-orange-2:#ffb300;
	--accent-blue:#29b6f6;
	--accent-blue-2:#00e5ff;
	--online:#3ddc84;
	--offline:#ff5470;
	--radius:12px;
	--font-head:'Rajdhani', 'Segoe UI', Arial, sans-serif;
	--font-body:'Inter', 'Segoe UI', Tahoma, sans-serif;
}

*{ box-sizing:border-box; }

body{
	background:
		radial-gradient(ellipse 900px 500px at 15% -10%, rgba(41,182,246,0.16), transparent 60%),
		radial-gradient(ellipse 900px 600px at 90% 10%, rgba(255,140,26,0.14), transparent 55%),
		linear-gradient(180deg, var(--bg-deep), var(--bg-space) 40%, var(--bg-deep));
	background-attachment: fixed;
	font-family: var(--font-body);
	color: var(--text);
	margin:0;
	padding:0;
	line-height:1.5;
}

h1,h2,h3,h4{ font-family: var(--font-head); letter-spacing:.02em; }

a{
	color: var(--accent-blue);
	text-decoration:none;
}
a:hover{
	color: var(--accent-orange-2);
	text-decoration:none;
}

::selection{ background: var(--accent-orange); color:#101010; }

/* ==========================================================================
   Page shell
   ========================================================================== */
.dbu-shell{
	max-width:1180px;
	margin:0 auto;
	padding: 18px 16px 40px;
}

/* ---- header / hero ---- */
.dbu-header{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:16px;
	flex-wrap:wrap;
	padding: 14px 18px;
	margin-bottom: 16px;
	background: linear-gradient(180deg, rgba(17,26,46,0.9), rgba(12,17,32,0.9));
	border:1px solid var(--border-soft);
	border-radius: var(--radius);
	box-shadow: 0 0 0 1px rgba(0,0,0,.2), 0 10px 30px -12px rgba(0,0,0,.7);
}
.dbu-brand{ display:flex; align-items:center; gap:12px; }
.dbu-brand img{ height:44px; width:auto; display:block; filter: drop-shadow(0 0 10px rgba(255,140,26,.35)); }
.dbu-brand-text{ font-family: var(--font-head); font-size:20px; font-weight:700; color:#fff; }
.dbu-brand-text span{
	background: linear-gradient(90deg, var(--accent-orange), var(--accent-orange-2));
	-webkit-background-clip:text;
	background-clip:text;
	color:transparent;
}

.dbu-nav{ display:flex; gap:6px; flex-wrap:wrap; }
.dbu-nav a{
	font-family: var(--font-head);
	font-weight:600;
	font-size:14px;
	color: var(--text);
	padding:8px 14px;
	border-radius:8px;
	border:1px solid transparent;
	transition: all .15s ease;
}
.dbu-nav a:hover{
	color:#fff;
	background: rgba(255,140,26,0.12);
	border-color: var(--border-glow);
}
.dbu-admin-link{
	color: var(--offline) !important;
	border-color: rgba(255,84,112,0.4) !important;
}
.dbu-admin-link:hover{
	background: rgba(255,84,112,0.14) !important;
}

/* ---- hero banner ---- */
.dbu-hero{
	position:relative;
	border-radius: var(--radius);
	overflow:hidden;
	margin-bottom:18px;
	border:1px solid var(--border-soft);
	box-shadow: 0 12px 34px -14px rgba(0,0,0,.75);
}
.dbu-hero img{ display:block; width:100%; height:auto; }

/* plain white hero (no image) */
.dbu-hero-white{
	background:#fff;
	padding:38px 20px;
	text-align:center;
}
.dbu-hero-title{
	font-family: var(--font-head);
	font-weight:700;
	font-size:clamp(32px, 6vw, 56px);
	letter-spacing:2px;
	color:#111a2e;
	text-transform:uppercase;
}
.dbu-hero-title span{ color: var(--accent-orange); }
.dbu-hero-sub{
	margin-top:6px;
	font-family: var(--font-body);
	font-size:14px;
	letter-spacing:3px;
	text-transform:uppercase;
	color:#6b7280;
}

/* ---- layout grid ---- */
.dbu-grid{
	display:grid;
	grid-template-columns: 220px minmax(0,1fr) 260px;
	gap:16px;
	align-items:start;
}
@media (max-width: 980px){
	.dbu-grid{ grid-template-columns: 1fr; }
}

/* ---- generic panel/card ---- */
.dbu-card{
	background: linear-gradient(180deg, var(--bg-panel), var(--bg-panel-alt));
	border:1px solid var(--border-soft);
	border-radius: var(--radius);
	margin-bottom:14px;
	overflow:hidden;
	box-shadow: 0 8px 22px -14px rgba(0,0,0,.7);
}
.dbu-card-title{
	font-family: var(--font-head);
	font-weight:700;
	font-size:13px;
	text-transform:uppercase;
	letter-spacing:.06em;
	color:#fff;
	padding:10px 14px;
	background: linear-gradient(90deg, rgba(255,140,26,0.22), rgba(41,182,246,0.14));
	border-bottom:1px solid var(--border-soft);
}
.dbu-card-body{ padding:12px 14px; font-size:13px; color: var(--text-muted); }

/* ---- login card ---- */
.dbu-login .dbu-card-body{ display:flex; flex-direction:column; gap:8px; }
.dbu-login label{ font-size:11px; text-transform:uppercase; letter-spacing:.05em; color: var(--text-muted); }
.dbu-login input[type="text"],
.dbu-login input[type="password"]{
	width:100%;
	padding:9px 10px;
	background: rgba(0,0,0,.35);
	border:1px solid var(--border-soft);
	border-radius:8px;
	color:#fff;
	font-size:13px;
}
.dbu-login input:focus{ outline:none; border-color: var(--accent-blue); box-shadow:0 0 0 3px rgba(41,182,246,.18); }
.dbu-login .dbu-btn{
	margin-top:4px;
	border:none;
	cursor:pointer;
	padding:10px 12px;
	border-radius:8px;
	font-family: var(--font-head);
	font-weight:700;
	letter-spacing:.04em;
	color:#101010;
	background: linear-gradient(90deg, var(--accent-orange-2), var(--accent-orange));
	box-shadow: 0 6px 16px -6px rgba(255,140,26,.55);
}
.dbu-login .dbu-btn:hover{ filter:brightness(1.08); }
.dbu-btn{
	-webkit-appearance:none;
	-moz-appearance:none;
	appearance:none;
	display:inline-block;
	margin-top:4px;
	border:none;
	cursor:pointer;
	padding:10px 12px;
	border-radius:8px;
	font-family: var(--font-head);
	font-size:13px;
	font-weight:700;
	letter-spacing:.04em;
	color:#101010;
	background: linear-gradient(90deg, var(--accent-orange-2), var(--accent-orange));
	box-shadow: 0 6px 16px -6px rgba(255,140,26,.55);
	text-decoration:none;
}
.dbu-btn:hover{ filter:brightness(1.08); color:#101010; }
.dbu-login .dbu-register{
	text-align:center;
	font-size:12px;
	margin-top:2px;
}

/* ---- nav menu lists (left sidebar groups) ---- */
.dbu-menu{ list-style:none; margin:0; padding:6px; }
.dbu-menu li{ margin:2px 0; }
.dbu-menu a{
	display:block;
	padding:7px 10px;
	border-radius:7px;
	font-size:13px;
	color: var(--text);
}
.dbu-menu a:hover{ background: rgba(41,182,246,0.12); color:#fff; }
.dbu-menu .ico{ margin-right:8px; opacity:.9; }

/* ---- main content area ---- */
.dbu-content{
	background: linear-gradient(180deg, var(--bg-panel), var(--bg-panel-alt));
	border:1px solid var(--border-soft);
	border-radius: var(--radius);
	padding:20px 22px;
	min-height:320px;
	box-shadow: 0 8px 22px -14px rgba(0,0,0,.7);
	font-size:14px;
	color: var(--text);
}
.dbu-content h1, .dbu-content h2, .dbu-content h3{ color:#fff; }
.dbu-content a{ color: var(--accent-blue); }

/* ---- server status ---- */
.dbu-status-row{ display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.dbu-dot{ width:9px; height:9px; border-radius:50%; display:inline-block; box-shadow:0 0 8px currentColor; }
.dbu-dot.on{ background: var(--online); color: var(--online); }
.dbu-dot.off{ background: var(--offline); color: var(--offline); }
.dbu-status-label{ font-weight:700; font-family: var(--font-head); }
.dbu-status-label.on{ color: var(--online); }
.dbu-status-label.off{ color: var(--offline); }

/* ---- footer ---- */
.dbu-footer{
	margin-top:18px;
	text-align:center;
	color: var(--text-muted);
	font-size:12px;
}
.dbu-footer img{ max-width:100%; height:auto; border-radius: var(--radius); border:1px solid var(--border-soft); margin-bottom:10px; }
.dbu-footer .badges{ margin:10px 0; opacity:.85; }
.dbu-footer p{ margin:4px 0; }

/* ==========================================================================
   Ranking tables used by templates/naruto/topserverplayers.php & fragers.php
   ========================================================================== */
.black{ color: var(--text) !important; }
table{ border-collapse:collapse; width:100%; }
th{ font-family: var(--font-head); font-size:12px; color: var(--accent-orange-2); padding:6px 4px; border-bottom:1px solid var(--border-soft); }
td{ padding:6px 4px; font-size:12px; border-bottom:1px solid rgba(255,255,255,0.04); }
tr.highlight:hover{ background: rgba(41,182,246,0.08); }
.number{ color: var(--text-muted); }

/* ==========================================================================
   Legacy selectors (kept for compatibility with system/pages/*.php output)
   Re-skinned to match the new dark theme instead of the old boxed layout.
   ========================================================================== */

#overview{ display:none; }

#visualRank5-info,#visualRank4-info,#visualRank3-info,#visualRank2-info,#visualRank-info{
	background:none;
	width:auto; height:auto; position:relative; left:0; right:0; padding-top:6px;
}
#visualRank-info.selectMenu{ position:static; color: var(--accent-blue); font-size:14px; font-weight:bold; }
#visual-info{ background:none; width:auto; height:auto; margin:10px 0; padding-top:0; position:relative; }
#visual-info .name{ position:static; color: var(--accent-blue); font-size:14px; font-weight:bold; }
#visual-info .select{ position:static; color:#fff; font-size:14px; font-weight:bold; }

.pds,.pds1,.t,.t1,.t2,.t2a,.t2b,.s,.s1,.s_long,.s1_long{
	background:none;
	width:auto;
	height:auto;
	position:relative;
	left:0; right:0; top:0;
}

.left{ width:auto; padding:0; float:none; }
.center{ padding-top:0; width:auto; float:none; }
.center_long{ padding-top:0; width:auto; float:none; }
.right{ float:none; padding-left:0; width:auto; padding-top:0; }
.tekst{ font-size:14px; color: var(--text); padding:0; }

form{ margin:0; padding:0; }

.ng{ background:none; border-bottom:1px solid var(--border-soft); font-size:16px; color: var(--accent-orange-2); padding:8px 0px; }
.ng2{ font-size:16px; color: var(--accent-orange-2); }

/* menu */
.mng{ margin:0; background: rgba(255,140,26,0.14); border-radius:7px; padding:8px; color:#fff; font-weight:bold; font-size:12px; }
.mng2{ margin:0; border-bottom:1px solid var(--border-soft); padding:8px; color:#fff; font-weight:bold; font-size:12px; }
.mng3{ margin:0; border-bottom:1px solid var(--border-soft); padding:8px; color:#fff; font-weight:bold; font-size:12px; }
.mngt{ padding:10px; font-size:12px; color: var(--text); }

.m99,.m88,.m1{ list-style:none; margin:2px 5px; padding:0; }
.m99 li,.m88 li,.m1 li{ padding:1px; }
.m99 a,.m88 a,.m1 a{
	padding:6px;
	background:transparent;
	font-size:12px;
	color: var(--text);
	font-weight: bold;
	display:block;
	padding-left:10px;
	text-decoration:none;
	border-radius:6px;
}
.m99 a:hover{ background: rgba(41,182,246,0.12); color: var(--accent-blue-2); }
.m88 a:hover{ background: rgba(41,182,246,0.12); color: var(--accent-blue-2); }
.m1 a:hover{ background: rgba(255,140,26,0.14); color:#fff; }
/* koniec menu */

.form input{ padding:6px 8px; background: rgba(0,0,0,.35); border:1px solid var(--border-soft); border-radius:6px; vertical-align:middle; color:#fff; width:110px; }
.form{ color:#fff; font-size:12px; font-weight:bold; position:relative; left:0; top:0; }
.f-info{ color: var(--offline); font-size:11px; position:relative; left:0; top:0; font-family:var(--font-body); width:auto; text-align:center; }
.f-info a{ color: var(--offline); text-decoration:none; }
.f-info a:hover{ color: var(--offline); text-decoration:underline; }

.task-menu{ cursor: pointer; }
.task-menu li{ list-style-type:none; height:16px; background-repeat:no-repeat; padding-left:20px; padding-bottom:5px; color: var(--text); }
.task-menu li:hover{ background-color: rgba(255,255,255,0.06); }

#container{ width:100%; max-width:800px; position:relative; }
#header{ background:none; position:relative; width:100%; height:auto; }
#server_name{ display:none; }
#panel{ position:relative; margin-top:0; background: var(--bg-panel); border:1px solid var(--border-soft); border-radius: var(--radius); padding:10px; }
#panel a{ text-decoration:none; color: var(--text); }
#panel a:hover{ font-weight:bold; color:#fff; }
#panel li{ background:none; padding-left:10px; list-style-type:none; height:auto; padding-bottom:6px; }
#panel .top{ background:none; width:auto; height:auto; padding:6px 0; text-align:center; font-weight:bold; color: var(--accent-orange-2); }
#panel .mid{ background:none; text-align:center; padding:10px; width:auto; }
#panel .bot{ background:none; padding:0; margin:0; width:auto; height:auto; }
#panel ul{ width:auto; padding:0; margin:0; }
#content{ position:relative; margin-left:0; margin-top:10px; }
#content .top{ background:none; width:auto; height:auto; padding:6px 0; text-align:center; font-weight:bold; color:#fff; }
#content .mid{ background:none; padding:10px 0; width:auto; min-height:auto; }
#content .bot{ background:none; padding:0; margin:0; width:auto; height:auto; }

.message .title, .news .newsTitle{
	width:auto;
	height:auto;
	padding:10px 12px;
	background: rgba(255,140,26,0.14);
	border-radius:8px;
	color:#fff;
	font-family: var(--font-body);
	font-size:12px;
	font-weight:bold;
	border:0px;
}
.message .content{
	padding:10px 2px;
	color: var(--text);
}
.message{ margin-bottom:14px; }
.message .bar, .messageAdd{
	background: rgba(255,140,26,0.08);
	color: var(--text);
	border:1px solid var(--border-soft);
	border-radius:8px;
}
.message .bar a, .messageAdd a{ color: var(--accent-blue); }

/* alert()/success()/error() helper output (system.php) - jQuery UI theme
   classes reused as plain markers, restyled to match the dark theme. */
.ui-widget{ margin-bottom:14px; }
.ui-widget p{ margin:0; }
.ui-state-highlight, .ui-state-error{
	border-radius:8px;
	padding:10px 14px;
	color:#fff;
	font-size:13px;
	line-height:1.5;
	overflow:hidden;
}
.ui-state-highlight{
	background: rgba(255,140,26,0.1);
	border:1px solid rgba(255,140,26,0.35);
}
.ui-state-error{
	background: rgba(255,84,112,0.1);
	border:1px solid rgba(255,84,112,0.4);
}
.ui-state-highlight strong, .ui-state-error strong{ color:#fff; }
.ui-icon{
	width:16px;
	height:16px;
}
.ui-icon-info::before{ content:"i"; }
.ui-icon-alert::before{ content:"!"; }
.ui-icon-info::before, .ui-icon-alert::before{
	display:flex;
	align-items:center;
	justify-content:center;
	width:16px;
	height:16px;
	border-radius:50%;
	font-family: var(--font-head);
	font-size:11px;
	font-weight:800;
	color:#101010;
}
.ui-state-highlight .ui-icon-info::before{ background: var(--accent-orange-2); }

/* jQuery UI tabs (account page, etc.) - keep the tab strip on one line
   instead of wrapping once there are more than ~4 tabs. */
.ui-tabs .ui-tabs-nav{
	display:flex;
	flex-wrap:nowrap;
}
.ui-tabs .ui-tabs-nav li{
	float:none;
	flex:0 0 auto;
}
.ui-tabs .ui-tabs-nav li a{
	padding:6px 10px;
	font-size:12px;
}
.ui-state-error .ui-icon-alert::before{ background: var(--accent-red, #ff5470); }

/* fake-table layout (label ul + value ul, side by side) used on create account,
   profile, etc. The two <ul>s are completely independent floated columns, so
   nothing keeps their row heights in sync - whichever column has taller rows
   (selects, the captcha image, radio groups) ends up taller than the other,
   exposing the dark .table background underneath the shorter one. Turning
   the label/value <ul>s into a real CSS grid (via display:contents) makes
   each visual row a single grid row shared by both columns, so they can't
   drift apart. grid-auto-flow:column plus a matching grid-template-rows
   (set per .table instance, since row counts differ) makes the first <ul>'s
   items fill column 1 top-to-bottom, then the second <ul>'s items fill
   column 2 - matching the label-column-then-value-column DOM order already
   in the views. */
.table{
	display:grid;
	grid-template-columns: 30% 70%;
	grid-auto-flow: column;
	overflow:hidden;
	background:#333;
}
.table ul{ display:contents; }
.table ul li{ float:none; height:auto; min-height:20px; box-sizing:border-box; display:flex; align-items:center; }

#error{
	background: rgba(255,84,112,0.12);
	border:1px solid var(--offline);
	border-radius:8px;
	position:relative;
	font-family: var(--font-body);
	font-size:12px;
	font-weight:bold;
	width:auto;
	padding:16px;
	margin:20px 0;
	cursor:pointer;
	color: var(--text);
}
#captcha-image{ margin-top:5px; }
#account-image{ background:none; width:auto; height:auto; float:none; }
#choose-skill{ float:left; margin-right:20px; }
#form #iobox{
	z-index:10;
	position:fixed;
	background: var(--bg-panel);
	border:1px solid var(--border-soft);
	border-radius:8px;
	cursor:move;
	color: var(--text);
	font-size:12px;
}
#form #iobox fieldset{ cursor:default; }

.color0{ background-color: rgba(255,140,26,0.2); }
.color1{ background-color: rgba(41,182,246,0.16); }
.color2{ background-color: rgba(0,0,0,0.3); }
.percent_bar{ background-color: rgba(0,0,0,.4); height:20px; color:#fff; font-weight:bold; text-align:center; border-radius:6px; overflow:hidden; }
legend{ color: var(--accent-orange-2); }

/* SHADOWS (kept as no-ops, old table-corner-shadow technique no longer needed) */
.TableShadowContainerRightTop,.TableShadowRightTop,.TableContentAndRightShadow,
.TableShadowContainer,.TableBottomShadow,.TableBottomLeftShadow,.TableBottomRightShadow{
	background:none; box-shadow:none;
}

/* LABELS */
.LabelV{ font-size:12px; font-weight:bold; padding-right:10px; white-space:nowrap; vertical-align:top; color: var(--text); }
.LabelH{ font-weight:bold; padding-right:10px; white-space:nowrap; background-color: rgba(255,255,255,0.06); color: var(--text); }
.LabelH td{ background-color: transparent; padding:5px; }

/* BUTTONS */
.InnerTableButtonRow{ width:100%; padding-left:1px; padding-right:0px; padding-bottom:4px; border:0px; }
.InnerTableButtonRow td{ padding-right:4px; }
.BigButton{ position:relative; width:135px; height:25px; z-index:10; }
.BigButtonOver{ position:absolute; top:0; left:0; width:137px; height:25px; visibility:hidden; z-index:15; }
.ButtonText{ position:absolute; top:0; left:0; height:31px; width:144px; z-index:20; }
.TopButtonContainer{ position:relative; right:4px; top:4px; z-index:60; }
.TopButtonContainer .TopButton{ position:absolute; right:0px; z-index:55; }

.Content .BoxContent .Odd{ background-color: rgba(255,255,255,0.03); padding:4px; }
.Content .BoxContent .Even{ background-color: rgba(255,255,255,0.06); padding:4px; }
.Content .NewsCategoryIconSmall{ position:absolute; top:1px; left:1px; height:16px; width:16px; background-repeat:no-repeat; }

#vt_footer{ float:none; color: var(--text-muted); font-family: var(--font-body); font-size:12px; font-weight:bold; }
.vt_status_box{ width:198px; height:42px; margin:0 0 10px 0; }
.vt_active_status{ width:198px; height:42px; background: var(--bg-panel); border-radius:8px; z-index:99999; position:relative; }
.vt_status_name{ width:128px; height:20px; padding:15px 0 0 12px; float:left; color: var(--text); }
.vt_status_state{ width:30px; height:20px; padding-top:15px; float:left; }
div.vt_status_info{
	width:176px; position:absolute; background: var(--bg-panel);
	border:1px solid var(--border-soft); border-radius:8px; padding:10px;
	margin:42px 0 0 0; z-index:999999; display:none; color: var(--text);
}

.imagem-shadow{ opacity:0.6; }
.imagem-shadow:hover{ opacity:1.0; }

font.details_wars{ text-decoration:none; font-weight:bold; color: var(--text); }
font.details_wars:hover{ text-decoration:none; font-weight:bold; font-size:13px; color:#fff; }
font.details_perso{ text-decoration:none; font-weight:bold; color: var(--accent-blue); }
font.details_perso:hover{ text-decoration:none; font-weight:bold; font-size:13px; color: var(--accent-orange-2); }

/* Responsive tweaks */
@media (max-width: 640px){
	.dbu-header{ flex-direction:column; align-items:flex-start; }
	.dbu-nav{ width:100%; }
	.dbu-content{ padding:14px 16px; }
}