/* ==========================================================================
   1. DESIGN TOKENS (VARIABLES) & GLOBAL RESET
   ========================================================================== */
:root {
	--clr-1: #1b1b1b; 	--clr-2: #4E75C2;	--clr-3: #B34E3F;
	--clr-4: #B84EC2;	--clr-5: #E5B8B0;	--clr-6: #71bd8f;
	--clr-7: #92ACDC;	--clr-8: #ebebeb; 	--clr-9: #5b5b5b;
}

@font-face {
	font-family: font-1; src: url(https://raw.githubusercontent.com/google/fonts/main/ofl/sansation/Sansation-Regular.ttf);
}
@font-face {
	font-family: font-2; src: url(https://raw.githubusercontent.com/google/fonts/main/ofl/oxanium/Oxanium[wght].ttf);
}
@font-face {
	font-family: font-3; src: url(/kaiti.ttf);
}

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

body, html {
	margin: 0;
	padding: 0;
	scroll-behavior: smooth;
}

body {
	min-height: 100vh;
	background-color: var(--clr-8);
	display: grid;
	grid-template-rows: auto 1fr auto;
	color: var(--clr-1);
}

.clearfix::after {
	content: "";
	clear: both;
	display: table;
}

/* ==========================================================================
   2. SITE CORE LAYOUT & STRUCTURE (HEADER, MAIN, FOOTER)
   ========================================================================== */
header {
	background-color: var(--clr-8);
	border-bottom: 1px solid var(--clr-1);
	color: var(--clr-1);
	padding: 1.5rem; 
}

main {
	min-height: 5rem;
	color: var(--clr-1);
	font-family: font-1;
	font-weight: 700;
	font-size: 1rem;
}

footer {
	background-color: var(--clr-8);
	border-top: 1px solid var(--clr-1);
	color: var(--clr-1);
	padding: 1rem;
}

.-sheet-1 {
	min-height: 25rem;
}

.-section-1 {
	margin-top: 5rem;
	margin-bottom: 5rem;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	width: 100%;
}
.-section-2 {
	margin-top: 5rem;
	margin-bottom: 5rem;
	float: right;
	margin-right: 5rem;
}
.-section-3 {
	margin-bottom: 4rem;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	width: 100%;
}

/* Float Layout Alignment Utilities */
.-align-left, .-menu-align-left {
	float: left;
	margin-left: 5rem;
}
.-align-center {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	width: 25rem;
}
.-align-right, .-menu-align-right, .-menu-right {
	float: right;
	margin-right: 4rem;
}

/* ==========================================================================
   3. GLOBAL TEXT GRAPHICS & TYPOGRAPHY UTILITIES
   ========================================================================== */
.-font-3 { font-family: font-3 !important; }
.-text-align-center { text-align: center; }
.-text-align-left   { text-align: left; }
.-text-align-right  { text-align: right; }

.-text-clr-1 { color: var(--clr-1); } .-text-clr-2 { color: var(--clr-2); }
.-text-clr-3 { color: var(--clr-3); } .-text-clr-4 { color: var(--clr-4); }
.-text-clr-5 { color: var(--clr-5); } .-text-clr-6 { color: var(--clr-6); }
.-text-clr-7 { color: var(--clr-7); } .-text-clr-8 { color: var(--clr-8); }
.-text-clr-9 { color: var(--clr-9); }

.-text-hover-clr-1:hover { color: var(--clr-1); } .-text-hover-clr-2:hover { color: var(--clr-2); }
.-text-hover-clr-3:hover { color: var(--clr-3); } .-text-hover-clr-4:hover { color: var(--clr-4); }
.-text-hover-clr-5:hover { color: var(--clr-5); } .-text-hover-clr-6:hover { color: var(--clr-6); }
.-text-hover-clr-7:hover { color: var(--clr-7); } .-text-hover-clr-8:hover { color: var(--clr-8); }
.-text-hover-clr-9:hover { color: var(--clr-9); }

.-text-stroke-1 { -webkit-text-stroke: 2px var(--clr-1); }
.-text-stroke-8 { -webkit-text-stroke: 2px var(--clr-8); }

.-text-1 { font-family: font-1; font-size: 5rem; font-weight: 700; margin: auto auto 1rem; }
.-text-2 { font-family: font-1; font-size: 4rem; font-weight: 700; margin: 1rem auto; }
.-text-3 { font-family: font-2; font-size: 2rem; font-weight: 700; margin: auto auto 1rem; }
.-text-4 { font-family: font-2; font-size: 1.5rem; font-weight: 700; margin: auto auto 1rem; display: inline-block; text-decoration: none; }
.-text-5 { font-family: font-2; font-size: 74px; font-weight: 700; margin: auto auto ; }

.-text-351, .-text-384 { display: none; }
.-text-520 { display: inline; }

.-mg-top { margin-top: 1rem; }       .-mg-btm { margin-bottom: 1rem; }
.-mg-left { margin-left: 1rem; }     .-mg-right { margin-right: 1rem; }

/* Selection highlights */
::selection { color: var(--clr-8); background: var(--clr-2); }
::-moz-selection { color: var(--clr-8); background: var(--clr-2); }

/* Hide Scrollbars */
::-webkit-scrollbar { width: 0px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: transparent; }

/* ==========================================================================
   4. NAVIGATION MENU MODULE
   ========================================================================== */
.-menu .-text-1 {
	font-family: font-1;
	font-size: 1.5rem;
	font-weight: 700;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 1px;
	cursor: pointer;
}
.-menu .-text-2, footer .-text-2 {
	font-family: font-1;
	font-size: 1.2rem;
	font-weight: 700;
	text-decoration: none;
	margin-left: 1rem;
	letter-spacing: 2px;
}
.-menu .-text-2 { cursor: pointer; }

.-nav #-menu-small-items { display: none; }
#-menu-small-items a {
	margin-top: 1.5rem;
	margin-left: 0 !important;
	text-decoration: none;
	display: block;
}

.-menu-icon {
	cursor: pointer;
	width: 25px;
	height: 25px;
	display: none;
	margin-top: -2.5px;
}
.-menu-icon-2 {
	width: 25px;
	height: 25px;
	margin-bottom: -6px;
}

.-language { float: right; margin-right: 1rem; }
.-language-content {
	display: none;
	position: absolute;
	margin-top: 2rem;
	margin-left: 1rem;
	width: 1.5rem;
	text-decoration: none;
	background-color: var(--clr-1);
	border-radius: 10px;
	padding: 0.5rem 0.5rem;
	text-align: center;
}

/* Global Reusable Actions Buttons */
.-btn-1 { font-size: 1.2rem; color: var(--clr-2); border: 2px solid var(--clr-1); border-radius: 10px; padding: 0.5rem 0.5rem; }
.-btn-1:hover { border-color: var(--clr-2); }

.-btn-2 { 
	font-size: 1.5rem; 
	color: var(--clr-2); 
	background-color: var(--clr-1); 
	border-radius: 10px; 
	padding: 0.5rem 0.5rem; 
	cursor: pointer; 
}
.-btn-2:hover { color: var(--clr-1); background-color: var(--clr-2); }

.-btn-3 { font-family: font-1; font-size: 1rem; font-weight: 700; color: var(--clr-2); background-color: var(--clr-1); border-radius: 10px; border: none; padding: 1rem 1.5rem; text-decoration: none; display: inline-block; }
.-btn-3:hover { color: var(--clr-1); background-color: var(--clr-2); cursor: pointer; }

.-btn-4 { 
	color: var(--clr-3); 
	background-color: transparent; 
	font-size: 1.5rem; 
	border-radius: 10px; 
	cursor: pointer;
}
.-btn-4:hover { color: var(--clr-1); }

.-btn-5 { font-family: font-1; font-size: 1.2rem; font-weight: 700; color: var(--clr-2); background-color: var(--clr-1); border-radius: 10px; border: none; padding: 0.75rem 1rem; display: inline-block; }
.-btn-5:hover { color: var(--clr-1); background-color: var(--clr-2); cursor: pointer; }

#btt {
	position: fixed;
	bottom: 30px;
	right: 30px;
	padding: 1rem 1.5rem;
	z-index: 99;
	cursor: pointer;
	background-color: var(--clr-1);
	fill: var(--clr-2);
	border-radius: 10px;
	border: none;
	opacity: 0;
}
#btt:hover { background-color: var(--clr-2); fill: var(--clr-1); }

