/* BeamReactor Core CSS — Gyodon Kawaii Theme */
/* $VER: core.css [ Gyodon skin ] v1.1 - 11.05.2026 */
/* Part of the Beam Reactor web engines by Treveur Bretaudiere 2004-2026 */

/* ========================================================================
   CSS VARIABLES — Pastel kawaii palette
   ======================================================================== */

:root {
	--key1: #a29bfe;
	--key2: #7d8cc4;

	/* Primary colors */
	--primary-color: #ffb7ce;
	--primary-hover: #fca3be;
	--secondary-color: #a0c4ff;

	/* Status */
	--success-color: #00e68a;
	--success-rgb: 0, 230, 138;
	--info-color: #ffaa00;
	--info-rgb: 255, 170, 0;
	--error-color: #ff6b6b;
	--error-rgb: 255, 107, 107;

	/* Background colors */
	--body-bg-start: #bde0fe;
	--body-bg-middle: #caf0f8;
	--body-bg-end: #bde0fe;
	--card-bg: rgba(255, 255, 255, 0.85);
	--frame-bg: #f1f8ff;
	--bubble-bg: #fff0f3;
	--sidebar-bg: #e8f0fe;
	--right-menu-bg: #f0e6ff;
	--right-menu-border: #d4c5f9;

	/* Member zone */
	--member-card-light: #e8f4fd;

	/* Text colors */
	--text-primary: #4a4a5a;
	--text-secondary: #7d8cc4;
	--font-mono: 'Fira Code', monospace;
	--text-muted: #8899aa;
	--text-gray: #6a7a8a;

	/* Link colors */
	--link-color: #7c6bc4;
	--link-hover: #a29bfe;
	--link-visited: #9b8ec7;

	/* Border & Shadow */
	--border-color: #a29bfe;
	--border-dark: #d4c5f9;
	--shadow-inset: rgba(162, 155, 254, 0.15);
	--shadow-default: rgba(0,0,0,0.06);

	/* UI Elements */
	--badge-bg: #ff6b6b;
	--badge-glow: rgba(255, 107, 107, 0.4);
	--warning-color: #ff6b6b;

	/* Layout */
	--sidebar-width: 305px;
	--content-margin-left: 320px;
	--border-radius: 25px;
	--border-radius-small: 15px;
	--border-radius-tiny: 5px;

	/* Shadows */
	--shadow: 0 2px 8px rgba(162, 155, 254, 0.15);
	--shadow-hover: 0 4px 16px rgba(162, 155, 254, 0.25);
	--text-shadow: rgba(125, 140, 196, 0.3) 0 0 4px;
	--link-glow: #a29bfe 0 0 4px;

	/* Monospaced fonts */
	--font-mono: 'Fira Code', 'JetBrains Mono', 'Source Code Pro',
			   'IBM Plex Mono', 'Inconsolata', Menlo, Monaco, Consolas, monospace;
}

/* ========================================================================
   BASE STYLES
   ======================================================================== */

html
{
	min-height: 100%;
}

body
{
	margin:0;
	font-family:Ropa Sans, sans-serif;
	font-size: 17pt;
	font-weight: 300;
	line-height: 1.75em;
	color: var(--text-primary);
	background-image:
		linear-gradient(var(--secondary-color) 1px, transparent 1px),
		linear-gradient(90deg, var(--secondary-color) 1px, transparent 1px);
	background-size: 40px 40px;
	background-color: var(--body-bg-middle);
}

h1
{
	margin: 0 0 14px 0;
	color: var(--text-gray);
}

h2
{
	margin: 0 0 14px 0;
	color: var(--text-gray);
	font-weight: 300;
}

h1, h2, h3, h4, h5, h6
{
	line-height: 1.5em;
}

h3.producttitle
{
	line-height: 1.0em;
}


/* TABLES */

table
{
	border-spacing: 6px;
	border-collapse: separate;
}

