/* ==================== CSS Variables ==================== */
:root {
  --bg-primary: #08080d;
  --bg-secondary: #0f0f18;
  --bg-card: rgba(20, 20, 35, 0.75);
  --bg-card-hover: rgba(30, 30, 50, 0.85);
  --bg-input: rgba(12, 12, 22, 0.95);
  --border: rgba(255, 255, 255, 0.05);
  --border-hover: rgba(255, 215, 0, 0.25);
  --border-glow: rgba(0, 212, 255, 0.15);
  --text-primary: #eaedf6;
  --text-secondary: #8b9dc3;
  --text-muted: #4a5a7a;
  --accent: #ffd700;
  --accent-blue: #00d4ff;
  --accent-green: #00ff88;
  --accent-red: #ff4757;
  --accent-purple: #a855f7;
  --accent-pink: #ec4899;
  --accent-orange: #ff8c00;
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.4);
  --shadow-md: 0 4px 24px rgba(0,0,0,0.5);
  --shadow-lg: 0 12px 48px rgba(0,0,0,0.6);
  --shadow-glow: 0 0 24px rgba(255,215,0,0.08);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==================== Reset & Base ==================== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC','Microsoft YaHei',sans-serif;background:var(--bg-primary);color:var(--text-primary);line-height:1.6;min-height:100vh;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:var(--accent-blue);text-decoration:none;transition:color .2s}
a:hover{color:var(--accent)}
button{font-family:inherit}
code{background:rgba(255,255,255,0.06);padding:2px 6px;border-radius:4px;font-size:12px;font-family:'SF Mono',Monaco,'Cascadia Code',monospace}