.-hover-pointer { cursor: pointer; }
.-hover-text { cursor: text; }
.-display-block { display: block !important; }
.xxx { display: none; }

/* Image and Table structural layout maps */
.-image-1 { border-radius: 25px; border: 4px solid var(--clr-1); width: 256px; height: 256px; pointer-events: none; margin-bottom: 1rem; }
.-icon-1 { width: 25px; height: 25px; display: inline-block; }
.-icon-2 { width: 1rem; height: 1rem; display: inline-block; }
.-icon-3 { width: 20px; height: 20px; display: inline-block; stroke:var(--clr-3); }

.-table-1, .-table-2 { width: 100%; margin-left: auto; margin-right: auto; }
.-table-1 td { width: 50%; }
.-table-1 .-td-1, .-table-2 .-td-1 { padding-bottom: 5rem; }
.-table-2 td { width: 33.33333333333%; }

.tooltip { position: relative; cursor: pointer; }
.tooltip .tooltiptext {
	opacity: 0; width: 150px; background-color: var(--clr-1); color: var(--clr-2); text-align: center; border-radius: 5px; padding: 0.5rem 0; position: absolute; z-index: 1; bottom: 150%; left: 50%; margin-left: -75px; cursor: default; transition: opacity .3s ease-in-out;
}
.tooltip .tooltiptext::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: var(--clr-1) transparent transparent transparent; }
.tooltip:hover .tooltiptext { opacity: 1; }
.tooltip .tooltiptext:hover { opacity: 0; }

