/* account.css — User Account Portal */
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Inter', sans-serif; background: #f0f2f5; color: #1a1d23; }

/* Login */
.account-login-screen { min-height:100vh; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#032f62,#1e3a8a); }
.account-login-card { background:#fff; border-radius:16px; padding:40px 36px; width:90%; max-width:400px; text-align:center; box-shadow:0 25px 60px rgba(0,0,0,.2); }
.account-login-card h1 { font-size:24px; font-weight:800; color:#032f62; margin-bottom:8px; }
.account-login-card p { font-size:14px; color:#6b7280; margin-bottom:24px; }
.account-login-card form { display:flex; flex-direction:column; gap:12px; }
.account-login-card input { padding:14px 16px; border:1.5px solid #e5e7eb; border-radius:10px; font-size:15px; outline:none; }
.account-login-card input:focus { border-color:#032f62; }
.account-login-card button { padding:14px; background:#032f62; color:#fff; border:none; border-radius:10px; font-size:15px; font-weight:600; cursor:pointer; }
.account-login-card button:hover { background:#044a8a; }
.account-error { color:#ef4444; font-size:13px; min-height:18px; margin-top:8px; }
.account-login-card a { display:block; margin-top:12px; color:#6b7280; text-decoration:none; font-size:13px; }
.account-login-card a:hover { color:#032f62; }

/* Dashboard Layout */
.account-dashboard { display:flex; min-height:100vh; }

/* Sidebar */
.account-sidebar { width:260px; background:#032f62; color:#fff; display:flex; flex-direction:column; flex-shrink:0; position:sticky; top:0; height:100vh; }
.account-sidebar-header { padding:20px 24px; border-bottom:1px solid rgba(255,255,255,.1); }
.account-user-info { padding:16px 24px; border-bottom:1px solid rgba(255,255,255,.1); font-size:14px; }
.account-user-info strong { display:block; font-size:16px; margin-bottom:4px; }
.account-user-info span { color:rgba(255,255,255,.6); font-size:13px; }
.account-nav-btn { display:block; width:100%; padding:12px 24px; background:transparent; border:none; color:rgba(255,255,255,.7); font-size:14px; font-weight:500; cursor:pointer; text-align:left; font-family:inherit; transition:all .2s; }
.account-nav-btn:hover { background:rgba(255,255,255,.08); color:#fff; }
.account-nav-btn.active { background:rgba(255,255,255,.15); color:#fff; border-left:3px solid #60a5fa; }
.account-logout { margin-top:auto; padding:12px 24px; background:transparent; border:none; border-top:1px solid rgba(255,255,255,.1); color:rgba(255,255,255,.7); font-size:14px; cursor:pointer; font-family:inherit; }
.account-logout:hover { background:rgba(239,68,68,.2); color:#fca5a5; }

/* Main */
.account-main { flex:1; padding:32px; overflow-y:auto; }
.account-page { display:none; }
.account-page.active { display:block; }
.account-page h1 { margin-bottom:24px; font-size:28px; font-weight:800; }
.account-page h2 { margin:24px 0 16px; font-size:20px; }
.page-subtitle { color:#6b7280; font-size:14px; margin-bottom:24px; margin-top:-16px; }
.page-header-row { display:flex; justify-content:space-between; align-items:center; margin-bottom:24px; }
.page-header-row h1 { margin:0; }

/* Cards */
.account-cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:16px; }
.info-card { background:#fff; border-radius:12px; padding:20px; box-shadow:0 2px 8px rgba(0,0,0,.06); }
.info-card-label { font-size:13px; color:#6b7280; margin-bottom:8px; }
.info-card-value { font-size:22px; font-weight:700; color:#1a1d23; }

/* Plans */
.current-plan-box { background:#fff; border-radius:12px; padding:24px; box-shadow:0 2px 8px rgba(0,0,0,.06); margin-bottom:24px; }
.current-plan-name { font-size:24px; font-weight:800; color:#032f62; }
.current-plan-price { font-size:18px; color:#6b7280; margin-top:4px; }
.plans-list { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:16px; }
.plan-option { background:#fff; border-radius:12px; padding:24px; box-shadow:0 2px 8px rgba(0,0,0,.06); border:2px solid transparent; transition:border-color .2s; }
.plan-option:hover { border-color:#032f62; }
.plan-option-name { font-size:20px; font-weight:800; color:#032f62; }
.plan-option-price { font-size:28px; font-weight:800; margin:8px 0; }
.plan-option-features { font-size:13px; color:#374151; list-style:none; padding:0; }
.plan-option-features li { padding:4px 0; }
.plan-option-features li::before { content:"✓ "; color:#10b981; font-weight:700; }
.btn-primary { padding:10px 20px; background:#032f62; color:#fff; border:none; border-radius:8px; font-size:14px; font-weight:600; cursor:pointer; font-family:inherit; }
.btn-primary:hover { background:#044a8a; }
.btn-upgrade { margin-top:16px; width:100%; }

/* Features */
.features-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:16px; }
.feature-card { background:#fff; border-radius:12px; padding:20px; box-shadow:0 2px 8px rgba(0,0,0,.06); display:flex; align-items:center; gap:12px; }
.feature-icon { width:40px; height:40px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:20px; }
.feature-icon.on { background:#d1fae5; }
.feature-icon.off { background:#f3f4f6; }
.feature-name { font-weight:600; font-size:15px; }
.feature-status { font-size:12px; }
.feature-status.on { color:#059669; }
.feature-status.off { color:#9ca3af; }

/* Profile */
.profile-form { max-width:500px; display:flex; flex-direction:column; gap:16px; background:#fff; padding:24px; border-radius:12px; box-shadow:0 2px 8px rgba(0,0,0,.06); }
.profile-form label { display:flex; flex-direction:column; gap:4px; font-size:13px; font-weight:600; color:#374151; }
.profile-form input { padding:12px 14px; border:1.5px solid #e5e7eb; border-radius:8px; font-size:15px; outline:none; }
.profile-form input:focus { border-color:#032f62; }
.profile-form button { padding:14px; background:#032f62; color:#fff; border:none; border-radius:8px; font-size:15px; font-weight:600; cursor:pointer; }

/* Messages */
.messages-list { display:flex; flex-direction:column; gap:8px; }
.message-item { background:#fff; border-radius:10px; padding:16px; box-shadow:0 1px 4px rgba(0,0,0,.04); border-left:4px solid #032f62; cursor:pointer; }
.message-item.unread { border-left-color:#f59e0b; background:#fffbeb; }
.message-item-title { font-weight:700; font-size:15px; }
.message-item-body { font-size:13px; color:#6b7280; margin-top:4px; }
.message-item-time { font-size:11px; color:#9ca3af; margin-top:4px; }

/* Tickets */
.tickets-list { display:flex; flex-direction:column; gap:8px; }
.ticket-item { background:#fff; border-radius:10px; padding:16px; box-shadow:0 1px 4px rgba(0,0,0,.04); cursor:pointer; }
.ticket-item-subject { font-weight:700; font-size:15px; }
.ticket-item-meta { display:flex; gap:12px; margin-top:4px; font-size:12px; color:#6b7280; }
.status-badge { padding:2px 8px; border-radius:12px; font-size:11px; font-weight:600; }
.status-open { background:#dbeafe; color:#2563eb; }
.status-pending { background:#fef3c7; color:#d97706; }
.status-resolved { background:#d1fae5; color:#059669; }
.status-closed { background:#f3f4f6; color:#6b7280; }

/* Modals */
.modal-overlay { position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,.5); backdrop-filter:blur(4px); display:flex; align-items:center; justify-content:center; z-index:10000; display:none; }
.modal-overlay.active { display:flex; }
.modal-box { background:#fff; border-radius:16px; padding:32px; width:90%; max-width:500px; max-height:85vh; overflow-y:auto; position:relative; }
.modal-box-wide { max-width:700px; }
.modal-close { position:absolute; top:16px; right:16px; width:32px; height:32px; background:rgba(0,0,0,.05); border:none; border-radius:50%; font-size:20px; cursor:pointer; color:#666; }
.modal-close:hover { background:rgba(0,0,0,.1); }
.modal-box h2 { margin-bottom:20px; font-size:20px; }
.modal-box form { display:flex; flex-direction:column; gap:12px; }
.modal-box label { display:flex; flex-direction:column; gap:4px; font-size:13px; font-weight:600; color:#374151; }
.modal-box input, .modal-box select, .modal-box textarea { padding:12px 14px; border:1.5px solid #e5e7eb; border-radius:8px; font-size:15px; outline:none; font-family:inherit; }
.modal-box button { padding:14px; background:#032f62; color:#fff; border:none; border-radius:8px; font-size:15px; font-weight:600; cursor:pointer; }

/* Ticket conversation */
.ticket-reply { padding:12px; border-radius:8px; margin-bottom:8px; }
.ticket-reply.user { background:#eff6ff; }
.ticket-reply.staff { background:#f0fdf4; }
.ticket-reply-meta { font-size:12px; color:#6b7280; margin-bottom:4px; }
.ticket-reply-body { font-size:14px; }
.reply-form { margin-top:16px; }

/* Badge */
.msg-badge { display:inline-block; background:#ef4444; color:#fff; font-size:11px; font-weight:700; padding:1px 6px; border-radius:10px; margin-left:4px; }