td
{
	padding: 6px;
}

table.center
{
	margin-left:auto;
	margin-right:auto;
}

table.tzero
{
	border-spacing: 0px;
}

td.tzero
{
	padding: 0px;
}


/* Content */

div#systemlinks
{
	white-space:nowrap;
}

.subtitle
{
	font-style:italic;
	font-family:"Verdana",Verdana,sans-serif;
}

img
{
	border: 0;
}

a
{
	color: var(--link-color);
	text-decoration: none;
}

a:hover
{
	color: var(--link-hover);
	text-decoration: none;
}

a:visited
{
	color: var(--link-visited);
	text-decoration: none;
}

a img
{
	border: 0px;
	opacity: 1;
}

a:hover img
{
	border: 0px;
	opacity: 0.9;
}


div.info
{
	text-decoration: none;
	color: inherit;
	border:0;
	vertical-align:middle;
}

div.info span
{
	display: none;
}

div.info:hover
{
	background: none;
}

div.info:hover span
{
	display: inline;
	position: absolute;
	z-index: 500;
	margin:2em 0 0 1em;
	background: var(--sidebar-bg);
	text-align: center;
	color: var(--text-primary);
	padding: 3px;
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius-tiny);
}


a.info
{
	text-decoration: none;
	color: var(--text-primary);
	border:0;
	vertical-align:middle;
}

a.info span
{
	display: none;
}

a.info:hover,a.info:focus,a.info:active
{
	background: none;
}

a.info:hover span,a.info:focus span,a.info:active span
{
	display: inline;
	position: absolute;
	z-index: 500;
	margin:2em 0 0 1em;
	background: var(--sidebar-bg);
	text-align: center;
	color: var(--text-primary);
	padding: 3px;
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius-tiny);
}

.text_warning
{
	color: var(--warning-color);
}

label {
	display: inline-block;
	cursor: pointer;
	position: relative;
	padding-left: 25px;
	margin-right: 15px;
	font-size: 13px;
}

.wrapper {
	width: 500px;
	margin: 50px auto;
}

.break-word
{
	word-break: break-all;
}

/* BOF CSS POPUP */
#menu
{
	top:0;
	right:0;
	bottom: 0;
	left: 0;
	width: 50%;
	height: 50%;
	z-index:0;
}
#menu a.p1, #menu a.p1:visited {display:block; width:72px; height:72px; text-decoration:none; top: 0; right: 0; bottom: 0; left: 0; border: 0;}
#menu a img {border:0;}
#menu a.p1:hover {text-decoration:none;}
#menu a .large
{
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 50%;
  height: 50%;
  margin: auto;
  color: var(--text-primary);
  width: 0px;
  height: 0px;
}
#menu a.p1:hover .large
{
 display:block;
 position:absolute;
 width:320px;
 height:320px;
 left:50%;
 top:50%;
 margin-left:-160px;
 margin-top:-160px;
 z-index: 0;
 border: 0px;
}
/* EOF CSS POPUP */

div
{
	display:block;
}


div.fv
{
	font-family: Tahoma, sans-serif;
	font-size: xx-small;
	color: var(--text-primary);
}
div.fv a
{
	font-family: Tahoma, sans-serif;
	font-size: 10pt;
	color: var(--text-primary);
	text-decoration : none;
	padding-bottom:5px;
}
div.fs
{
	font-family: Tahoma, sans-serif;
	font-size: xx-small;
	color: var(--text-primary);
}
div.fs a
{
	font-family: Tahoma, sans-serif;
	font-size: xx-small;
	color: var(--text-primary);
	text-decoration : none;
}
div.fs a:hover
{
	text-decoration:underline;
}


/* LAYOUT */

div#container
{
}