/* ==========================================================================
   5. MODULE: CHINESE FLASHCARDS CONFIGURATION SELECTORS
   ========================================================================== */
.dropdown-container, 
.card-direction-setting {
	width: 100%;
	max-width: 340px; 
	box-sizing: border-box;
	margin: 0 auto;
}

.card-direction-setting {
	margin-top: 25px;
	margin-bottom: 15px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10px 14px;
	border-radius: 12px;
	border: 1px solid var(--clr-1);
}

.setting-label {
	font-size: 15px;
	font-weight: 600;
	color: var(--clr-9);
}

.toggle-container {
	display: flex;
	background: var(--clr-7);
	padding: 3px;
	border-radius: 8px;
}

.toggle-btn {
	border: none;
	background: transparent;
	padding: 8px 14px;
	font-size: 14px;
	font-weight: 700;
	color: var(--clr-1);
	cursor: pointer;
	border-radius: 6px;
	transition: all 0.2s ease;
	margin: 0;
}
.toggle-btn.active {
	background: white;
	color: var(--clr-2);
	box-shadow: 0 2px 5px rgba(0,0,0,0.06);
}

/* Expansion Card Interfaces */
.dropdown-container {
	position: relative;
	background: var(--clr-8); 
	border: 1px solid transparent; 
	box-shadow: none;
	overflow: hidden; 
	transition: all 0.2s ease;
}
.dropdown-container.is-open {
	background: var(--clr-8);
	border: 1px solid var(--clr-1);
	border-radius: 12px;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.dropdown-header {
	background: transparent;
	border: 1px solid var(--clr-1);
	border-radius: 12px;
	padding: 12px 18px;
	cursor: pointer;
	font-weight: 600;
	transition: all 0.2s ease;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	white-space: nowrap;
	gap: 10px;
	width: 100%;
	box-sizing: border-box;
}
.dropdown-container.is-open .dropdown-header {
	border: none;
	border-bottom: 1px solid var(--clr-1);
	border-radius: 0;
}

.dropdown-arrow {
	color: var(--clr-9);
	transition: transform 0.3s;
	width: 1rem;
	height: 1rem;
	display: inline-block;
}
.dropdown-container.is-open .dropdown-arrow {
	transform: rotate(180deg);
}

.dropdown-content {
	display: none; 
	position: relative;
	top: 0; left: 0; right: 0;
	background: transparent;
	border: none;
	border-radius: 0;
	padding: 15px;
	box-shadow: none;
	z-index: 100;
	margin-top: 0;
}
.dropdown-container.is-open .dropdown-content {
	display: block; 
}

.menu-actions-row {
	display: flex;
	gap: 10px;
	justify-content: center;
	align-items: center;
	margin-bottom: 15px;
	width: 100%;
}

.menu-actions-row button {
	flex: 1 1 0%;
	max-width: 150px;
}

/* ==========================================================================
   MODULE: MULTI-COLUMN SHEET GRID LAYOUT SECTION (CENTERED)
   ========================================================================== */
.week-checkboxes {
	display: flex;
	flex-direction: column;
	gap: 0; 
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	user-select: none;
	align-items: center;
}

/* Individual container block per spreadsheet section */
.sheet-section-block {
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 280px;
	box-sizing: border-box;
	margin: 0 auto;
}

/* Document prefix section heading label */
.sheet-section-title {
	font-family: font-1;
	font-size: 1.1rem;
	font-weight: bold;
	color: var(--clr-9);
	margin-bottom: 0.75rem;
	text-align: center; /* Centers your sheet category headers if they appear */
}

/* Splits items into two clean parallel blocks side-by-side */
.sheet-columns-wrapper {
	display: flex;
	flex-direction: row;
	gap: 2.5rem; /* Space between the left and right columns */
	width: 100%;
	justify-content: center; /* Centers columns relative to each other */
}

/* Individual vertical columns holding up to 13 stacked labels */
.sheet-column {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	flex: 1; 
	align-items: center; /* Centers the content inside the column itself */
}

/* Layout item formatting updates */
.week-item {
	display: flex;
	align-items: center;
	justify-content: center; /* Centers text and hidden input alignment box perfectly */
	text-align: center; 
	cursor: pointer;
	user-select: none;
	width: 100%;
	white-space: nowrap;
}
.week-item:hover { color: #acd8bb; }
.week-item:has(input:checked) { color: var(--clr-6); }
.week-item input[type="checkbox"] { display: none; }

/* --- UPDATED: Tighter margins to match the top button layout height --- */
.sheet-section-divider {
	border: none;
	border-top: 1px solid var(--clr-1);
	margin: 1rem 0; /* Matches the vertical padding structure below your button line */
	width: 100%;
	max-width: 340px;
}

.-fc-loading { text-align: center; width: 100%; }
.-fc-loading-text { display: none; margin-top: 1rem; }
.-fc-select { display: grid; grid-template-columns: repeat(2, 1fr); width: 100%; user-select: none; max-width: 400px; margin: 1rem auto 0 auto; }

/* Setup View Primary Trigger */
.-btn-6 {
	border: none;
	padding: 14px 16px;
	border-radius: 12px;
	font-size: 16px;
	font-weight: 700;
	cursor: pointer;
	transition: all 0.2s ease;
	width: 100%;
	max-width: 154px; 
	margin: 0 auto;
	display: block;
	background: var(--clr-2);
	color: white;
	box-shadow: 0 4px 12px rgba(49, 130, 206, 0.25);
}

/* ==========================================================================
   6. MODULE: ACTIVE FLASHCARD CORE SESSION VIEWPORT
   ========================================================================== */
.flashcard-area {
	width: 100%;
	max-width: 450px;
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 0 auto;
}

.counter, 
#results-title {
	font-size: 14px !important;
	font-weight: 600;
	text-transform: uppercase !important;
	letter-spacing: 0.5px !important;
	line-height: 1.5 !important;
	margin: 0 auto 20px auto !important; /* Locks exact vertical spacing down below the text */
	text-align: center !important;
	display: block !important;
	color: var(--clr-9);
}

.card-scene {
	width: 100%;
	height: 300px;
	perspective: 1000px;
	margin-bottom: 25px;
	cursor: pointer;
}

.card {
	width: 100%;
	height: 100%;
	position: relative;
	transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
	transform-style: preserve-3d;
}
.card.is-flipped {
	transform: rotateY(180deg);
}

.card-face {
	position: absolute;
	width: 100%;
	height: 100%;
	backface-visibility: hidden;
	border-radius: 16px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 24px;
	box-sizing: border-box;
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05), 0 4px 10px rgba(0, 0, 0, 0.03);
}

