:root {
  --bg: #07131f;
  --bg-soft: #0b1b2a;
  --panel: rgba(14, 34, 51, .86);
  --panel-2: rgba(18, 44, 65, .92);
  --line: rgba(255,255,255,.09);
  --text: #f4f7f8;
  --muted: #9eb0bd;
  --green: #2bd576;
  --green-dark: #12aa59;
  --gold: #d6ac55;
  --red: #ff6b70;
  --yellow: #ffcb66;
  --shadow: 0 22px 55px rgba(0,0,0,.28);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); font-family: Inter, "Segoe UI", Roboto, Arial, sans-serif; }
body { overflow: hidden; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
.shell { display: grid; grid-template-columns: 250px 1fr; height: 100vh; background: radial-gradient(circle at 78% 0%, rgba(43,213,118,.10), transparent 30%), linear-gradient(135deg, #07131f, #091a28 60%, #07131f); }
.sidebar { padding: 24px 18px 18px; border-right: 1px solid var(--line); background: rgba(5,16,26,.84); backdrop-filter: blur(18px); display: flex; flex-direction: column; }
.brand { display: flex; align-items: center; gap: 12px; padding: 4px 8px 28px; }
.brand img { width: 48px; height: 48px; border-radius: 15px; box-shadow: 0 9px 24px rgba(43,213,118,.2); }
.brand strong { display: block; font-size: 19px; }
.brand span { color: var(--muted); font-size: 11px; letter-spacing: .5px; }
nav { display: grid; gap: 6px; }
.nav-item { color: #b9c8d1; border: 0; background: transparent; padding: 13px 14px; border-radius: 12px; text-align: left; display: flex; align-items: center; gap: 12px; transition: .18s; }
.nav-item span { width: 24px; text-align: center; font-size: 18px; }
.nav-item:hover { background: rgba(255,255,255,.05); color: white; }
.nav-item.active { background: linear-gradient(90deg, rgba(43,213,118,.20), rgba(43,213,118,.06)); color: #8af0b5; box-shadow: inset 3px 0 var(--green); }
.sidebar-foot { margin-top: auto; border-top: 1px solid var(--line); padding: 18px 8px 0; display: flex; align-items: flex-end; justify-content: space-between; }
.developer { color: var(--muted); font-size: 11px; line-height: 1.45; }.developer strong { color: #e8eef2; }.version { color: var(--gold); font-size: 11px; }
.main { min-width: 0; overflow-y: auto; }
.topbar { position: sticky; top: 0; z-index: 10; padding: 23px 30px 18px; display: flex; align-items: center; justify-content: space-between; background: linear-gradient(180deg, rgba(7,19,31,.98), rgba(7,19,31,.82), transparent); backdrop-filter: blur(10px); }
.topbar h1 { margin: 2px 0 0; font-size: 25px; }.eyebrow { margin: 0; font-size: 10px; letter-spacing: 1.7px; color: var(--gold); font-weight: 800; }
.top-actions { display: flex; align-items: center; gap: 12px; }
.wa-badge { padding: 9px 12px; border: 1px solid var(--line); border-radius: 999px; display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; background: rgba(255,255,255,.03); }
.wa-badge .dot { width: 8px; height: 8px; border-radius: 50%; background: #768694; box-shadow: 0 0 0 4px rgba(118,134,148,.1); }
.wa-badge.ready { color: #9af5bd; border-color: rgba(43,213,118,.25); }.wa-badge.ready .dot { background: var(--green); box-shadow: 0 0 0 4px rgba(43,213,118,.13); }
.wa-badge.waiting .dot { background: var(--yellow); box-shadow: 0 0 0 4px rgba(255,203,102,.13); }
.page { display: none; padding: 0 30px 30px; }.page.active { display: block; animation: fade .2s ease-out; }
@keyframes fade { from { opacity: .3; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.btn { border: 1px solid var(--line); border-radius: 11px; padding: 10px 15px; color: white; background: rgba(255,255,255,.06); font-weight: 700; transition: .18s; }
.btn:hover { transform: translateY(-1px); filter: brightness(1.08); }.btn.primary { background: #153248; }.btn.accent { background: linear-gradient(135deg, var(--green), var(--green-dark)); border-color: transparent; color: #032113; box-shadow: 0 10px 25px rgba(43,213,118,.18); }.btn.ghost { background: transparent; }.btn.small { padding: 8px 11px; font-size: 12px; }.btn.grow { width: 100%; padding: 13px; }.btn.danger { color: #ff9da1; }
.hero { min-height: 300px; border: 1px solid rgba(43,213,118,.13); border-radius: 24px; padding: 42px 46px; display: grid; grid-template-columns: 1.4fr .8fr; overflow: hidden; position: relative; background: radial-gradient(circle at 80% 20%, rgba(43,213,118,.17), transparent 28%), linear-gradient(145deg, rgba(18,45,66,.98), rgba(8,24,37,.98)); box-shadow: var(--shadow); }
.hero:after { content: ""; position: absolute; width: 300px; height: 300px; border: 1px solid rgba(255,255,255,.05); border-radius: 50%; right: -90px; bottom: -170px; }
.pill { display: inline-flex; font-size: 10px; letter-spacing: 1.5px; color: #9ef6c0; padding: 7px 10px; border: 1px solid rgba(43,213,118,.24); border-radius: 999px; background: rgba(43,213,118,.07); }
.hero h2 { max-width: 690px; font-size: clamp(29px, 3vw, 45px); line-height: 1.1; margin: 17px 0 15px; letter-spacing: -1.3px; }.hero p { color: #b4c2cb; max-width: 680px; line-height: 1.65; }.hero-actions { display: flex; gap: 10px; margin-top: 24px; }
.hero-art { display: grid; place-items: center; perspective: 800px; }.phone { width: 210px; height: 260px; padding: 16px; border-radius: 27px; background: linear-gradient(160deg, #17354b, #091925); border: 1px solid rgba(255,255,255,.13); transform: rotateY(-9deg) rotateZ(3deg); box-shadow: 0 30px 50px rgba(0,0,0,.4); }.phone-head { display: flex; align-items: center; gap: 7px; font-size: 9px; }.phone-head span { width: 20px; height: 20px; border-radius: 50%; background: #294c62; }.phone-head i { margin-left: auto; color: var(--muted); }.story-ring { margin: 28px auto 18px; width: 89px; height: 89px; border: 4px solid var(--green); padding: 5px; border-radius: 50%; }.story-ring img { width: 100%; height: 100%; border-radius: 50%; }.story-line { height: 6px; width: 60%; margin: 9px auto; background: rgba(255,255,255,.12); border-radius: 99px; }.story-line.wide { width: 82%; }.schedule-chip { margin: 24px auto 0; width: max-content; font-size: 9px; padding: 7px 9px; color: #9ef6c0; background: rgba(43,213,118,.1); border-radius: 999px; }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 18px 0; }.stat-card { border: 1px solid var(--line); border-radius: 17px; padding: 18px; background: var(--panel); box-shadow: 0 10px 30px rgba(0,0,0,.12); }.stat-card span,.stat-card small { color: var(--muted); font-size: 11px; }.stat-card strong { display: block; font-size: 27px; margin: 8px 0 3px; }
.two-column { display: grid; grid-template-columns: 1.3fr .7fr; gap: 18px; }.panel { border: 1px solid var(--line); border-radius: 18px; background: var(--panel); box-shadow: 0 15px 40px rgba(0,0,0,.12); padding: 20px; }.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 16px; }.panel-head h3 { margin: 3px 0 0; font-size: 18px; }.link-btn { border: 0; color: #76e9a7; background: transparent; font-size: 12px; }
.list { display: grid; gap: 10px; }.list-item { border: 1px solid var(--line); border-radius: 14px; padding: 14px; display: flex; align-items: center; gap: 13px; background: rgba(255,255,255,.025); }.list-item:hover { background: rgba(255,255,255,.04); }.item-icon { width: 43px; height: 43px; border-radius: 13px; display: grid; place-items: center; background: rgba(43,213,118,.09); color: #7be7a7; font-size: 19px; flex: 0 0 auto; }.item-main { min-width: 0; flex: 1; }.item-main b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }.item-main small { display: block; color: var(--muted); margin-top: 4px; }.item-side { text-align: right; }.item-side strong { display: block; font-size: 12px; }.status-tag { display: inline-flex; margin-top: 6px; padding: 4px 7px; border-radius: 999px; background: rgba(43,213,118,.1); color: #83ebb0; font-size: 9px; text-transform: uppercase; letter-spacing: .6px; }.status-tag.failed { background: rgba(255,107,112,.1); color: #ff9da1; }.status-tag.paused { color: #c3ccd2; background: rgba(255,255,255,.06); }.item-actions { display: flex; gap: 7px; flex-wrap: wrap; justify-content: flex-end; }.icon-btn { border: 1px solid var(--line); border-radius: 9px; padding: 7px 9px; color: #d9e3e8; background: rgba(255,255,255,.04); font-size: 11px; }.icon-btn:hover { background: rgba(255,255,255,.09); }
.connection-state { text-align: center; padding: 14px 6px; }.connection-state .big-dot { width: 66px; height: 66px; margin: 2px auto 15px; border-radius: 50%; display: grid; place-items: center; font-size: 27px; background: rgba(255,255,255,.05); border: 1px solid var(--line); }.connection-state h4 { margin: 0 0 7px; }.connection-state p { margin: 0 0 16px; color: var(--muted); line-height: 1.5; font-size: 12px; }.connection-state img { width: 210px; background: white; border-radius: 14px; padding: 8px; }.error-text { color: #ff9da1 !important; }
.form-layout { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(320px, .65fr); gap: 18px; align-items: start; }.form-panel { padding: 24px; }.field { margin-bottom: 17px; position: relative; }.field > label { display: block; font-size: 12px; font-weight: 700; margin-bottom: 8px; color: #dbe6eb; }.field input,.field textarea,.field select,.filter-row input,.filter-row select { width: 100%; border: 1px solid var(--line); border-radius: 11px; padding: 11px 12px; background: rgba(3,12,20,.48); color: white; outline: none; }.field textarea { resize: vertical; min-height: 95px; }.field input:focus,.field textarea:focus,.field select:focus,.filter-row input:focus { border-color: rgba(43,213,118,.45); box-shadow: 0 0 0 3px rgba(43,213,118,.08); }.counter { position: absolute; right: 10px; bottom: 8px; color: var(--muted); font-size: 10px; }.segmented { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 4px; border-radius: 12px; background: rgba(3,12,20,.48); border: 1px solid var(--line); }.type-option { border: 0; border-radius: 9px; padding: 10px; background: transparent; color: var(--muted); }.type-option.active { color: #072017; background: var(--green); font-weight: 800; }.file-picker { width: 100%; min-height: 82px; padding: 13px; border-radius: 13px; border: 1px dashed rgba(43,213,118,.34); background: rgba(43,213,118,.04); color: white; display: flex; align-items: center; gap: 13px; text-align: left; }.file-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 11px; background: rgba(43,213,118,.1); color: #8cf0b5; font-size: 21px; }.file-picker b,.file-picker small { display: block; }.file-picker small { color: var(--muted); margin-top: 4px; font-size: 10px; }.days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 7px; }.days input { display: none; }.days span { display: grid; place-items: center; padding: 10px 3px; border: 1px solid var(--line); border-radius: 9px; color: var(--muted); font-size: 11px; }.days input:checked + span { color: #082217; background: var(--green); border-color: var(--green); font-weight: 800; }.hidden { display: none !important; }
.preview-panel { position: sticky; top: 98px; }.status-preview { aspect-ratio: 9/14; max-height: 520px; margin: 4px auto 18px; border-radius: 24px; overflow: hidden; position: relative; background: linear-gradient(160deg, #2a546a, #102637); box-shadow: 0 18px 50px rgba(0,0,0,.3); }.preview-top { display: flex; align-items: center; gap: 9px; padding: 18px; position: relative; z-index: 2; }.preview-top img { width: 35px; height: 35px; border-radius: 50%; border: 2px solid white; }.preview-top b,.preview-top small { display: block; }.preview-top small { color: rgba(255,255,255,.65); font-size: 9px; }.preview-top i { margin-left: auto; }.preview-body { position: absolute; inset: 0; padding: 80px 25px 25px; display: grid; place-items: center; background-position: center; background-size: cover; }.preview-body p { text-align: center; font-size: 22px; font-weight: 700; line-height: 1.35; overflow-wrap: anywhere; }.preview-body.media:after { content: "MEDIA"; padding: 6px 9px; border-radius: 7px; font-size: 10px; background: rgba(0,0,0,.5); }.preview-progress { position: absolute; left: 12px; right: 12px; top: 8px; height: 3px; background: rgba(255,255,255,.3); border-radius: 99px; }.preview-progress:after { content: ""; display: block; width: 68%; height: 100%; background: white; }.notice { border: 1px solid rgba(214,172,85,.18); background: rgba(214,172,85,.05); padding: 13px; border-radius: 12px; }.notice b { color: #e4c581; font-size: 12px; }.notice p { margin: 6px 0 0; color: var(--muted); line-height: 1.5; font-size: 11px; }
.schedule-head { align-items: flex-end; }.filter-row { display: flex; gap: 8px; }.filter-row input { width: 200px; }.filter-row select { width: 125px; }.schedule-row { align-items: flex-start; }.schedule-row .item-side { min-width: 128px; }.switch { position: relative; width: 38px; height: 22px; display: inline-block; }.switch input { opacity: 0; width: 0; height: 0; }.switch span { position: absolute; inset: 0; background: #40515d; border-radius: 99px; }.switch span:after { content:""; position: absolute; width: 16px; height: 16px; left: 3px; top: 3px; border-radius: 50%; background: white; transition: .18s; }.switch input:checked + span { background: var(--green-dark); }.switch input:checked + span:after { transform: translateX(16px); }
.history-list { display: grid; }.history-item { display: grid; grid-template-columns: 34px 1fr auto; gap: 12px; padding: 14px 4px; border-bottom: 1px solid var(--line); }.history-icon { width: 31px; height: 31px; border-radius: 50%; display: grid; place-items: center; background: rgba(43,213,118,.1); color: #84ecaf; }.history-icon.failed { background: rgba(255,107,112,.1); color: #ff9da1; }.history-item p { margin: 4px 0 0; color: var(--muted); font-size: 11px; }.history-item time { color: var(--muted); font-size: 11px; }
.settings-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 18px; align-items: start; }.toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 14px 0; border-bottom: 1px solid var(--line); }.toggle-row b,.toggle-row small { display: block; }.toggle-row small,.inline-field small { color: var(--muted); margin-top: 4px; font-size: 10px; }.toggle-row input { display: none; }.toggle-row i { flex: 0 0 auto; width: 42px; height: 24px; border-radius: 99px; background: #3b4c58; position: relative; }.toggle-row i:after { content: ""; position: absolute; width: 18px; height: 18px; left: 3px; top: 3px; border-radius: 50%; background: white; transition: .18s; }.toggle-row input:checked + i { background: var(--green-dark); }.toggle-row input:checked + i:after { transform: translateX(18px); }.inline-field { padding: 16px 0; display: flex; align-items: center; justify-content: space-between; gap: 20px; }.inline-field span b,.inline-field span small { display: block; }.inline-field > div { display: flex; align-items: center; gap: 8px; }.inline-field input { width: 75px; }.inline-field em { color: var(--muted); font-style: normal; font-size: 11px; }.warning-box { border: 1px solid rgba(255,203,102,.25); border-radius: 14px; padding: 15px; background: rgba(255,203,102,.06); }.warning-box strong { color: #ffd47e; }.warning-box p,.muted { color: var(--muted); line-height: 1.55; font-size: 11px; }.risk-check { display: flex; align-items: flex-start; gap: 10px; margin: 17px 0; color: #d8e1e6; line-height: 1.5; font-size: 12px; }.risk-check input { margin-top: 3px; accent-color: var(--green); }.divider { height: 1px; background: var(--line); margin: 15px 0; }
.empty { border: 1px dashed var(--line); border-radius: 14px; padding: 26px; text-align: center; color: var(--muted); }.empty b { display: block; color: #d9e3e8; margin-bottom: 5px; }.modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 20px; background: rgba(0,0,0,.66); backdrop-filter: blur(7px); }.modal-card { width: min(480px, 95vw); max-height: 88vh; overflow: auto; border: 1px solid var(--line); border-radius: 20px; padding: 24px; background: #0d2132; box-shadow: var(--shadow); position: relative; }.modal-close { position: absolute; top: 12px; right: 13px; width: 32px; height: 32px; border: 0; border-radius: 50%; color: white; background: rgba(255,255,255,.07); font-size: 20px; }.modal-card h3 { margin-top: 0; }.qr-wrap { text-align: center; }.qr-wrap img { width: 300px; max-width: 100%; background: white; padding: 9px; border-radius: 15px; }.qr-wrap p { color: var(--muted); line-height: 1.5; font-size: 12px; }.toast-container { position: fixed; right: 22px; bottom: 22px; z-index: 200; display: grid; gap: 9px; }.toast { width: min(360px, calc(100vw - 44px)); border: 1px solid var(--line); border-left: 3px solid #7a8a95; border-radius: 11px; padding: 12px 14px; background: #102638; box-shadow: var(--shadow); animation: toastin .2s ease-out; font-size: 12px; }.toast.success { border-left-color: var(--green); }.toast.error { border-left-color: var(--red); }.toast.warning { border-left-color: var(--yellow); }@keyframes toastin { from { opacity: 0; transform: translateX(14px); } }
@media (max-width: 1100px) { .hero { grid-template-columns: 1fr .55fr; padding: 34px; }.phone { transform: scale(.88) rotateY(-9deg) rotateZ(3deg); }.stats-grid { grid-template-columns: repeat(2, 1fr); }.form-layout,.settings-grid { grid-template-columns: 1fr; }.preview-panel { position: static; }.status-preview { max-width: 330px; }.two-column { grid-template-columns: 1fr; } }

/* V1.1.0 — Template & Calendar Edition */
.head-actions,.data-actions,.calendar-actions { display:flex; gap:8px; flex-wrap:wrap; }
.data-actions { margin-top:14px; }
.status-tag.warning { color:#ffd47e; background:rgba(255,203,102,.09); }
.history-icon.warning { background:rgba(255,203,102,.1); color:#ffd47e; }

.template-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.template-card { min-width:0; display:flex; flex-direction:column; min-height:210px; padding:17px; border:1px solid var(--line); border-radius:16px; background:rgba(255,255,255,.025); transition:.18s ease; }
.template-card:hover { transform:translateY(-2px); border-color:rgba(43,213,118,.25); background:rgba(43,213,118,.035); }
.template-card-top { display:flex; justify-content:space-between; gap:8px; align-items:center; }
.template-type,.template-category { display:inline-flex; padding:4px 7px; border-radius:999px; font-size:9px; line-height:1; letter-spacing:.55px; }
.template-type { color:#082217; background:var(--green); font-weight:900; }
.template-category { color:#d7e2e8; background:rgba(255,255,255,.06); }
.template-card h4 { margin:16px 0 8px; font-size:15px; }
.template-card p { flex:1; margin:0; color:var(--muted); font-size:11px; line-height:1.6; display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; white-space:pre-line; }
.template-actions { display:flex; gap:7px; flex-wrap:wrap; margin-top:16px; }
.template-empty { grid-column:1/-1; }
.compact-templates { grid-template-columns:repeat(2,minmax(0,1fr)); max-height:58vh; overflow:auto; padding:2px; }
.compact-templates .template-card { min-height:180px; }
.template-picker > h3 { margin-bottom:5px; }
.modal-form .notice { margin-bottom:16px; }

.calendar-panel { overflow:hidden; }
.calendar-weekdays { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); border:1px solid var(--line); border-bottom:0; border-radius:14px 14px 0 0; overflow:hidden; }
.calendar-weekdays span { padding:10px; color:var(--muted); font-size:10px; font-weight:800; text-align:center; background:rgba(255,255,255,.025); }
.calendar-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); border-left:1px solid var(--line); border-top:1px solid var(--line); }
.calendar-cell { min-height:124px; padding:9px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); background:rgba(255,255,255,.012); overflow:hidden; }
.calendar-cell:nth-last-child(-n+7) { border-bottom:1px solid var(--line); }
.calendar-cell.outside { opacity:.34; background:rgba(0,0,0,.08); }
.calendar-cell.today { box-shadow:inset 0 0 0 2px rgba(43,213,118,.45); background:rgba(43,213,118,.035); }
.calendar-day { width:24px; height:24px; display:grid; place-items:center; border-radius:50%; color:#dce6eb; font-size:11px; font-weight:800; }
.calendar-cell.today .calendar-day { color:#082217; background:var(--green); }
.calendar-events { display:grid; gap:4px; margin-top:7px; }
.calendar-event { width:100%; padding:5px 6px; border:0; border-left:2px solid var(--green); border-radius:5px; overflow:hidden; color:#dff8e9; background:rgba(43,213,118,.09); text-align:left; white-space:nowrap; text-overflow:ellipsis; font-size:9px; }
.calendar-event:hover { background:rgba(43,213,118,.17); }
.calendar-event.paused { color:#bdc8ce; border-left-color:#71818b; background:rgba(255,255,255,.045); }
.calendar-more { padding-left:4px; color:var(--muted); font-size:9px; }
.calendar-legend { display:flex; gap:18px; align-items:center; flex-wrap:wrap; margin-top:13px; color:var(--muted); font-size:10px; }
.legend-dot { display:inline-block; width:8px; height:8px; margin-right:5px; border-radius:50%; background:var(--green); }
.legend-dot.paused { background:#71818b; }

.preview-body.media:after { content:none; }
.preview-body.media { padding:0; display:block; background:#07131d; }
.preview-media-element { width:100%; height:100%; object-fit:cover; display:block; }
.preview-body video.preview-media-element { object-fit:contain; background:#03080c; }
.media-placeholder { position:absolute; inset:0; display:grid; place-content:center; gap:7px; padding:25px; color:#d7e2e8; text-align:center; background:radial-gradient(circle at center,rgba(43,213,118,.12),transparent 55%); }
.media-placeholder b { font-size:12px; letter-spacing:1.2px; }
.media-placeholder span { color:var(--muted); font-size:10px; }
.preview-caption { position:absolute; left:13px; right:13px; bottom:18px; z-index:3; max-height:35%; overflow:auto; padding:10px 12px; border-radius:10px; color:white; background:rgba(0,0,0,.58); backdrop-filter:blur(8px); white-space:pre-line; font-size:11px; line-height:1.45; }

@media (max-width:1250px) {
  .template-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .calendar-cell { min-height:108px; padding:7px; }
  .calendar-event { font-size:8px; }
}
@media (max-width:1050px) {
  .template-grid { grid-template-columns:1fr; }
  .compact-templates { grid-template-columns:1fr; }
  .calendar-cell { min-height:94px; }
  .calendar-event { padding:4px; }
}


/* V1.2.1 — Status Engine Hotfix */
.privacy-hero { display:grid; grid-template-columns:auto 1fr auto; gap:20px; align-items:center; background:linear-gradient(135deg,rgba(43,213,118,.09),rgba(14,34,51,.9)); }
.privacy-hero h2 { margin:5px 0 9px; font-size:25px; }
.privacy-hero p:not(.eyebrow) { margin:0; max-width:780px; color:var(--muted); font-size:12px; line-height:1.65; }
.privacy-shield { width:68px; height:68px; display:grid; place-items:center; border-radius:22px; color:#082217; background:var(--green); font-size:31px; box-shadow:0 16px 40px rgba(43,213,118,.2); }
.privacy-state { min-width:145px; padding:11px 13px; display:flex; align-items:center; justify-content:center; gap:8px; border:1px solid var(--line); border-radius:999px; font-size:11px; }
.privacy-state span { width:9px; height:9px; border-radius:50%; background:#7d8a93; box-shadow:0 0 0 4px rgba(125,138,147,.11); }
.privacy-state.ready { color:#9af5bd; border-color:rgba(43,213,118,.28); background:rgba(43,213,118,.06); }
.privacy-state.ready span { background:var(--green); box-shadow:0 0 0 4px rgba(43,213,118,.13); }
.privacy-grid { display:grid; grid-template-columns:1.1fr .9fr; gap:18px; margin-top:18px; align-items:start; }
.privacy-steps { list-style:none; margin:0 0 16px; padding:0; display:grid; gap:9px; }
.privacy-steps li { display:flex; gap:12px; align-items:flex-start; padding:12px; border:1px solid var(--line); border-radius:13px; background:rgba(255,255,255,.02); }
.privacy-steps li > span { flex:0 0 auto; width:28px; height:28px; display:grid; place-items:center; border-radius:50%; color:#092217; background:var(--green); font-size:11px; font-weight:900; }
.privacy-steps b,.privacy-steps small { display:block; }
.privacy-steps small { margin-top:4px; color:var(--muted); font-size:10px; line-height:1.45; }
.privacy-confirm { padding:13px; border:1px solid rgba(43,213,118,.2); border-radius:13px; background:rgba(43,213,118,.045); }
.privacy-action-panel { display:grid; gap:12px; }
.privacy-phone { min-height:250px; padding:15px; border:1px solid var(--line); border-radius:18px; background:linear-gradient(160deg,#132c3d,#07131f); box-shadow:inset 0 0 0 5px rgba(0,0,0,.12); }
.privacy-phone-head { display:flex; align-items:center; gap:10px; padding-bottom:14px; border-bottom:1px solid var(--line); }
.privacy-phone-head span { width:36px; height:36px; display:grid; place-items:center; border-radius:50%; color:#092217; background:var(--green); font-size:10px; font-weight:900; }
.privacy-phone-head b { flex:1; }.privacy-phone-head i { color:var(--muted); font-style:normal; }
.privacy-story { display:flex; align-items:center; gap:12px; padding:14px 2px; border-bottom:1px solid var(--line); }
.privacy-story > span { width:48px; height:48px; border-radius:50%; border:3px solid var(--green); background:linear-gradient(135deg,#315c6d,#0d2738); box-shadow:inset 0 0 0 3px #0b1b2a; }
.privacy-story b,.privacy-story small { display:block; }.privacy-story small { margin-top:4px; color:var(--muted); font-size:10px; }
.privacy-warning { margin-top:4px; }
@media (max-width:1100px) { .privacy-grid { grid-template-columns:1fr; }.privacy-hero { grid-template-columns:auto 1fr; }.privacy-state { grid-column:1/-1; justify-self:start; } }

/* V1.2.1 — perbaikan pembungkus pesan error */
.item-main .error-text, .connection-state .error-text { white-space: normal; overflow-wrap: anywhere; word-break: break-word; max-width: 100%; }
.schedule-row { min-width: 0; overflow: hidden; }

/* V1.3.0 — Audio / MP3 Edition */
.segmented.segmented-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.field-help { display:block; margin-top:7px; color:var(--muted); font-size:10px; line-height:1.45; }
.audio-options { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.audio-options .field { margin-bottom:17px; }
.preview-body.audio { padding:0; display:block; }
.audio-preview-card { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; padding:74px 24px 110px; text-align:center; background:radial-gradient(circle at 50% 42%,rgba(43,213,118,.2),transparent 35%),linear-gradient(160deg,#071b22,#07131d); }
.audio-preview-card.theme-navy { background:radial-gradient(circle at 50% 42%,rgba(83,183,255,.21),transparent 35%),linear-gradient(160deg,#071426,#07131d); }
.audio-preview-card.theme-sunset { background:radial-gradient(circle at 50% 42%,rgba(255,168,87,.22),transparent 35%),linear-gradient(160deg,#2a1021,#100912); }
.audio-preview-card.theme-purple { background:radial-gradient(circle at 50% 42%,rgba(167,124,255,.22),transparent 35%),linear-gradient(160deg,#2b1d4a,#10091e); }
.audio-disc { width:76px; height:76px; display:grid; place-items:center; border-radius:50%; color:#072017; background:var(--green); font-size:31px; box-shadow:0 0 0 10px rgba(43,213,118,.09),0 22px 50px rgba(0,0,0,.34); }
.theme-navy .audio-disc { background:#53b7ff; color:#061827; box-shadow:0 0 0 10px rgba(83,183,255,.09),0 22px 50px rgba(0,0,0,.34); }
.theme-purple .audio-disc { background:#a77cff; color:#170d2b; box-shadow:0 0 0 10px rgba(167,124,255,.09),0 22px 50px rgba(0,0,0,.34); }
.theme-sunset .audio-disc { background:#ffa857; color:#2a1021; box-shadow:0 0 0 10px rgba(255,168,87,.09),0 22px 50px rgba(0,0,0,.34); }
.audio-wave { height:54px; display:flex; align-items:center; justify-content:center; gap:5px; }
.audio-wave i { width:5px; height:18px; border-radius:99px; background:var(--green); animation:audioWave 1s ease-in-out infinite alternate; }
.audio-wave i:nth-child(2n) { height:40px; animation-delay:.1s; }.audio-wave i:nth-child(3n) { height:28px; animation-delay:.2s; }.audio-wave i:nth-child(4n) { height:48px; animation-delay:.3s; }
.theme-navy .audio-wave i { background:#53b7ff; }.theme-sunset .audio-wave i { background:#ffa857; }.theme-purple .audio-wave i { background:#a77cff; }
.audio-preview-card b { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; }
.audio-preview-card small { color:var(--muted); font-size:10px; line-height:1.45; }
.audio-preview-card audio { width:min(100%,290px); height:34px; margin-top:4px; }
@keyframes audioWave { from { transform:scaleY(.55); opacity:.7; } to { transform:scaleY(1.15); opacity:1; } }
@media (max-width:700px) { .segmented.segmented-three { grid-template-columns:1fr; }.audio-options { grid-template-columns:1fr; gap:0; } }

/* V1.4.4 — Recording Icon & Watermark Edition */
.optional { color:var(--muted); font-size:10px; font-weight:500; }
.studio-span-2 { grid-column:1/-1; }
.compact-picker { padding:11px 13px; min-height:62px; }
.video-options { display:grid; grid-template-columns:1fr 1fr; gap:12px; padding:14px; margin-bottom:14px; border:1px solid rgba(83,183,255,.16); border-radius:14px; background:rgba(83,183,255,.035); }
.video-options .studio-toggle { grid-column:1/-1; margin:0; }
.video-options .field { margin:0; }
.studio-mute { grid-column:1/-1; margin:0; padding:10px 12px; border:1px solid var(--line); border-radius:11px; background:rgba(255,255,255,.025); }
.series-options { display:grid; grid-template-columns:minmax(180px,.6fr) 1fr; gap:12px; align-items:end; padding:14px; margin-bottom:14px; border:1px solid rgba(43,213,118,.15); border-radius:14px; background:rgba(43,213,118,.035); }
.series-options .field { margin:0; }
.media-meta { align-self:stretch; display:flex; flex-direction:column; justify-content:center; gap:5px; padding:10px 12px; border:1px solid var(--line); border-radius:11px; background:rgba(0,0,0,.12); min-width:0; }
.media-meta b,.media-meta span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.media-meta b { font-size:11px; }.media-meta span { color:var(--muted); font-size:10px; }
.studio-preview-btn { grid-column:1/-1; }
.studio-preview-result { grid-column:1/-1; display:grid; gap:8px; padding:10px; border:1px solid var(--line); border-radius:12px; background:rgba(0,0,0,.18); }
.studio-preview-result small { color:var(--muted); font-size:10px; text-align:center; }
.studio-preview-video { display:block; width:100%; max-height:420px; aspect-ratio:9/16; object-fit:contain; margin:auto; border-radius:10px; background:#03080c; }
.audio-preview-card.visual-points .audio-wave i { width:8px; height:8px; border-radius:50%; }
.audio-preview-card.visual-center .audio-wave i { transform-origin:center; }
.audio-preview-card.visual-spectrum .audio-wave { align-items:flex-end; }
.audio-preview-card.visual-spectrum .audio-wave i { width:10px; border-radius:4px 4px 1px 1px; }
.btn:disabled { cursor:wait; opacity:.65; transform:none; }
@media (max-width:800px) {
  .video-options,.series-options { grid-template-columns:1fr; }
  .video-options .studio-toggle,.studio-mute,.studio-preview-btn,.studio-span-2 { grid-column:1; }
}

/* V1.4.4 — kartu rekaman final sama dengan hasil render */
.audio-card-info { display:flex; gap:8px; align-items:flex-start; padding:12px 14px; border-radius:12px; border:1px solid rgba(43,213,118,.22); background:rgba(43,213,118,.07); }
.audio-card-info b { color:#7ff0ae; white-space:nowrap; }
.audio-card-info span { color:var(--muted); font-size:11px; line-height:1.5; }
.audio-preview-card { isolation:isolate; }
.audio-preview-card.has-custom-background:before { content:""; position:absolute; inset:-18px; z-index:-2; background-image:var(--audio-card-background); background-size:cover; background-position:center; filter:blur(14px) brightness(.34); transform:scale(1.08); }
.audio-preview-card.has-custom-background:after { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg,rgba(3,12,18,.25),rgba(3,12,18,.72)); }
.audio-preview-card b { font-size:15px; max-width:92%; }
@media (max-width:700px) { .audio-card-info { flex-direction:column; } .audio-card-info b { white-space:normal; } }

.audio-card-symbol { width:96px; height:96px; object-fit:contain; filter:drop-shadow(0 18px 34px rgba(0,0,0,.3)); }

/* V1.4.5 — watermark AutoStatus kecil pada preview Kartu Rekaman */
.audio-card-watermark { position:absolute; left:50%; transform:translateX(-50%); bottom:18px; white-space:nowrap; color:rgba(255,255,255,.62); font-size:10px; font-weight:700; letter-spacing:.4px; text-shadow:0 1px 3px rgba(0,0,0,.7); }

/* V1.4.4 — ASAR Asset Hotfix: tidak mengubah desain Kartu Rekaman. */

.series-progress { color:#7ff0ae !important; font-weight:700; }

/* V1.5.0 — Trial, Pro Online & Update Center */
.license-top-badge{display:flex;align-items:center;gap:8px;max-width:210px;padding:8px 12px;border:1px solid var(--border);border-radius:14px;background:rgba(16,39,56,.92);color:var(--text);cursor:pointer;text-align:left}.license-top-badge span{font-size:10px;font-weight:900;letter-spacing:1.2px;padding:4px 7px;border-radius:999px;background:#61491c;color:#ffd987}.license-top-badge b{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.license-top-badge.pro span{background:#12513b;color:#8ef1be}.license-top-badge.expired span,.license-top-badge.clock_error span{background:#5d2431;color:#ffc3cc}.license-notice{display:flex;justify-content:space-between;align-items:center;gap:16px;margin:18px 0;padding:15px 18px;border:1px solid #5a4826;border-radius:16px;background:linear-gradient(120deg,rgba(89,65,22,.35),rgba(16,38,55,.75))}.license-notice div{display:grid;gap:3px}.license-notice span{color:var(--muted);font-size:13px}.license-notice.pro{border-color:#245b48;background:linear-gradient(120deg,rgba(18,76,55,.35),rgba(16,38,55,.75))}.license-notice.expired,.license-notice.clock_error{border-color:#713141;background:linear-gradient(120deg,rgba(99,32,47,.4),rgba(16,38,55,.75))}.license-hero{display:flex;align-items:center;gap:20px;background:linear-gradient(135deg,rgba(17,53,70,.96),rgba(10,29,43,.96))}.license-hero h2{margin:4px 0}.license-hero p{color:var(--muted)}.license-orb{display:grid;place-items:center;width:70px;height:70px;flex:0 0 70px;border-radius:22px;background:linear-gradient(145deg,#25d77f,#0b8a61);color:#05291b;font-size:28px;box-shadow:0 12px 35px rgba(39,209,124,.18)}.license-mode{margin-left:auto;padding:8px 12px;border-radius:999px;font-size:11px;font-weight:900;letter-spacing:1px;background:#674e1c;color:#ffe097}.license-mode.pro{background:#12513b;color:#90f4c1}.license-mode.expired,.license-mode.clock_error{background:#622735;color:#ffc6cf}.license-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:18px;margin-top:18px}.license-detail-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:20px}.license-detail-grid>div,.update-version-card>div{padding:14px;border:1px solid var(--border);border-radius:14px;background:rgba(6,21,32,.55)}.license-detail-grid span,.update-version-card span,.license-device-box span{display:block;color:var(--muted);font-size:11px;margin-bottom:5px}.license-detail-grid b,.update-version-card b{font-size:15px}.license-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}.danger-outline{border-color:#713141!important;color:#ffc3cc!important}.license-device-box{margin-top:16px;padding:14px;border:1px dashed var(--border);border-radius:14px;background:rgba(6,21,32,.45)}.license-device-box code{display:block;color:#8deab9;word-break:break-all;margin-bottom:5px}.license-device-box small{color:var(--muted)}.update-version-card{display:grid;grid-template-columns:1fr 1fr;gap:12px}.update-notes{min-height:120px;margin-top:14px;padding:14px;border:1px solid var(--border);border-radius:14px;background:rgba(5,19,29,.65);color:var(--muted);white-space:pre-wrap}.update-progress-wrap{display:flex;align-items:center;gap:10px;margin-top:14px}.update-progress{flex:1;height:9px;overflow:hidden;border-radius:99px;background:#071825;border:1px solid var(--border)}.update-progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,#21c873,#58e39c);transition:width .25s}.update-progress-wrap span{font-size:12px;color:var(--muted);min-width:110px;text-align:right}.update-warning{margin-top:16px}.plan-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:18px}.plan-card{padding:22px;border:1px solid var(--border);border-radius:20px;background:linear-gradient(145deg,rgba(14,36,52,.94),rgba(8,25,38,.94))}.plan-card>span{display:inline-block;padding:5px 9px;border-radius:99px;background:#654c1d;color:#ffdc8b;font-size:10px;font-weight:900;letter-spacing:1.2px}.plan-card.pro>span{background:#12513b;color:#8ff2be}.plan-card h3{font-size:22px;margin:10px 0 5px}.plan-card p,.plan-card li{color:var(--muted)}.plan-card ul{padding-left:18px;margin-bottom:0}.status-tag.failed{background:rgba(126,38,55,.55);color:#ffc4ce}.btn:disabled{opacity:.48;cursor:not-allowed}
@media(max-width:1050px){.license-grid{grid-template-columns:1fr}.license-detail-grid{grid-template-columns:1fr 1fr}.license-top-badge{display:none}}@media(max-width:680px){.license-hero{align-items:flex-start;flex-wrap:wrap}.license-mode{margin-left:0}.license-detail-grid,.plan-grid,.update-version-card{grid-template-columns:1fr}.license-actions .btn{flex:1 1 150px}}