div#title
{
	top:0;
	left:0;
	width: var(--sidebar-width);
	height:100%;
	color: var(--text-primary);
	background: var(--sidebar-bg);
	box-shadow: 2px 0 8px rgba(162, 155, 254, 0.15);
	text-align:right;left:0;top:0;
	float:left;
	height: auto;
	min-height:100%;
	position:fixed;
	z-index: 9999;
}

#title img
{
	padding: 10px 28px 0px 0px;
}

.middle
{
	padding-bottom: 1px;
}

#bubble
{
	background-color: var(--bubble-bg);
	border-radius: var(--border-radius-small);
	padding: 8px; margin: 8px;
}


div.baseframe
{
	margin-top: 6px;
}

article.frame
{
	padding: 8px;
	background-color: var(--card-bg);
	background-repeat: repeat;
	background-position: left top;
	background-attachment:fixed;
	border-radius: var(--border-radius);
	border: 3px solid var(--border-color);
	color: var(--text-primary);
	margin: 12px 16px;
	box-shadow: var(--shadow);
}

div.frameTitle
{
	font-family: 'Ropa Sans', sans-serif;
	text-transform: uppercase;
	color: var(--primary-color);
	text-shadow: 2px 2px 0px #fff, -2px -2px 0px #fff, 2px -2px 0px #fff, -2px 2px 0px #fff, 4px 4px 0px var(--border-color);
	font-size: 24px;
	text-align: center;
	padding: 6px 0px 6px 4px;
	margin-bottom: 10px;
	word-break: break-all;
	letter-spacing: 1px;
	position: relative;
}

div.frameTitle::before {
	content: '◉  ◉';
	position: absolute;
	top: 6px;
	right: 14px;
	font-size: 11px;
	color: var(--border-color);
	letter-spacing: 3px;
	text-shadow: none;
}

div.frameTitle::after {
	content: '🍥';
	position: absolute;
	top: 4px;
	left: 14px;
	font-size: 14px;
	text-shadow: none;
	opacity: 0.6;
}

div.frameLine {
	border-radius: var(--border-radius-tiny);
	background-color: var(--frame-bg);
	margin: 4px;
	padding: 14px 24px 14px 24px;
	box-shadow: inset 0 0 8px var(--shadow-inset);
	font-size: 0.8em !important;
}

/* Images in frameLine */
div.frameLine img.alignleft {
	float: left;
	margin: 0 20px 15px 0;
	clear: left;
	font-size: initial !important;
}

div.frameLine img.alignright {
	float: right;
	margin: 0 0 15px 20px;
	clear: right;
	font-size: initial !important;
}

div.frameLine img.aligncenter {
	display: block;
	margin: 15px auto;
	clear: both;
	font-size: initial !important;
}

ol, ul
{
	list-style: square inside;
}

ul.nobullet
{
	list-style: outside none none;
}

#navigator ul li a {
	display: block;
	padding: 0.5em 1.5em;
	color: var(--text-secondary);
	text-decoration: none;
	outline: 0px none;
	border: 0px none;
	transition: none 0s ease 0s;
}

.main-nav,
.menu-nav ul
{
	list-style-type: none;
	padding:10px;
	margin:0;
}

.menu-nav li
{
	padding: 5px 5px;
	border-radius: var(--border-radius-small);
}

.menuitem
{
	padding: 4px; margin: 4px;
}

.menuitem a:hover
{
	text-shadow: var(--link-glow);
}

.random_product
{
	text-align: center;
	text-decoration: none !important;
	width:130px;
	margin-left:auto;
	margin-right:auto;
	font: bold 9px Verdana, sans-serif; color: var(--text-muted);
}

.random_product a
{
	text-decoration: none;
	font: bold 9px Verdana, sans-serif;
	color: var(--text-muted);
}

.random_product a:hover
{
	text-decoration: none;
	font: bold 9px Verdana, sans-serif;
	color: var(--text-secondary);
	text-shadow: var(--link-glow);
}

.random_product a img
{
	border:0;
}