/* COMBINED OPTIMIZATION: Synced core structures together */
.card-front, 
.card-back {
	background: #ffffff;
	border: 2px solid var(--clr-1);
}
.card-back {
	transform: rotateY(180deg);
	text-align: center;
}
.card-back.hide-content * {
  opacity: 0 !important;
  transition: none !important;
}

.char { font-size: 84px; font-weight: bold; margin: 0; color: var(--clr-1); }
.pinyin { font-size: 2rem; color: var(--clr-9); margin: 0 0 10px 0; font-weight: 600; letter-spacing: 0.5px; font-family: 'Montserrat', sans-serif; }
.definition { font-size: 1.2rem; color: var(--clr-9); margin: 0; font-weight: 500; line-height: 1.4; }

.char.long-text {
	font-size: 48px !important; /* Forces the font to shrink on both desktop and mobile screens */
}

.pinyin.long-text {
	font-size: 1.4rem !important; /* Prevents long pinyin from clipping out of the card wrapper on mobile */
}

.definition.long-text {
	font-size: 0.95rem !important; 
}

.controls {
	display: flex;
	gap: 12px;
	width: 100%;
}
.controls button {
	border: none;
	padding: 14px 16px;
	border-radius: 12px;
	font-size: 16px;
	font-weight: 700;
	cursor: pointer;
	transition: all 0.2s ease;
}

