.login-page{display:flex;align-items:center;justify-content:center;min-height:100vh;position:relative;overflow:hidden}.login-bg-decor{position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(ellipse 80% 60% at 50% 20%,rgba(124,111,247,.08) 0%,transparent 60%),radial-gradient(ellipse 50% 50% at 80% 80%,rgba(124,111,247,.05) 0%,transparent 50%);pointer-events:none}.login-card{position:relative;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:44px 40px 36px;width:420px;max-width:90vw;display:flex;flex-direction:column;align-items:center;gap:20px}.login-icon{width:56px;height:56px;background:var(--accent-subtle);border-radius:var(--radius);display:flex;align-items:center;justify-content:center}.login-icon .material-symbols-outlined{font-size:28px;color:var(--accent)}.login-card h1{font-size:1.6rem;font-weight:700;letter-spacing:-.02em}.login-card .subtitle{color:var(--text-muted);font-size:.9rem;margin-top:-12px}.login-fields{width:100%;display:flex;flex-direction:column;gap:12px}.field{position:relative;display:flex;align-items:center}.field-icon{position:absolute;left:14px;font-size:20px;color:var(--text-muted);pointer-events:none}.field input{width:100%;padding-left:42px}.error-msg{width:100%;display:flex;align-items:center;gap:8px;background:var(--red-bg);border:1px solid rgba(248,113,113,.25);border-radius:var(--radius-sm);padding:10px 14px;color:var(--red);font-size:.85rem}.error-msg .material-symbols-outlined{font-size:18px}.login-buttons{width:100%;display:flex;flex-direction:column;gap:10px;margin-top:4px}.login-buttons button{width:100%;justify-content:center;padding:12px;font-size:.9rem}.sms-layout{display:flex;flex-direction:column;height:100vh}.topbar{display:flex;justify-content:space-between;align-items:center;padding:14px 24px;background:var(--bg-secondary);border-bottom:1px solid var(--border);gap:16px;flex-shrink:0}.topbar-left{display:flex;align-items:center;gap:12px}.topbar-logo{width:36px;height:36px;background:var(--accent-subtle);border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center}.topbar-logo .material-symbols-outlined{font-size:20px;color:var(--accent)}.topbar h2{font-size:1.1rem;font-weight:600;letter-spacing:-.01em}.topbar-right{display:flex;align-items:center;gap:10px}.topbar .badge-count{background:var(--bg-hover);color:var(--text-secondary);padding:5px 12px;border-radius:20px;font-size:.8rem;font-weight:500}.filters-bar{display:flex;gap:10px;align-items:center;padding:12px 24px;background:var(--bg-secondary);border-bottom:1px solid var(--border);flex-shrink:0}.filters-bar input{width:240px}.filters-bar select{width:140px}.filters-bar .spacer{flex:1}.sms-main{display:flex;flex:1;overflow:hidden}.sms-table-wrap{flex:1;overflow:auto}.sms-table{width:100%;border-collapse:collapse}.sms-table thead{position:sticky;top:0;z-index:1}.sms-table th{text-align:left;font-weight:500;font-size:.75rem;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);padding:12px 16px;background:var(--bg-primary);border-bottom:1.5px solid var(--border)}.sms-table td{padding:14px 16px;border-bottom:1px solid var(--border);font-size:.875rem}.sms-table tbody tr{transition:background var(--transition);cursor:pointer}.sms-table tbody tr:hover{background:var(--bg-hover)}.sms-table tbody tr.selected{background:var(--accent-subtle);box-shadow:inset 3px 0 0 var(--accent)}.cell-contact{font-weight:500}.cell-phone{font-family:JetBrains Mono,monospace;font-size:.8rem;color:var(--text-secondary)}.cell-content{max-width:320px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cell-date{white-space:nowrap;font-size:.8rem;color:var(--text-muted);font-family:JetBrains Mono,monospace}.badge{font-size:.7rem;font-weight:600;padding:3px 10px;border-radius:20px;text-transform:uppercase;letter-spacing:.04em}.badge.received{background:var(--green-bg);color:var(--green)}.badge.sent{background:var(--blue-bg);color:var(--blue)}.table-empty{text-align:center;padding:60px 20px;color:var(--text-muted)}.table-empty .material-symbols-outlined{font-size:48px;display:block;margin-bottom:12px;opacity:.4}.table-empty p{font-size:.9rem}.table-loading{text-align:center;padding:60px 20px}.table-loading .spinner{width:32px;height:32px;margin:0 auto 12px;border:3px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.detail-panel{width:360px;padding:28px 24px;background:var(--bg-secondary);border-left:1px solid var(--border);overflow-y:auto;display:flex;flex-direction:column;gap:16px;flex-shrink:0}.detail-header{display:flex;justify-content:space-between;align-items:center}.detail-header h3{font-size:1rem;font-weight:600}.detail-meta{display:flex;flex-direction:column;gap:10px}.detail-row{display:flex;gap:8px;align-items:baseline}.detail-label{font-size:.75rem;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);width:52px;flex-shrink:0}.detail-value{font-size:.875rem;color:var(--text-primary)}.detail-value.mono{font-family:JetBrains Mono,monospace;font-size:.8rem}.detail-content-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:16px;font-size:.9rem;line-height:1.7;white-space:pre-wrap;word-break:break-word;color:var(--text-primary)}.pagination{display:flex;justify-content:space-between;align-items:center;padding:12px 24px;background:var(--bg-secondary);border-top:1px solid var(--border);font-size:.85rem;color:var(--text-secondary);flex-shrink:0}.pagination-info{font-weight:500}.pagination-ctrl{display:flex;align-items:center;gap:10px}.pagination-ctrl .btn-icon{padding:6px 12px}.pagination-ctrl .page-num{font-family:JetBrains Mono,monospace;font-size:.8rem;color:var(--text-secondary)}.detail-panel{animation:slideIn .2s ease-out}@keyframes slideIn{0%{transform:translate(20px);opacity:.5}}@media(max-width:768px){.topbar{flex-direction:column;align-items:flex-start}.filters-bar{flex-wrap:wrap}.filters-bar input{width:100%}.sms-main{flex-direction:column}.detail-panel{width:100%;border-left:none;border-top:1px solid var(--border)}}:root{--bg-primary: #0f0f13;--bg-secondary: #1a1a24;--bg-card: #1e1e2a;--bg-hover: #252533;--bg-input: #16161f;--border: #2a2a3a;--border-focus: #6c5ce7;--text-primary: #f0f0f5;--text-secondary: #9d9db5;--text-muted: #606078;--accent: #7c6ff7;--accent-hover: #9080ff;--accent-subtle: rgba(124, 111, 247, .12);--green: #4ade80;--green-bg: rgba(74, 222, 128, .1);--blue: #60a5fa;--blue-bg: rgba(96, 165, 250, .1);--red: #f87171;--red-hover: #fa8a8a;--red-bg: rgba(248, 113, 113, .1);--radius-sm: 8px;--radius: 12px;--radius-lg: 16px;--shadow-sm: 0 1px 2px rgba(0,0,0,.3);--shadow: 0 4px 12px rgba(0,0,0,.4);--shadow-lg: 0 8px 32px rgba(0,0,0,.5);--transition: .2s cubic-bezier(.4, 0, .2, 1)}*{margin:0;padding:0;box-sizing:border-box}html{font-size:15px}body{font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;background:var(--bg-primary);color:var(--text-primary);min-height:100vh;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}input,select,button{font-family:inherit}input,select{font-size:.9rem;padding:10px 14px;border:1.5px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-input);color:var(--text-primary);outline:none;transition:border-color var(--transition),box-shadow var(--transition)}input::placeholder{color:var(--text-muted)}input:focus,select:focus{border-color:var(--border-focus);box-shadow:0 0 0 3px #6c5ce733}button{font-weight:500;font-size:.875rem;border:none;border-radius:var(--radius-sm);padding:10px 20px;cursor:pointer;transition:all var(--transition);display:inline-flex;align-items:center;gap:6px}.btn-primary{background:var(--accent);color:#fff}.btn-primary:hover{background:var(--accent-hover);transform:translateY(-1px);box-shadow:0 4px 16px #7c6ff759}.btn-primary:active{transform:translateY(0)}.btn-ghost{background:transparent;color:var(--text-secondary);border:1.5px solid var(--border)}.btn-ghost:hover{background:var(--bg-hover);color:var(--text-primary);border-color:var(--text-muted)}.btn-danger{background:transparent;color:var(--red);border:1.5px solid transparent;padding:6px 14px;font-size:.8rem}.btn-danger:hover{background:var(--red-bg);border-color:#f871714d}.btn-icon{background:transparent;color:var(--text-secondary);border:none;padding:8px;border-radius:var(--radius-sm)}.btn-icon:hover{background:var(--bg-hover);color:var(--text-primary)}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}