/* Shared styling for the operator panel (/admin) and the owner portal (/account). */
.portal { max-width: 1320px; margin: 0 auto; padding: 30px 4vw 60px; }
.portal h1 { font-size: 26px; margin-bottom: 4px; }
.portal .sub { color: var(--text-2); margin-bottom: 22px; }
.portal .box { background: var(--bg-2); border: 1px solid var(--border); border-radius: 14px; padding: 22px; margin-bottom: 18px; overflow-x: auto; }
.portal .box h2 { font-size: 18px; margin-bottom: 12px; display: flex; align-items: center; gap: 10px; }
.portal .box h2 .spacer { flex: 1; }
.portal .row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.portal .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.portal label { display: flex; flex-direction: column; gap: 5px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-2); }
.portal input, .portal select, .portal textarea { font: inherit; font-size: 15px; padding: 9px 11px; border-radius: 8px; border: 1px solid #3a414f; background: var(--bg); color: var(--text); }
.portal input:focus, .portal select:focus, .portal textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.2); }
.portal textarea { min-height: 70px; resize: vertical; }
.portal .hint { font-size: 12.5px; color: var(--text-3); text-transform: none; letter-spacing: 0; font-weight: 400; }
.portal .muted { color: var(--text-2); }
.portal .small { font-size: 13px; }
.portal .msg { min-height: 20px; font-size: 14px; color: #ef4444; }
.portal .msg.ok { color: var(--ok); }
.portal table { width: 100%; border-collapse: collapse; font-size: 14px; }
.portal th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-3); padding: 8px 10px; border-bottom: 1px solid var(--border); }
.portal td { padding: 9px 10px; border-bottom: 1px solid var(--border); vertical-align: middle; white-space: nowrap; }
.portal tr.click { cursor: pointer; }
.portal tr.click:hover td { background: var(--bg-3); }
.portal .badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 650; background: var(--bg-3); color: var(--text-2); }
.portal .badge.ok { color: var(--ok); } .portal .badge.warn { color: #eab308; } .portal .badge.bad { color: #ef4444; } .portal .badge.info { color: #3b82f6; }
.portal .btn.sm { padding: 6px 11px; font-size: 13px; }
.portal .btn.danger { background: #ef4444; border-color: #ef4444; color: #fff; }
.portal .tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 18px; }
.portal .tabs button { background: none; border: 0; color: var(--text-2); font: inherit; font-weight: 600; padding: 10px 14px; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.portal .tabs button.on { color: var(--text); border-bottom-color: var(--accent); }
.portal .plan { border: 1px solid var(--border); border-radius: 12px; padding: 16px; background: var(--bg-3); display: flex; flex-direction: column; gap: 8px; }
.portal .plan.current { border-color: var(--ok); }
.portal .plan .price { font-size: 28px; font-weight: 800; }
.portal .plan .price span { font-size: 14px; color: var(--text-3); font-weight: 500; }
.portal .plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.portal .login { max-width: 420px; margin: 60px auto; }
.portal .login form { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; }
.portal .topnav { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; }
.portal .topnav .brand { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 17px; color: var(--text); }
.portal .topnav .brand img { width: 28px; height: 28px; }
.portal .topnav .spacer { flex: 1; }
.portal .kv { display: grid; grid-template-columns: 160px 1fr; gap: 6px 12px; font-size: 14px; }
.portal .kv b { color: var(--text-2); font-weight: 600; }
.portal .plan-row { display: grid; grid-template-columns: 90px 1fr 90px 90px 90px 1fr 1fr 70px 40px; gap: 8px; align-items: center; margin-bottom: 8px; }
.portal .plan-row input { padding: 7px 9px; font-size: 14px; }
.portal .head { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-3); }
@media (max-width: 800px) { .portal .grid2 { grid-template-columns: 1fr; } .portal .plan-row { grid-template-columns: 1fr 1fr; } }

[hidden] { display: none !important; }