/* ============================================================
   01. TOKENS
   ============================================================ */
:root{
  /* Theme colors (dark-neutral) */
	--color-bg:										#020617;          	        /* outer background */
	--color-bg-debug:								#d2d2d24d;					/* background raw debug */
	--color-bg-elevated:						    #020617; 					/* alternative outer */
    --color-bg-transparent:					        #ffffff06;					/* background trong suốt giống nền card */
	--color-text:									#e5e7eb;        		    /* main text */
	--color-muted:									#888d96;      			    /* secondary text */
    --color-border:									#94a3b829;     			/* borders */
	--color-shadow-soft:						    #00000073;					/* shadow color */
	
	/* User Color */
	--color-white:									#ffffff;
	--color-white-light:						    #ffffffd9;
    --color-red:									#ff0000e6;
	--color-red-dark:								#c80000e6;
    --color-green:									#00ff00e6;
	--color-green-light:						    #00b400e6;
	--color-green-dark:							    #009600e6;
    --color-blue:									#0000ffe6;
	--color-blue-light:							    #6969ffe6;
	--color-blue-dark:							    #0000b4e6;
	--color-yelow:								    #ffff00e6;
	--color-yellow-neon:						    #f5ff00e6;
	--color-yelow-dark:						        #d2d200e6;
	--color-orange:								    #ff9100e6;
	--color-orange-dark:						    #ff7200e6;
	--color-amber:								    #d97706e6;
	--color-grey:								    #9ca3afe6;
	--color-grey-dark:							    #828c9ce6;
	--color-accent:								    #32aadce6;
	
	/* Alert Color */
	--color-alert-error:						    #fecaca80;
	--color-alert-error-border:			            #f8717199;
	--color-alert-success:				            #bbf7d080;
	--color-alert-success-border:		            #4ade8099;
	
	/* Card color */
	--color-card-background:				        #ffffff06;
	--color-card-highlight:				            #273137e6;
	--color-card-border:						    #94a3b829;
	
	/* Menu color */
	--color-menu:									#32aadcd9;					/* menu */ 
	--color-menu-hover:							    #ff8800f2;					/* menu hover */ 
	
	/* Button color */
	--btn-color-border:							    #38bdf880;
	--btn-color-danger-background:	                #7f1d1de6;
	--btn-color-danger-border:			            #7f1d1de6;
	--btn-color-danger-hover:				        #b91c1ce6;
	--btn-color-toggle-on:					        #52d62ce6;
	--btn-color-toggle-off:					        #f2342ae6;
	
	/* Modal color */
	--color-modal-overlay: 					        #020617d1;
	--color-modal-background: 			            var(--color-bg);
	
	/* Font & scale */
    --font: system-ui, Arial, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", 
          "Noto Sans", "Liberation Sans", "Apple Color Emoji", "Segoe UI Emoji",
          "Segoe UI Symbol", "Noto Color Emoji", sans-serif;
	--size-08:                  8px;
	--size-09:                  9px;
	--size-10:                  10px;
	--size-11:                  11px;
	--size-12:                  12px; 
	--size-13:                  13px; 
	--size-14:                  14px; 
	--size-15:                  15px; 
	--size-16:                  16px;
	--size-17:                  17px;
	--size-18:                  18px; 
	--size-19:                  19px;
	--size-20:                  20px; 
	--size-21:                  21px; 
	--size-22:                  22px; 
	--size-24:                  24px;
	--size-26:                  26px;
	--size-28:                  28px;
	--size-30:                  30px;
	--size-32:                  32px;
	
	--size-title-site:		    var(--size-22);
	--size-title-section:	    var(--size-20);
	--size-title-card:		    var(--size-16);
	--size-values-lg:			var(--size-30);
	
	/* Font style */
	--font-size:				var(--size-13);
	--font-weight2:			    200;
	--font-weight3:			    300;
	--font-weight4:			    400;
	--font-weight5:			    500;
	--font-weight6:			    600;
	--font-weight7:			    700;
	--font-weight8:			    800;

	/* Line style */
	--line-height-05:		    0.5;
	--line-height-10:		    1.0;
	--line-height-12:		    1.2;
	--line-height-15:		    1.5;
	--line-height-20:		    2.0;
	--line-color-solid:		    var(--border-width) solid #94a3b838;

	/* Spacing & shape */
	--space-00:                 0px;
	--space-05:                 3px; 
	--space-10:                 6px;
	--space-15:                 9px;
	--space-20:                 12px;
	--space-25:                 15px;
	--space-30:                 18px;
	--space-35:                 21px;
	--space-40:                 24px;
	--space-45:                 27px;
	--space-50:                 30px;
	--space-55:                 33px;
	--space-top-bottom:         6px;
	--space-left-right:         3px;
	--space-separation:         var(--space-15);
 
	--border-radius:            5px; 
	--border-width:             1px;
    --shadow-soft:              0 10px 30px var(--color-shadow-soft);
	
	/* Controls standard height and width */
	--std-height:				30px;
	--std-min-height:			30px;
	--std-width:				60px;
	--std-min-width:			60px;
}

/* ============================================================
   02. LAYOUT & BASE STYLES
   ============================================================ */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font);
    font-size: var(--font-size);
    background-color: var(--color-bg);
    color: var(--color-text);
    line-height: var(--line-height-15);
    overflow: hidden;
}