/* ==================== Login Screen ==================== */
.login-screen{display:flex;align-items:center;justify-content:center;min-height:100vh;background:radial-gradient(ellipse at 50% 0%,rgba(255,215,0,0.04) 0%,transparent 60%),radial-gradient(ellipse at 80% 80%,rgba(0,212,255,0.03) 0%,transparent 50%),var(--bg-primary)}
.login-card{text-align:center;padding:52px 44px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-xl);backdrop-filter:blur(24px);box-shadow:var(--shadow-lg);max-width:420px;width:90%}
.login-logo{margin-bottom:28px;animation:float 3s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.login-card h1{font-size:32px;font-weight:800;background:linear-gradient(135deg,var(--accent),#ffb800);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:8px}
.login-subtitle{color:var(--text-secondary);font-size:14px;margin-bottom:36px}
.github-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:14px 24px;background:linear-gradient(135deg,#238636,#2ea043);color:#fff;border:none;border-radius:var(--radius-md);font-size:16px;font-weight:600;cursor:pointer;transition:var(--transition);text-decoration:none}
.github-btn:hover{transform:translateY(-2px);box-shadow:0 8px 28px rgba(46,160,67,0.35)}
.login-hint{margin-top:24px;font-size:12px;color:var(--text-muted)}

/* ==================== App Layout ==================== */
.app{display:flex;min-height:100vh}

/* ==================== Sidebar ==================== */
.sidebar{width:240px;background:var(--bg-secondary);border-right:1px solid var(--border);display:flex;flex-direction:column;position:fixed;top:0;left:0;bottom:0;z-index:100;backdrop-filter:blur(12px)}
.sidebar-header{display:flex;align-items:center;gap:10px;padding:20px 24px;border-bottom:1px solid var(--border)}
.sidebar-brand{font-size:18px;font-weight:700;background:linear-gradient(135deg,var(--accent),#ffb800);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.sidebar-nav{flex:1;padding:16px 12px;display:flex;flex-direction:column;gap:2px;overflow-y:auto}
.nav-item{display:flex;align-items:center;gap:12px;padding:11px 16px;border-radius:var(--radius-sm);color:var(--text-secondary);font-size:14px;font-weight:500;transition:var(--transition);cursor:pointer;text-decoration:none}
.nav-item:hover{background:rgba(255,255,255,0.03);color:var(--text-primary)}
.nav-item.active{background:rgba(255,215,0,0.08);color:var(--accent);border-left:3px solid var(--accent);padding-left:13px}
.nav-icon{font-size:18px;width:24px;text-align:center}
.sidebar-footer{padding:16px;border-top:1px solid var(--border)}
.user-card{display:flex;align-items:center;gap:10px;padding:10px;border-radius:var(--radius-sm);margin-bottom:8px}
.user-avatar{width:34px;height:34px;border-radius:50%;border:2px solid var(--border)}
.user-info{display:flex;flex-direction:column;min-width:0}
.user-name{font-size:13px;font-weight:600;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.user-login{font-size:11px;color:var(--text-muted)}
.logout-btn{width:100%;padding:8px;background:transparent;border:1px solid var(--border);color:var(--text-secondary);border-radius:var(--radius-sm);font-size:13px;cursor:pointer;transition:var(--transition)}
.logout-btn:hover{border-color:var(--accent-red);color:var(--accent-red)}

/* ==================== Main Content ==================== */
.main-content{flex:1;margin-left:240px;padding:32px 40px;max-width:1500px}
.page{display:none}
.page.active{display:block;animation:fadeSlideIn .4s ease}
@keyframes fadeSlideIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.page-header{margin-bottom:32px}
.page-title{font-size:26px;font-weight:700;color:var(--text-primary)}
.page-subtitle{font-size:14px;color:var(--text-secondary)}

/* ==================== Metric Cards ==================== */
.metrics-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-bottom:24px}
.metric-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-md);padding:22px;backdrop-filter:blur(12px);transition:var(--transition);position:relative;overflow:hidden}
.metric-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;border-radius:3px 3px 0 0}
.metric-card.month::before{background:linear-gradient(90deg,var(--accent-blue),#0088ff)}
.metric-card.today::before{background:linear-gradient(90deg,var(--accent-green),var(--accent-blue))}
.metric-card.cost::before{background:var(--accent)}
.metric-card.platforms::before{background:linear-gradient(90deg,var(--accent-purple),var(--accent-pink))}
.metric-card.records::before{background:linear-gradient(90deg,var(--accent-blue),var(--accent-purple))}
.metric-card:hover{background:var(--bg-card-hover);border-color:var(--border-hover);transform:translateY(-3px);box-shadow:var(--shadow-glow)}
.metric-icon{font-size:24px;margin-bottom:10px}
.metric-label{font-size:12px;color:var(--text-secondary);margin-bottom:6px}
.metric-value{font-size:28px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-0.5px}
.metric-card.month .metric-value{color:var(--accent-blue)}
.metric-card.today .metric-value{color:var(--accent-green)}
.metric-card.cost .metric-value{color:var(--accent)}
.metric-card.platforms .metric-value{color:var(--accent-purple)}
.metric-card.records .metric-value{color:var(--accent-blue)}
.metric-unit{font-size:11px;color:var(--text-muted);margin-top:4px}

/* ==================== Dashboard Grid ==================== */
.dashboard-grid{display:grid;grid-template-columns:2fr 1fr;gap:20px;margin-bottom:24px}

/* ==================== Panels ==================== */
.panel{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:24px;backdrop-filter:blur(12px);transition:var(--transition)}
.panel:hover{border-color:rgba(255,255,255,0.07)}
.panel-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}
.panel-header h3{font-size:16px;font-weight:600;color:var(--text-primary)}
.view-all{font-size:13px;color:var(--accent-blue)}
.chart-wrap{position:relative;height:280px}

/* ==================== Platform List ==================== */
.platform-list{display:flex;flex-direction:column;gap:10px;max-height:280px;overflow-y:auto}
.platform-item{display:flex;align-items:center;gap:12px}
.platform-bar-wrap{flex:1;height:28px;background:rgba(255,255,255,0.03);border-radius:6px;overflow:hidden;position:relative}
.platform-bar-fill{height:100%;border-radius:6px;transition:width .8s cubic-bezier(.4,0,.2,1)}
.platform-bar-label{position:absolute;left:10px;top:50%;transform:translateY(-50%);font-size:12px;font-weight:500;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,0.6);white-space:nowrap}
.platform-bar-value{position:absolute;right:10px;top:50%;transform:translateY(-50%);font-size:11px;color:rgba(255,255,255,0.7)}
.platform-cost{font-size:13px;font-weight:600;color:var(--accent);min-width:50px;text-align:right}

/* ==================== Tables ==================== */
.table-wrap{overflow-x:auto}
.data-table{width:100%;border-collapse:collapse}
.data-table th{text-align:left;padding:12px 16px;font-size:12px;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:0.5px;border-bottom:1px solid var(--border)}
.data-table td{padding:12px 16px;font-size:13px;color:var(--text-primary);border-bottom:1px solid rgba(255,255,255,0.03)}
.data-table tbody tr:hover td{background:rgba(255,215,0,0.02)}
.platform-tag{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:12px;font-size:12px;font-weight:500}
.empty-state{text-align:center;padding:40px 20px;color:var(--text-muted)}
.empty-state a{color:var(--accent-blue)}

/* ==================== Price Table ==================== */
.price-table{width:100%;border-collapse:collapse}
.price-table th{text-align:left;padding:10px 14px;font-size:12px;font-weight:600;color:var(--text-secondary);border-bottom:1px solid var(--border)}
.price-table td{padding:10px 14px;font-size:13px;color:var(--text-primary);border-bottom:1px solid rgba(255,255,255,0.03)}
.price-highlight{color:var(--accent-red);font-weight:600}
.price-low{color:var(--accent-green);font-weight:600}

/* ==================== Forms ==================== */
.form-panel{margin-bottom:24px}
.entry-form{display:flex;flex-direction:column;gap:16px}
.form-row{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.form-group{display:flex;flex-direction:column;gap:6px}
.form-group label{font-size:13px;font-weight:500;color:var(--text-secondary)}
.form-input,.form-select{background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius-sm);padding:10px 14px;color:var(--text-primary);font-size:14px;outline:none;transition:var(--transition);width:100%}
.form-input:focus,.form-select:focus{border-color:var(--accent-blue);box-shadow:0 0 0 3px rgba(0,212,255,0.08)}
.form-select{cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%238b9dc3' d='M6 8L1 3h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:32px}
.form-actions{display:flex;gap:12px;justify-content:flex-end}

/* ==================== Buttons ==================== */
.btn{padding:10px 24px;border-radius:var(--radius-sm);font-size:14px;font-weight:600;cursor:pointer;transition:var(--transition);border:none}
.btn-primary{background:linear-gradient(135deg,var(--accent),#ffb800);color:#000}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 4px 16px rgba(255,215,0,0.3)}
.btn-secondary{background:rgba(255,255,255,0.05);border:1px solid var(--border);color:var(--text-secondary)}
.btn-secondary:hover{background:rgba(255,255,255,0.08);color:var(--text-primary)}
.btn-danger{background:none;border:none;color:var(--accent-red);cursor:pointer;font-size:16px;opacity:0.6;transition:var(--transition);padding:4px 8px}
.btn-danger:hover{opacity:1;transform:scale(1.1)}
.btn-success{background:linear-gradient(135deg,#00ff88,#00d4ff);color:#000;padding:10px 24px;border-radius:var(--radius-sm);font-size:14px;font-weight:600;cursor:pointer;border:none}
.btn-success:hover{transform:translateY(-1px);box-shadow:0 4px 16px rgba(0,255,136,0.3)}
.record-count{font-size:13px;color:var(--text-muted)}

/* ==================== Asset Page ==================== */
.asset-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:24px}

/* ==================== Cost Summary ==================== */
.cost-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:24px}
.cost-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-md);padding:22px;backdrop-filter:blur(12px)}
.cost-label{font-size:12px;color:var(--text-secondary);margin-bottom:8px}
.cost-value{font-size:24px;font-weight:700;color:var(--accent)}
.cost-sub{font-size:11px;color:var(--text-muted);margin-top:4px}

/* ==================== Recommend Cards ==================== */
.recommend-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.recommend-card{border-radius:var(--radius-md);padding:20px;position:relative;overflow:hidden;transition:var(--transition)}
.recommend-card:hover{transform:translateY(-2px)}
.recommend-card.cost-first{background:linear-gradient(135deg,rgba(0,255,136,0.08),rgba(0,212,255,0.04));border:1px solid rgba(0,255,136,0.25)}
.recommend-card.quality-first{background:linear-gradient(135deg,rgba(255,215,0,0.08),rgba(255,165,0,0.04));border:1px solid rgba(255,215,0,0.25)}
.recommend-card.balanced{background:linear-gradient(135deg,rgba(0,212,255,0.08),rgba(120,100,255,0.04));border:1px solid rgba(0,212,255,0.25)}
.recommend-strategy{font-size:15px;font-weight:600;margin-bottom:4px}
.recommend-card.cost-first .recommend-strategy{color:var(--accent-green)}
.recommend-card.quality-first .recommend-strategy{color:var(--accent)}
.recommend-card.balanced .recommend-strategy{color:var(--accent-blue)}
.recommend-desc{font-size:11px;color:var(--text-muted);margin-bottom:10px}
.recommend-platform{font-size:14px;color:var(--text-primary);font-weight:600;margin-bottom:4px}
.recommend-price{font-size:12px;color:var(--text-secondary);margin-bottom:10px}
.recommend-saving{font-size:22px;font-weight:700;color:var(--accent-green);margin-bottom:2px}
.recommend-saving-label{font-size:11px;color:var(--text-muted)}
.recommend-badge{position:absolute;top:10px;right:10px;font-size:10px;padding:2px 8px;border-radius:8px;font-weight:600}
.recommend-card.cost-first .recommend-badge{background:rgba(0,255,136,0.15);color:var(--accent-green)}
.recommend-card.quality-first .recommend-badge{background:rgba(255,215,0,0.15);color:var(--accent)}
.recommend-card.balanced .recommend-badge{background:rgba(0,212,255,0.15);color:var(--accent-blue)}

/* ==================== AI Chat ==================== */
#page-ai .main-content{padding:0;max-width:none;height:calc(100vh);display:flex;flex-direction:column}
.ai-chat-page{display:flex;flex-direction:column;height:100%;max-width:1400px;margin:0 auto;width:100%}
.ai-chat-header{display:flex;justify-content:space-between;align-items:center;padding:16px 24px;border-bottom:1px solid var(--border);flex-shrink:0}
.ai-chat-header-title{font-size:16px;font-weight:600;color:var(--text-primary)}
.ai-chat-header-subtitle{font-size:12px;color:var(--text-secondary);margin-top:2px}
.ai-new-chat-btn{padding:6px 14px;border-radius:var(--radius-sm);border:1px solid var(--border);background:transparent;color:var(--text-secondary);font-size:13px;cursor:pointer;transition:var(--transition)}
.ai-new-chat-btn:hover{border-color:var(--accent-blue);color:var(--accent-blue)}
.ai-chat-messages{flex:1;overflow-y:auto;padding:24px}
.ai-message-row{display:flex;gap:12px;max-width:1000px;margin:0 auto 20px}
.ai-message-row.user{flex-direction:row-reverse}
.ai-avatar{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:16px;background:rgba(255,255,255,0.05)}
.ai-avatar.assistant{background:rgba(0,212,255,0.1)}
.ai-message-bubble{max-width:75%;padding:12px 16px;border-radius:var(--radius-md);font-size:14px;line-height:1.6}
.ai-message-row:not(.user) .ai-message-bubble{background:rgba(255,255,255,0.04);border:1px solid var(--border)}
.ai-message-row.user .ai-message-bubble{background:rgba(255,215,0,0.08);border:1px solid rgba(255,215,0,0.15)}
.ai-welcome-card{background:transparent;border:none;padding:12px 0;margin-bottom:16px;max-width:1000px;margin-left:auto;margin-right:auto}
.ai-welcome-card h3{font-size:18px;color:var(--text-primary);font-weight:600;margin-bottom:6px}
.ai-welcome-card p{font-size:13px;color:var(--text-secondary);line-height:1.5}
.ai-chat-input-wrap{padding:16px 24px;border-top:1px solid var(--border);flex-shrink:0}
.ai-form{display:flex;gap:12px;max-width:1000px;margin:0 auto}
.ai-input{flex:1;padding:12px 16px;background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius-md);color:var(--text-primary);font-size:14px;outline:none;transition:var(--transition)}
.ai-input:focus{border-color:var(--accent-blue);box-shadow:0 0 0 3px rgba(0,212,255,0.08)}
.ai-send-btn{padding:12px 24px;background:linear-gradient(135deg,var(--accent),#ffb800);color:#000;border:none;border-radius:var(--radius-md);font-size:14px;font-weight:600;cursor:pointer;transition:var(--transition)}
.ai-send-btn:hover{transform:translateY(-1px);box-shadow:0 4px 16px rgba(255,215,0,0.25)}

/* ==================== Proxy Guide ==================== */
.proxy-guide{padding:12px 0;color:var(--text-secondary);font-size:13px;line-height:1.8}
.proxy-guide code{display:block;margin-top:8px;padding:10px 14px;background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius-sm)}

/* ==================== Tools Grid ==================== */
.tools-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.tool-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:28px;transition:var(--transition)}
.tool-card:hover{border-color:var(--border-hover);transform:translateY(-2px);box-shadow:var(--shadow-glow)}
.tool-icon{font-size:36px;margin-bottom:12px}
.tool-card h4{font-size:16px;font-weight:700;color:var(--text-primary);margin-bottom:6px}
.tool-card p{font-size:13px;color:var(--text-secondary);margin-bottom:12px}
.tool-card code{display:block;padding:10px 14px;background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius-sm);font-size:12px;color:var(--accent-blue);line-height:1.6}

/* ==================== Upgrade Grid ==================== */
.upgrade-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.upgrade-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:24px 18px;text-align:center;position:relative;transition:var(--transition);display:flex;flex-direction:column}
.upgrade-card:hover{transform:translateY(-4px);border-color:rgba(255,255,255,0.08)}
.upgrade-card.featured{border-color:var(--accent);box-shadow:0 0 28px rgba(255,215,0,0.1);transform:scale(1.02);z-index:2}
.upgrade-card.featured:hover{transform:scale(1.02) translateY(-4px)}
.upgrade-badge{position:absolute;top:-10px;left:50%;transform:translateX(-50%);background:linear-gradient(135deg,var(--accent),#ff8c00);color:#000;font-size:11px;font-weight:700;padding:4px 14px;border-radius:12px;white-space:nowrap}
.upgrade-name{font-size:15px;font-weight:700;color:var(--text-primary);margin-bottom:8px}
.upgrade-price{font-size:28px;font-weight:800;color:var(--text-primary);margin-bottom:4px}
.upgrade-price-unit{font-size:13px;color:var(--text-secondary);font-weight:400}
.upgrade-features{list-style:none;text-align:left;flex:1;margin:16px 0;padding:0;font-size:12px;color:var(--text-secondary);line-height:2.2}
.upgrade-features li{padding:0;margin:0}
.upgrade-btn{width:100%;padding:10px;border-radius:var(--radius-sm);font-size:13px;font-weight:600;cursor:pointer;transition:var(--transition);border:none}
.upgrade-btn.primary{background:linear-gradient(135deg,var(--accent),#ffb800);color:#000}
.upgrade-btn.primary:hover{box-shadow:0 4px 16px rgba(255,215,0,0.3)}
.upgrade-btn.secondary{background:rgba(255,255,255,0.05);border:1px solid var(--border);color:var(--text-secondary)}
.upgrade-btn.secondary:hover{background:rgba(255,255,255,0.08)}
.upgrade-btn.current{background:rgba(255,255,255,0.03);border:1px solid var(--border);color:var(--text-muted);cursor:default}

/* ==================== Admin ==================== */
.admin-status-badge{display:inline-block;padding:2px 10px;border-radius:10px;font-size:11px;font-weight:600}
.admin-status-pending{background:rgba(255,71,87,0.12);color:var(--accent-red);border:1px solid rgba(255,71,87,0.25)}
.admin-status-replied{background:rgba(0,255,136,0.12);color:var(--accent-green);border:1px solid rgba(0,255,136,0.25)}
.admin-reply-btn{background:linear-gradient(135deg,var(--accent-blue),#0088ff);color:#fff;border:none;padding:4px 14px;border-radius:6px;cursor:pointer;font-size:12px;font-weight:600}

/* ==================== Toast ==================== */
.toast{position:fixed;top:24px;right:24px;padding:14px 24px;background:var(--bg-card);border:1px solid var(--accent-blue);border-radius:var(--radius-md);color:var(--text-primary);font-size:14px;z-index:10000;backdrop-filter:blur(12px);box-shadow:var(--shadow-lg);transform:translateX(120%);transition:transform .3s cubic-bezier(.4,0,.2,1)}
.toast.show{transform:translateX(0)}
.toast.success{border-color:var(--accent-green)}
.toast.error{border-color:var(--accent-red)}

/* ==================== Feedback Float Button ==================== */
.feedback-float-btn{position:fixed;bottom:28px;right:28px;z-index:9998;width:52px;height:52px;border-radius:50%;background:linear-gradient(135deg,var(--accent-blue),var(--accent-green));border:none;cursor:pointer;box-shadow:0 4px 20px rgba(0,212,255,0.35);display:flex;align-items:center;justify-content:center;font-size:22px;transition:var(--transition)}
.feedback-float-btn:hover{transform:scale(1.1);box-shadow:0 6px 28px rgba(0,212,255,0.5)}

/* ==================== Feedback Modal ==================== */
.feedback-modal-overlay{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.6);z-index:9999;justify-content:center;align-items:center}
.feedback-modal-overlay.active{display:flex}
.feedback-modal{background:var(--bg-secondary);border-radius:var(--radius-lg);padding:28px;width:420px;max-width:90vw;border:1px solid var(--border-glow);box-shadow:var(--shadow-lg)}
.feedback-modal h3{color:var(--accent-blue);margin-bottom:18px;font-size:18px}
.feedback-type-row{display:flex;gap:10px;margin-bottom:16px}
.feedback-type-btn{flex:1;padding:8px 0;border:1px solid var(--border);border-radius:var(--radius-sm);background:transparent;color:var(--text-secondary);cursor:pointer;font-size:13px;transition:var(--transition)}
.feedback-type-btn.active{border-color:var(--accent-blue);color:var(--accent-blue);background:rgba(0,212,255,0.08)}
.feedback-type-btn:hover{border-color:var(--accent-blue)}
.feedback-textarea{width:100%;min-height:120px;background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius-md);padding:12px;color:var(--text-primary);font-size:14px;resize:vertical;margin-bottom:12px;outline:none}
.feedback-textarea:focus{border-color:var(--accent-blue)}
.feedback-input{width:100%;background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius-md);padding:10px 12px;color:var(--text-primary);font-size:13px;margin-bottom:14px;outline:none}
.feedback-input:focus{border-color:var(--accent-blue)}
.feedback-submit-row{display:flex;gap:10px}
.feedback-submit-btn{flex:1;padding:10px;border:none;border-radius:var(--radius-md);background:linear-gradient(135deg,var(--accent-blue),var(--accent-green));color:#000;font-size:14px;font-weight:600;cursor:pointer}
.feedback-submit-btn:hover{opacity:0.9}
.feedback-cancel-btn{padding:10px 20px;border:1px solid var(--border);border-radius:var(--radius-md);background:transparent;color:var(--text-secondary);cursor:pointer;font-size:14px}
.feedback-cancel-btn:hover{border-color:var(--text-secondary)}

/* ==================== Responsive ==================== */
@media(max-width:1200px){
  .metrics-grid{grid-template-columns:repeat(3,1fr)}
  .dashboard-grid{grid-template-columns:1fr}
  .upgrade-grid{grid-template-columns:repeat(2,1fr)}
  .recommend-grid{grid-template-columns:repeat(2,1fr)}
  .asset-grid,.cost-summary{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:768px){
  .sidebar{width:60px}
  .sidebar-brand,.nav-label,.user-info,.logout-btn{display:none}
  .sidebar-header{justify-content:center;padding:16px 0}
  .nav-item{justify-content:center;padding:12px}
  .user-card{justify-content:center;padding:8px}
  .main-content{margin-left:60px;padding:20px 16px}
  .metrics-grid{grid-template-columns:repeat(2,1fr)}
  .form-row{grid-template-columns:1fr}
  .upgrade-grid,.recommend-grid,.tools-grid{grid-template-columns:1fr}
  .asset-grid,.cost-summary{grid-template-columns:1fr}
}


/* ==================== Free Banner ==================== */
.free-banner{text-align:center;padding:48px 32px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-xl)}
.free-icon{font-size:56px;margin-bottom:16px;animation:float 3s ease-in-out infinite}
.free-banner h2{font-size:28px;font-weight:800;background:linear-gradient(135deg,var(--accent-green),var(--accent-blue));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:8px}
.free-banner p{color:var(--text-secondary);font-size:16px;margin-bottom:32px}
.free-features-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;max-width:600px;margin:0 auto;text-align:left}
.free-feature-item{padding:12px 16px;background:rgba(255,255,255,0.02);border:1px solid var(--border);border-radius:var(--radius-sm);font-size:14px;color:var(--text-primary)}
.free-check{color:var(--accent-green);font-weight:700;margin-right:8px}