:root {--itzone-base: #ff7a00;--itzone-base-light: #ff9d00;--twg-purple: #6f6bff;--twg-purple-light: #8e8bff;--twg-cyan: #00d4ff;--twg-green: #18e2b6;--twg-dark: #071120;--twg-card: #0d1729;--twg-card-2: #111d34;--twg-border: rgba(255, 255, 255, .08);--twg-text: #ffffff;--twg-muted: #9ca3af;}/* ==========================WRAPPER========================== */.twg-dashboard-wrap {position: relative;width: 100%;display: flex;justify-content: center;align-items: center;}.twg-dashboard {width: 100%;max-width: 744px;max-height:116vh;background: linear-gradient(180deg,#0b1527,#071120);border-radius: 32px;padding: 24px;position: relative;overflow-y:auto;overflow-x:hidden;border: 1px solid rgba(255, 255, 255, .05);box-shadow:0 30px 80px rgba(0, 0, 0, .45),0 0 80px rgba(255, 122, 0, .08);}/* ==========================GLOW========================== */.dash-glow {position: absolute;border-radius: 50%;filter: blur(120px);pointer-events: none;}.glow-1 {width: 260px;height: 260px;background: var(--itzone-base);top: -100px;right: 0px;opacity: .15;}.glow-2 {width: 220px;height: 220px;background: #00d4ff;bottom: -80px;left: -80px;opacity: .10;}/* ==========================HEADER========================== */.dashboard-header {display: flex;justify-content: space-between;align-items: center;margin-bottom: 24px;}.live-tag {display: inline-flex;align-items: center;gap: 8px;background: rgba(255, 122, 0, .12);color: var(--itzone-base);padding: 8px 14px;border-radius: 50px;font-size: 12px;font-weight: 600;}.live-tag i {font-size: 8px;}.dashboard-header h3 {color: #fff;font-size: 30px;margin-top: 12px;font-weight: 700;}.header-growth {width: 60px;height: 60px;border-radius: 18px;background: rgba(255, 255, 255, .05);display: flex;flex-direction: column;justify-content: center;align-items: center;color: var(--itzone-base);border: 1px solid var(--twg-border);}.header-growth span {font-size: 13px;font-weight: 700;}/* ==========================TOP CARDS========================== */.top-cards {display: grid;grid-template-columns: repeat(3, 1fr);gap: 16px;margin-bottom: 20px;}.metric-card {position: relative;overflow: hidden;border-radius: 26px;padding: 22px;min-height: 155px;box-shadow:0 20px 50px rgba(0, 0, 0, .20);}.metric-card::before {content: "";position: absolute;width: 120px;height: 120px;background: rgba(255, 255, 255, .12);border-radius: 50%;right: -35px;top: -35px;}.revenue-card {background:linear-gradient(135deg,#6f6bff,#8d8aff);}.project-card {background:linear-gradient(135deg,#00d4ff,#18e2b6);}.project-card {background: linear-gradient(135deg,#ff7a00,#ffb347);}.clients-card {background: linear-gradient(135deg,#2563eb,#3b82f6,#60a5fa);}.metric-icon {width: 42px;height: 42px;border-radius: 12px;display: flex;justify-content: center;align-items: center;background: rgba(255, 255, 255, .15);color: white;}.metric-label {display: block;margin-top: 18px;color: white;opacity: .9;}.metric-card h2 {color: white;margin-top: 8px;font-size: 30px;font-weight: 700;}.metric-growth {margin-top: 10px;display: inline-block;padding: 6px 12px;background: rgba(255, 255, 255, .18);border-radius: 30px;color: white;font-size: 13px;}/* ==========================CHART CARD========================== */.analytics-card {background:linear-gradient(180deg,rgba(255, 255, 255, .04),rgba(255, 255, 255, .02));border-radius: 28px;padding: 22px;border: 1px solid var(--twg-border);margin-bottom: 22px;}.card-title-row {display: flex;justify-content: space-between;align-items: center;}.card-title-row h4 {color: white;font-size: 24px;}.chart-status {color: #00ff88;font-weight: 600;}.chart-container {height: 100px;position: relative;margin-top: 20px;}.chart-bars {height: 100%;display: flex;justify-content: space-between;align-items: flex-end;}.chart-bar {width: 40px;height: 60px;border-radius: 20px 20px 0 0;background:linear-gradient(180deg,#6f6bff,#18e2b6);animation: grow 3s infinite alternate;}.chart-bar.active {background:linear-gradient(180deg,var(--itzone-base),#ffd166);}.chart-bar.large {height: 120px;}.chart-bar.medium {height: 90px;}.chart-bar.xlarge {height: 150px;}.chart-line {position: absolute;width: 100%;height: 2px;top: 45%;left: 0;background:linear-gradient(90deg,transparent,rgba(255, 255, 255, .25),transparent);}/* ==========================SERVICES========================== */.service-grid {display: grid;grid-template-columns: repeat(4, 1fr);gap: 12px;margin-bottom: 20px;}.service-card {background:rgba(255, 255, 255, .03);border: 1px solid var(--twg-border);border-radius: 22px;padding: 18px 12px;text-align: center;transition: .35s;}.service-card:hover {transform: translateY(-6px);border-color: rgba(255, 122, 0, .35);}.service-icon {font-size: 20px;color: var(--itzone-base);margin-bottom: 12px;}.service-card h5 {color: white;font-size: 14px;}.service-card p {color: var(--twg-muted);font-size: 11px;margin-top: 6px;}/* ==========================KPI========================== */.kpi-grid {display: grid;grid-template-columns: repeat(3, 1fr);gap: 12px;margin-bottom: 20px;}.kpi-card {background:rgba(255, 255, 255, .04);border: 1px solid var(--twg-border);border-radius: 20px;padding: 16px;}.kpi-card span {color: var(--twg-muted);font-size: 12px;}.kpi-card h3 {color: white;margin-top: 8px;}.kpi-card small {color: var(--itzone-base);}/* ==========================AI CARD========================== */.ai-card {position: relative;background:linear-gradient(135deg,rgba(255, 122, 0, .15),rgba(0, 212, 255, .12));border-radius: 26px;border: 1px solid rgba(255, 255, 255, .08);padding: 20px;display: flex;justify-content: space-between;align-items: center;overflow: hidden;margin-bottom: 20px;}.ai-glow {position: absolute;width: 180px;height: 180px;background: var(--itzone-base);border-radius: 50%;filter: blur(90px);right: -50px;top: -50px;opacity: .25;}.ai-left {display: flex;align-items: center;gap: 15px;z-index: 2;}.ai-icon {width: 56px;height: 56px;border-radius: 18px;background:linear-gradient(135deg,var(--itzone-base),#ffb347);display: flex;justify-content: center;align-items: center;color: white;font-size: 20px;}.ai-left h4 {color: white;}.ai-left p {color: #c7c7c7;margin-top: 5px;}.chat-btn {z-index: 2;padding: 12px 22px;border-radius: 40px;background: white;color: #071120;text-decoration: none;font-weight: 700;}/* ==========================ACTIVITY========================== */.activity-card {background:rgba(255, 255, 255, .03);border: 1px solid var(--twg-border);border-radius: 24px;padding: 20px;}.activity-card h4 {color: white;margin-bottom: 15px;}.activity-item {display: flex;align-items: center;gap: 12px;color: #d8d8d8;padding: 12px 0;}.activity-item span {width: 10px;height: 10px;border-radius: 50%;background: var(--itzone-base);box-shadow:0 0 12px var(--itzone-base);}.twg-dashboard::-webkit-scrollbar{top:10px;width:6px;overflow-y:hidden;}.twg-dashboard::-webkit-scrollbar-track{background:rgba(255,255,255,.05);border-radius:20px;}.twg-dashboard::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#ff7a00,#ffb347);border-radius:20px;}.twg-dashboard::-webkit-scrollbar-thumb:hover{background:#ff7a00;}/* ==========================ANIMATION========================== */@keyframes grow {from {transform: scaleY(.85);}to {transform: scaleY(1);}}/* ==========================RESPONSIVE========================== *//* =====================================LARGE LAPTOPS (1400px)===================================== */@media (max-width:1400px) {.twg-dashboard {max-width: 720px;right: -25px;}}/* =====================================LAPTOPS (1200px)===================================== */@media (max-width:1200px) {.twg-dashboard {max-width: 600px;padding: 22px;}.metric-card h2 {font-size: 26px;}}/* =====================================TABLETS (992px)===================================== */@media (max-width:992px) {.twg-dashboard {max-width: 100%;}.top-cards {grid-template-columns: repeat(3, 1fr);}.service-grid {grid-template-columns: repeat(2, 1fr);}}/* =====================================SMALL TABLETS (768px)===================================== */@media (max-width:768px) {.twg-dashboard {padding: 20px;border-radius: 26px;}.dashboard-header h3 {font-size: 24px;}.top-cards {grid-template-columns: repeat(3, 1fr);}.metric-card {min-height: auto;}.kpi-grid {display: grid;grid-template-columns: repeat(3, 1fr);gap: 16px;/* grid-template-columns: 1fr 1fr 1fr; */}.service-grid {grid-template-columns: repeat(2, 1fr);}.chart-bar {width: 28px;}}/* =====================================MOBILE (576px)===================================== */@media (max-width:576px) {.twg-dashboard {padding: 18px;border-radius: 22px;}.dashboard-header {flex-direction: row;align-items: flex-start;gap: 15px;}.dashboard-header h3 {font-size: 22px;}.header-growth {width: 55px;height: 55px;}.top-cards {grid-template-columns: 1fr;}.service-grid {grid-template-columns: 1fr 1fr;gap: 10px;}.service-card {padding: 15px 10px;}.analytics-card {padding: 18px;}.card-title-row h4 {font-size: 18px;}.chart-container {overflow: hidden;height: 160px;}.chart-bar {width: 22px;}.ai-card {flex-direction: column;align-items: flex-start;gap: 18px;}.chat-btn {text-align: center;}}/* =====================================SMALL MOBILE (480px)===================================== */@media (max-width:480px) {.twg-dashboard {padding: 16px;}.service-grid {grid-template-columns: 1fr 1fr;}.metric-card {padding: 18px;}.metric-card h2 {font-size: 24px;}.metric-label {font-size: 13px;}.kpi-card {text-align: center;}.chart-bar {width: 18px;}.activity-item {font-size: 13px;}}/* =====================================EXTRA SMALL DEVICES (360px)===================================== */@media (max-width:360px) {.twg-dashboard {padding: 14px;border-radius: 18px;}.dashboard-header h3 {font-size: 20px;}.live-tag {font-size: 10px;padding: 6px 10px;}.metric-card h2 {font-size: 20px;}.service-card h5 {font-size: 12px;}.service-card p {font-size: 10px;}.ai-left {flex-direction: column;text-align: center;width: 100%;}}/* =====================================EXTRA SMALL MOBILE (320px)===================================== */@media (max-width: 320px) {.twg-dashboard {right: 0px;}}