div#leftMenu
{
	padding: 8px;
	border-radius: var(--border-radius-small);
	border:2px solid var(--border-color);
	float:left;
	background: rgba(255, 255, 255, 0.6);
}

div#rightMenu
{
	background: var(--right-menu-bg);
	border-radius: var(--border-radius-small);
	border:3px solid var(--right-menu-border);
	padding: 8px;
	float:right;
	width:180px;
	margin-top: 4px;
}

span
{
}

#header
{
	line-height: 1.42857;
}


/* BR Critical */
td.full
{
	width: 100%;
}


.twofa-enabled   { background:rgba(0,230,138,0.12); color:var(--success-color); border:1px solid var(--success-color); }
.twofa-disabled  { background:rgba(255,107,107,0.12); color:var(--warning-color); border:1px solid var(--warning-color); }


/* ========================================================================
   Threat Level Badges
   ======================================================================== */
.threat-badge {
	display: inline-block;
	min-width: 85px;
	padding: 6px 12px;
	border-radius: var(--border-radius-small);
	font-family: var(--font-mono);
	font-weight: bold;
	font-size: 0.75em;
	text-align: center;
	text-transform: uppercase;
	border-width: 3px;
	border-style: solid;
	box-shadow: 0 4px 0 rgba(0, 0, 0, 0.05);
	transition: all 0.3s ease;
}

.threat-0 {
	background: #e1fdf4;
	color: #4ecdc4;
	border-color: #4ecdc4;
}

.threat-1, .threat-2 {
	background: #fff9db;
	color: #fab005;
	border-color: #fab005;
}

.threat-3, .threat-4 {
	background: #fff0e6;
	color: #ff922b;
	border-color: #ff922b;
}

.threat-5, .threat-6 {
	background: #fff0f3;
	color: #ff8787;
	border-color: #ff8787;
	animation: pulse-soft 2s infinite;
}

.row-threat-high {
	background: rgba(255, 183, 206, 0.15) !important;
	border-left: 8px solid var(--primary-color) !important;
}

.row-threat-high::before {
	content: '';
	position: absolute;
	left: 0; top: 0; bottom: 0;
	width: 6px;
	background: var(--warning-color);
	box-shadow: 0 0 12px var(--badge-glow);
}

@keyframes pulse-soft {
	0% { transform: scale(1); box-shadow: 0 4px 0 rgba(255, 135, 135, 0.2); }
	50% { transform: scale(1.02); box-shadow: 0 4px 15px rgba(255, 135, 135, 0.4); }
	100% { transform: scale(1); box-shadow: 0 4px 0 rgba(255, 135, 135, 0.2); }
}

.twofa-section {
	padding:30px;
	background:var(--card-bg);
	border:2px solid var(--border-color);
	border-radius:var(--border-radius);
	box-shadow:var(--shadow);
	margin:30px 0;
}
.twofa-header {
	display:flex;
	align-items:center;
	gap:12px;
	margin-bottom:20px;
	color:var(--primary-color);
	font-size:1.3em;
}
.twofa-status {
	padding:5px 12px;
	border-radius:var(--border-radius-tiny);
	font-weight:bold;
	font-size:0.8em;
}
.qr-code {
	text-align:center;
	padding:20px;
	background:var(--frame-bg);
	border-radius:var(--border-radius-small);
	margin:20px 0;
	box-shadow:inset 0 0 15px var(--shadow-inset);
}
.qr-code img {
	max-width:220px;
	border:6px solid white;
	border-radius:10px;
	box-shadow:0 0 20px rgba(162, 155, 254, 0.2);
}
.backup-codes {
	background:var(--frame-bg);
	padding:18px;
	border-radius:var(--border-radius-small);
	font-family:monospace;
	font-size:1.1em;
	text-align:center;
	margin:20px 0;
	border:1px dashed var(--border-color);
}
.backup-codes code {
	background:var(--sidebar-bg);
	color:var(--primary-color);
	padding:4px 8px;
	border-radius:4px;
	letter-spacing:3px;
}
.twofa-actions {
	display:flex;
	gap:12px;
	flex-wrap:wrap;
	justify-content:center;
	margin-top:25px;
}
.btn-2fa {
	padding:11px 28px;
	border-radius:var(--border-radius-small);
	font-weight:bold;
	cursor:pointer;
	transition:all .3s ease;
	border:none;
}
.btn-enable  { background:var(--primary-color); color:#fff; }
.btn-disable { background:#fff0f3; color:var(--warning-color); border:2px solid var(--warning-color); }
.btn-regen   { background:var(--frame-bg); color:var(--link-color); border:2px solid var(--border-color); }
.btn-2fa:hover {
	transform:translateY(-3px);
	box-shadow:0 0 20px rgba(162, 155, 254, 0.3);
}

/* ========================================================================
   RESPONSIVE
   ======================================================================== */

@media (max-width: 1024px) {
	body {
		font-size: 15pt;
	}

	div#title {
		width: 250px;
	}

	div#middle {
		margin-left: 265px;
	}

	div#title img {
		width: 220px;
		height: auto;
	}
}