.app-container {
    display: flex;
    height: 100vh;
    width: 100vw;
}

/* Sidebar */
.sidebar {
    width: 260px;
    background-color: var(--color-bg-elevated);
    border-right: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    padding: var(--space-20);
    z-index: 100;
}

.sidebar-logo {
    display: flex;
    align-items: center;
    gap: var(--space-10);
    font-size: var(--size-title-site);
    font-weight: var(--font-weight7);
    color: var(--color-accent);
    margin-bottom: var(--space-40);
}

.nav-section {
    font-size: var(--size-10);
    font-weight: var(--font-weight7);
    color: var(--color-muted);
    letter-spacing: 1px;
    margin: var(--space-20) 0 var(--space-10) 0;
    text-transform: uppercase;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: var(--space-15);
    padding: var(--space-10) var(--space-15);
    color: var(--color-text);
    text-decoration: none;
    border-radius: var(--border-radius);
    transition: all 0.2s ease;
    margin-bottom: 2px;
}

.nav-item i {
    width: 18px;
    text-align: center;
    color: var(--color-muted);
}

.nav-item:hover {
    background-color: var(--color-bg-transparent);
    color: var(--color-menu-hover);
}

.nav-item.active {
    background-color: var(--color-bg-transparent);
    color: var(--color-menu);
    font-weight: var(--font-weight6);
}

.nav-item.active i {
    color: var(--color-menu);
}

/* Main Content */
.main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    background: radial-gradient(circle at top right, #1e293b, var(--color-bg));
}

/* Topbar */
.topbar {
    height: 64px;
    min-height: 64px;
    padding: 0 var(--space-30);
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--color-border);
    backdrop-filter: blur(10px);
    background: #02061780;
    position: sticky;
    top: 0;
    z-index: 90;
}

.search-bar {
    position: relative;
    width: 400px;
}

.search-bar i {
    position: absolute;
    left: var(--space-15);
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-muted);
}

.search-bar input {
    width: 100%;
    background: var(--color-bg-transparent);
    border: 1px solid var(--color-border);
    padding: var(--space-10) var(--space-15) var(--space-10) 40px;
    border-radius: 20px;
    color: var(--color-text);
    outline: none;
}

.user-profile {
    display: flex;
    align-items: center;
    gap: var(--space-15);
}

.user-info {
    text-align: right;
}

.user-name {
    display: block;
    font-weight: var(--font-weight6);
    font-size: var(--size-14);
}

.user-role {
    font-size: var(--size-10);
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
}

.user-role.premium {
    background: var(--color-amber);
    color: var(--color-bg);
}

.user-avatar {
    width: 36px;
    height: 36px;
    background: var(--color-accent);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--font-weight7);
}

/* Dashboard Content */
.content-wrapper {
    padding: var(--space-30);
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--space-20);
    margin-bottom: var(--space-40);
}

.stat-card {
    background: var(--color-card-background);
    border: 1px solid var(--color-card-border);
    padding: var(--space-25);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-soft);
}

.stat-label {
    color: var(--color-muted);
    font-size: var(--size-12);
    margin-bottom: var(--space-10);
    display: block;
}

.stat-value {
    font-size: var(--size-values-lg);
    font-weight: var(--font-weight7);
}

/* Card Grid */
.section-title {
    font-size: var(--size-title-section);
    margin-bottom: var(--space-20);
    display: flex;
    align-items: center;
    gap: var(--space-10);
}

.section-title small {
    font-size: var(--size-12);
    color: var(--color-muted);
    font-weight: var(--font-weight4);
}

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-25);
    margin-bottom: var(--space-50);
}

.calc-card {
    background: var(--color-card-background);
    border: 1px solid var(--color-card-border);
    padding: var(--space-25);
    border-radius: var(--border-radius);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.calc-card:hover {
    border-color: var(--color-accent);
    transform: translateY(-5px);
    background: #ffffff0a;
}

.card-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: var(--space-20);
}

.card-icon {
    font-size: var(--size-24);
    color: var(--color-accent);
}

.badge {
    font-size: var(--size-09);
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: var(--font-weight7);
}

.badge.unlocked { background: var(--color-alert-success); color: #4ade80; }
.badge.locked { background: var(--color-alert-error); color: #f87171; }

.calc-card h3 {
    font-size: var(--size-title-card);
    margin-bottom: var(--space-10);
}

.calc-card p {
    color: var(--color-muted);
    font-size: var(--size-12);
    margin-bottom: var(--space-25);
    min-height: 36px;
}

.btn-action {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: var(--space-10);
    background: var(--color-bg-transparent);
    border: 1px solid var(--btn-color-border);
    color: var(--color-text);
    text-decoration: none;
    border-radius: var(--border-radius);
    font-weight: var(--font-weight6);
    transition: 0.2s;
}

.btn-action:hover {
    background: var(--color-accent);
    color: var(--color-bg);
}

.calc-card.locked {
    opacity: 0.7;
}

.btn-action.disabled {
    cursor: not-allowed;
    border-color: var(--color-border);
    color: var(--color-muted);
}

.btn-logout {
    background: none;
    border: none;
    color: var(--color-muted);
    cursor: pointer;
    font-size: var(--size-18);
    transition: 0.2s;
}

.btn-logout:hover {
    color: var(--color-red);
}

.text-green { color: var(--color-green); }