.-fc-btn-back, .-fc-btn-quit, .-fc-btn-wrong, .-fc-btn-right, .-fc-btn-review {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 1;
	margin: 0;
	min-width: 45px;
	width: 55px;
	padding: 14px 16px;
	justify-content: center;
	font-weight: bold;
	height: 44px;
}

.-fc-btn-back {
	color: var(--clr-1);
}
.-fc-btn-quit {
	background: var(--clr-5);
	color: var(--clr-1);
}

.-fc-btn-wrong {
	background-color: var(--clr-3);
	color: white;
}

.-fc-btn-right {
	background-color: var(--clr-6);
	color: white;
}

.-fc-btn-review {
	background-color: var(--clr-6);
	color: white;
}


.-fc-btn-back:hover, .-fc-btn-quit:hover, .-fc-btn-right:hover, .-fc-btn-wrong:hover, .-btn-6:hover, .-fc-btn-review:hover {
	transform: translateY(-1px);
}
.-fc-btn-icon {
	width: 1rem;
	height: 1rem;
	margin-bottom: 0;
}

.tone-1 { color: var(--clr-3) !important; }
.tone-2 { color: var(--clr-6) !important; }
.tone-3 { color: var(--clr-2) !important; }
.tone-4 { color: var(--clr-4) !important; }
.tone-5 { color: var(--clr-9) !important; }

/* ==========================================================================
   NESTED SPREADSHEET ACCORDION LAYOUTS
   ========================================================================== */