@media (max-width: 768px) {
	body {
		font-size: 14pt;
		line-height: 1.5em;
	}

	div#title {
		position: static !important;
		width: 100% !important;
		height: auto !important;
		min-height: auto !important;
		float: none !important;
		left: auto !important;
		top: auto !important;
		box-shadow: 0 2px 4px rgba(162, 155, 254, 0.15);
	}

	div#title img {
		display: block;
		margin: 10px auto;
		max-width: 200px;
		height: auto;
		padding: 5px;
	}

	div#middle {
		margin: 10px !important;
		margin-left: 10px !important;
		margin-top: 10px !important;
		padding: 10px;
		padding-right: 10px;
		padding-bottom: 30px;
	}

	#navigator ul {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 5px;
		padding: 10px 5px;
	}

	#navigator ul li {
		display: inline-block;
		margin: 0;
	}

	#navigator ul li a {
		padding: 8px 12px;
		font-size: 0.9em;
	}

	div.frame,
	article.frame {
		margin: 4px 0;
	}

	div.frameLine {
		padding: 10px;
		font-size: 0.9em !important;
	}

	table {
		display: block;
		overflow-x: auto;
		white-space: nowrap;
		-webkit-overflow-scrolling: touch;
	}

	div#rightMenu {
		width: 100% !important;
		float: none !important;
		margin: 10px 0;
	}

	div#leftMenu {
		width: 100% !important;
		float: none !important;
		margin: 10px 0;
	}
}

@media (max-width: 480px) {
	body {
		font-size: 13pt;
	}

	div#title img {
		max-width: 180px;
	}

	div#middle {
		margin: 5px !important;
		padding: 5px;
	}

	div.frameTitle {
		font-size: 16px !important;
		padding: 4px;
	}

	div.frameLine {
		padding: 8px !important;
		font-size: 0.85em !important;
	}

	#navigator ul li a {
		padding: 6px 10px;
		font-size: 0.85em;
	}

	button,
	input[type="submit"],
	input[type="button"],
	.btn {
		display: block;
		width: 100%;
		margin: 5px 0;
	}

	.twofa-actions {
		flex-direction: column;
	}

	.btn-2fa {
		width: 100%;
	}

	img {
		max-width: 100%;
		height: auto;
	}
}


/* Pixel buttons kawaii */
.pixel-btn {
	background: white;
	border: 3px solid var(--border-color);
	border-radius: 15px;
	margin: 8px;
	display: flex;
	align-items: center;
	padding: 10px;
	box-shadow: 0 4px 0 var(--border-color);
	transition: transform 0.1s;
}

.pixel-btn:active {
	transform: translateY(3px);
	box-shadow: 0 1px 0 var(--border-color);
}