.document-accordion {
	background: var(--clr-8);
	border: 1px solid var(--clr-1);
	border-radius: 8px;
	margin-bottom: 0.75rem;
	overflow: hidden;
	transition: box-shadow 0.2s ease;
	width: 100%;
	box-sizing: border-box;
}
.document-accordion[open] {
	box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.document-accordion.has-selections {
	border-color: var(--clr-6); /* Turn accordion outline green if tabs are selected inside */
}

/* Clickable summary list header header container button */
.document-accordion-summary {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10px 14px;
	font-family: font-1;
	font-weight: bold;
	font-size: 0.95rem;
	cursor: pointer;
	user-select: none;
	background: var(--clr-8);
	color: var(--clr-1);
}
.document-accordion-summary::-webkit-details-marker {
	display: none; /* Hide standard ugly native browser arrows */
}

.accordion-title-text {
	position: relative;
	padding-left: 18px;
}
/* Custom custom layout triangle toggle indicator element */
.accordion-title-text::before {
	content: '▶';
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	font-size: 10px;
	color: var(--clr-9);
	transition: transform 0.2s ease;
}
.document-accordion[open] .accordion-title-text::before {
	transform: translateY(-50%) rotate(90deg); /* Spins arrow down smoothly when expanded */
}

.accordion-status-badge {
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--clr-9);
	background: rgba(0, 0, 0, 0.03);
	padding: 2px 8px;
	border-radius: 20px;
	transition: all 0.2s ease;
}

/* Dropdown layout spacing area details content padding */
.accordion-inner-content {
	padding: 15px;
	display: flex;
	flex-direction: column;
	align-items: center;
	border-top: 1px solid var(--clr-8);
}

/*
   ===========================================================================
   MODULE: RESULTS DASHBOARD & POST-FLASHCARD SESSION INTERFACE
   ==========================================================================
*/
.results-area {
	display: none;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	width: 100%;
	max-width: 450px;
	margin: 0 auto;
	box-sizing: border-box;
}

.results-card-content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	height: 100%;
	padding: 20px;
	box-sizing: border-box;
}

.-fc-controls-row,
.results-controls-row {
	display: flex !important;
	gap: 8px !important;
	justify-content: center !important;
	align-items: center !important;
	width: 100% !important;
	max-width: 450px !important;
	margin: 20px auto 0 auto !important; /* Locks identical top distance from the card */
	padding: 0 10px !important;
	box-sizing: border-box !important;
}

.results-controls-row button {
	flex: 1 1 0%;           /* Distributes space perfectly equally */
	min-width: 0;           /* Prevents text from pushing width bounds */
	white-space: nowrap;    /* Keeps words on a single sharp line */
	text-align: center;
}

#study-time-duration {
	display: inline-block;
}