/* Floating animation */
@keyframes float {
	0% { transform: translateY(0px); }
	50% { transform: translateY(-10px); }
	100% { transform: translateY(0px); }
}

.floating-animation {
	animation: float 3s ease-in-out infinite;
	max-width: 120px;
}

/* Sidebar footer stats */
.sidebar-footer {
	background: var(--secondary-color);
	border-top: 3px solid var(--border-color);
	border-radius: 0 0 var(--border-radius) var(--border-radius);
	padding: 10px;
}

.status-dot {
	background-color: var(--primary-color);
	border: 2px solid white;
}

/* ========================================================================
   DIALOGS (br-dlg) — Native <dialog>, stylé par le skin via variables CSS
   Styles fournis ici, dialogs.js fournit seulement la structure + comportement.
   ======================================================================== */

dialog.br-dlg {
	background: var(--card-bg);
	color: var(--text-primary);
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius);
	padding: 0;
	width: min(480px, 94vw);
	box-shadow: var(--shadow);
	font-family: inherit;
	animation: brDlgIn .2s cubic-bezier(.22,.61,.36,1) both;
}
dialog.br-dlg.br-dlg-wide { width: min(620px, 94vw); }

@keyframes brDlgIn {
	from { opacity: 0; transform: translateY(-14px) scale(.96); }
	to   { opacity: 1; transform: none; }
}

dialog.br-dlg::backdrop {
	background: rgba(0,0,0,.65);
	backdrop-filter: blur(2px);
}

.br-dlg-hd {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 22px 24px 18px;
	border-bottom: 1px solid var(--border-color);
}

.br-dlg-ic {
	flex: 0 0 32px;
	height: 32px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
	user-select: none;
}

.br-dlg-title {
	margin: 0;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--text-primary);
}

.br-dlg-close-btn {
	margin-left: auto;
	flex-shrink: 0;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	border: none;
	background: transparent;
	color: var(--text-muted);
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background .15s, color .15s;
	padding: 0;
}
.br-dlg-close-btn:hover { background: var(--frame-bg); color: var(--primary-color); }

.br-dlg-bd {
	padding: 20px 24px 22px;
	font-size: 15px;
	line-height: 1.65;
	color: var(--text-primary);
}
.br-dlg-bd p { margin: 0; color: var(--text-primary); }

.br-dlg-input {
	display: block;
	width: 100%;
	margin-top: 14px;
	padding: 9px 12px;
	font-size: 15px;
	font-family: inherit;
	background: var(--frame-bg);
	color: var(--text-primary);
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius-small);
	box-sizing: border-box;
	outline: none;
	transition: border-color .15s, box-shadow .15s;
}
.br-dlg-input:focus {
	border-color: var(--primary-color);
	box-shadow: 0 0 0 2px var(--primary-glow, rgba(0,0,0,.1));
}

.br-dlg-ft { padding: 10px 24px 22px; }

.br-dlg-ft-row {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 10px;
}

.br-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 9px 22px;
	border-radius: var(--border-radius-small);
	border: 1px solid transparent;
	font-family: inherit;
	font-size: 14px;
	cursor: pointer;
	transition: filter .15s, transform .12s, box-shadow .15s;
	white-space: nowrap;
	min-width: 80px;
}
.br-btn:focus-visible { outline: 2px solid var(--primary-color); outline-offset: 2px; }
.br-btn:hover  { box-shadow: var(--shadow-hover); }
.br-btn:active { transform: scale(.98); }

.br-btn-primary {
	background: var(--primary-color);
	color: var(--body-bg-start, #000);
	border-color: var(--primary-color);
	font-weight: 700;
}
.br-btn-secondary {
	background: var(--frame-bg);
	color: var(--text-secondary);
	border-color: var(--border-color);
}
.br-btn-secondary:hover { color: var(--primary-color); border-color: var(--primary-color); }