.score-chart-container {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 225px;
	height: 225px;
	aspect-ratio: 1 / 1 !important; /* FORCES a perfect geometric square */
	flex-shrink: 0 !important;      /* Prevents layout engines from squishing or stretching it */
	border-radius: 50%;
	background: radial-gradient(#ffffff 61%, transparent 63%), conic-gradient(var(--clr-6) 0%, var(--clr-5) 0%);
	margin: 0 auto 20px auto;
	box-sizing: border-box;
}
/* ==========================================================================
   7. MODULE: ADMIN PANEL
   ========================================================================== */

.status-indicator {
	display: none;
	font-size: 14px;
	color: var(--clr-9);
	font-weight: 600;
	margin-bottom: 15px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

/* ==========================================================================
   MODULE: CSS SPINNER LOADING ANIMATION
   ========================================================================== */

.spinner {
	display: inline-block;
	width: 24px;
	height: 24px;
	border: 3px solid rgba(0, 0, 0, 0.1);
	border-radius: 50%;
	border-top-color: var(--clr-2); /* Uses your primary accent theme color */
	animation: spin 1s ease-in-out infinite;
	margin: 15px auto 0 auto;
}

@keyframes spin {
	to { transform: rotate(360deg); }
}

/* Adjust layout alignment for indicators */
.status-indicator {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
}
   
/* ==========================================================================
   8. MODULE: CALCULATION ENGINE & SYSTEM REGISTRATION ACCESS INTERFACE
   ========================================================================== */
.-calculator {
	padding: 10px;
	height: 23rem;
	width: 20rem;
	border: 2px solid var(--clr-1);
	border-radius: 10px;
	box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
	margin-left: auto;
	margin-right: auto;
}
.-calc-display-box {
	font-family: font-1;
	border: 2px solid var(--clr-1);
	border-radius: 10px;
	color: var(--clr-3);
	width: 90%;
	height: 100%;
	font-weight: 700;
	letter-spacing: 1px;
}
.-calc-button {
	font-family: font-1;
	font-weight: 700;
	font-size: 1rem;	
	border: 1px solid var(--clr-1);
	border-radius: 10px;
	padding: .75rem 1rem;
	width: 75%;
	height: 70%;
}
.-calc-button:active, .-calc-button:hover {
	color: var(--clr-1);
	box-shadow: rgba(0, 0, 0, 0.19) 0px 5px 10px, rgba(0, 0, 0, 0.23) 0px 3px 3px;
}
.-calc-icon { width: 25px; height: 25px; display: inline-block; color: var(--clr-1); }
.-calc-icon:hover, .-calc-icon-2:hover { color: var(--clr-3); stroke: var(--clr-3); cursor: pointer; }
.-calc-icon-2 { width: 22px; height: 22px; display: inline-block; color: var(--clr-1); }

#access-form {
	display: flex;
	flex-direction: column;
	width: 300px;
	align-items: center;
	margin-left: auto;
	margin-right: auto;
}

.-input-email {
	font-family: font-1;
	font-size: 1rem;
	font-weight: 700;
	color: var(--clr-1);
	background-color: transparent;
	border: 2px solid var(--clr-1);
	border-radius: 10px;
	padding: 0.5rem 1rem;
	width: 100%;
	margin-bottom: 1rem;
}
.-input-email:focus {
	outline: none;
	border-color: var(--clr-2);
}

/* ==========================================================================
   8. RESPONSIVE LAYOUT BREAKPOINTS (CONSOLIDATED AT CASCADING END BOUNDS)
   ========================================================================== */
@media (max-width: 1119px) {
	.-text-1 { font-size: 4.5rem; }
	.-text-2 { font-size: 3.6rem; }
	.-text-3 { font-size: 1.8rem; }
	.-text-4, .-btn-3, .-btn-4 { font-size: 1.3rem; }
	.-image-1 { width: 235.4px; height: 235.4px; }
	.-icon-1 { width: 22.7px; height: 22.7px; }
}

@media (max-width: 991px) {
	.-text-1 { font-size: 4rem; }
	.-text-2 { font-size: 3.2rem; }
	.-text-3 { font-size: 1.6rem; }
	.-text-4, .-btn-3, .-btn-4 { font-size: 1.2rem; }
	.-image-1 { width: 214px; height: 214px; }
	.-icon-1 { width: 20.6px; height: 20.6px; }
	.-menu .-text-1, .-menu .-text-2, footer .-text-2 { font-size: 1.25rem; }
	.-align-center { width: 22.5rem; }
	.-menu-icon-2 { width: 20px; height: 20px; margin-bottom: -3px; }
}

@media (max-width: 930px) {
	.-section-1 { margin-left: auto; margin-right: auto; margin-top: 5rem; margin-bottom: 2.5rem; text-align: center; float: none; }
	.-section-2 { margin-left: auto; margin-right: auto; margin-top: 2.5rem; margin-bottom: 5rem; text-align: center; float: none; }
}

@media (max-width: 897px) {
	.-text-1 { font-size: 3.6rem; }
	.-text-2 { font-size: 2.9rem; }
	.-text-3 { font-size: 1.4rem; }
	.-text-4, .-btn-3, .-btn-4 { font-size: 1rem; }
	.-image-1 { width: 194.5px; height: 194.5px; }
	.-icon-1 { width: 18.7px; height: 18.7px; }
	.-menu .-text-1, .-menu .-text-2, footer .-text-2 { font-size: 1rem; }
	.-align-center { width: 20rem; }
	.-menu-icon-2 { width: 18px; height: 18px; margin-bottom: -4px; }
}

@media (max-width: 814px) {
	.-text-1 { font-size: 3.2rem; }
	.-text-2 { font-size: 2.6rem; }
	.-text-3 { font-size: 1.2rem; }
	.-btn-3, .-btn-4 { font-size: 0.9rem; }
	.-image-1 { width: 176.8px; height: 176.8px; }
	.-icon-1 { width: 17px; height: 17px; }
	.-menu-icon { display: unset; }
	.-menu-right { display: none; }		
}

@media (max-width: 575px) {
	.xxx { display: inline; }
	.tooltip .tooltiptext { bottom: 125%; }
}

@media (max-width: 520px) { /* Mobile Adjustments */
	.-menu-align-left { margin-left: 1rem; }
	.-menu-align-right { margin-right: 1rem; }
	.-text-384 { display: inline; }
	.-text-520 { display: none; }
	
	.card-direction-setting {
		flex-direction: column; 
		align-items: center;
		gap: 12px; 
		text-align: center;
	}

	.flashcard-area, .results-area {
		max-width: 310px; 
		width: 90%;        
	}
	.card-scene {
		height: 220px; 
		margin-bottom: 15px;
	}
	.char, .-text-5 { font-size: 44px !important; }
	.definition { font-size: 1.2rem !important; }
	.pinyin { font-size: 22px !important; }

	.char.long-text { font-size: 40px !important; }
	.pinyin.long-text { font-size: 1.1rem !important; }
	.definition.long-text { font-size: 0.85rem !important; }
	
	.menu-actions-row {
		display: flex !important;
		flex-direction: row !important;
		gap: 10px !important;
	}
	
	.menu-actions-row button {
		flex: 1 1 0%;
		max-width: 150px;
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		padding: 0 !important; /* Clears any destructive padding inheritance */
		height: 38px !important;
	}

	.controls { 
		display: flex !important;
		flex-direction: column !important;
		flex-wrap: nowrap !important;
		gap: 8px !important; 
		width: 100% !important;
		box-sizing: border-box !important;
	}

	.controls button {
		padding: 10px 12px; 
		font-size: 14px;     
		border-radius: 10px;
		flex: 1 1 auto !important;
		min-width: 0 !important;
		height: 42px !important;
		white-space: nowrap !important;
	}

	.controls.-fc-controls-row {
		flex-direction: column !important;
		width: 100% !important;
		padding: 0 20px !important;
		gap: 10px !important;
	}

	.controls.results-controls-row {
		flex-direction: column !important;
		width: 100% !important;
		padding: 0 20px !important;
		gap: 10px !important;
	}

	.-fc-controls-row button,
	.results-controls-row button {
		width: 100% !important;
		max-width: 100% !important;
		flex: none !important; /* Disables equal proportional stretching */
		height: 46px !important; /* Slightly taller for easy mobile tapping */
	}

	.score-chart-container {
		width: 150px !important;
		height: 150px !important;
	}
}

@media (max-width: 420px) {
	.-table-2 td { width: 50%; }
}

@media (max-width: 351px) {
	header, main, footer { display: none; }
	.-text-351 {
		display: inline;
		margin-left: auto;
		margin-right: auto;
		font-family: font-2;
		font-size: 4rem;
		font-weight: 700;
		text-align: center;
	}
}

@media (max-width: 220px) {
	.-text-351 { font-size: 2rem; }
}