:root {
  --navy: #0b1f3a;
  --navy-2: #102b50;
  --blue: #1769d2;
  --blue-2: #2489ee;
  --cyan: #1eb4d7;
  --ink: #10233f;
  --muted: #6f7f94;
  --line: #dfe7f1;
  --soft: #f3f7fc;
  --white: #fff;
  --green: #1aa879;
  --red: #d84242;
  --shadow: 0 18px 50px rgba(27, 60, 102, .10);
  --radius: 20px;
}

* { box-sizing: border-box; }
html { min-height: 100%; }
body { margin: 0; color: var(--ink); background: #f5f8fc; font-family: Tahoma, Arial, sans-serif; }
body.modal-open { overflow: hidden; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .55; }
input, select, textarea { width: 100%; border: 1px solid var(--line); border-radius: 12px; background: #fff; color: var(--ink); min-height: 46px; padding: 0 13px; outline: none; transition: .2s; }
input:focus, select:focus, textarea:focus { border-color: #74aeee; box-shadow: 0 0 0 4px rgba(36, 137, 238, .10); }
.is-hidden { display: none !important; }
.subscription-locked [data-view="designer"],.subscription-locked [data-view="quotas"],.subscription-locked [data-view="library"],.subscription-locked [data-view="designs"],.subscription-locked [data-go="designer"] { display: none !important; }
.eyebrow { color: var(--blue); font-weight: 700; font-size: 12px; letter-spacing: .04em; }
.brand-lockup { display: flex; align-items: center; gap: 11px; }
.brand-lockup strong { display: block; color: #fff; font-size: 18px; letter-spacing: .03em; }
.brand-lockup small { display: block; color: #9db6d4; font-size: 10px; margin-top: 2px; letter-spacing: .08em; }
.brand-mark { position: relative; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 15px; overflow: hidden; color: white; background: linear-gradient(145deg, #29a5f2, #0f56bd); box-shadow: 0 10px 24px rgba(16, 98, 202, .28); }
.brand-mark b { font-size: 17px; position: relative; z-index: 2; }
.brand-mark i { position: absolute; border: 2px solid rgba(255,255,255,.35); border-radius: 50%; width: 44px; height: 44px; left: -22px; top: 3px; }
.brand-mark i:nth-child(2) { width: 32px; height: 32px; top: 9px; }
.brand-mark i:nth-child(3) { width: 20px; height: 20px; top: 15px; }
.primary-button, .soft-button, .ghost-button { border: 0; border-radius: 12px; min-height: 44px; padding: 0 18px; display: inline-flex; align-items: center; justify-content: center; gap: 14px; font-weight: 700; transition: .2s; }
.primary-button { color: white; background: linear-gradient(135deg, var(--blue), var(--blue-2)); box-shadow: 0 10px 20px rgba(23, 105, 210, .20); }
.primary-button:hover { transform: translateY(-1px); box-shadow: 0 13px 25px rgba(23, 105, 210, .27); }
.soft-button { color: var(--blue); background: #eaf3ff; border: 1px solid #d6e7fb; }
.soft-button:hover { background: #deedff; }
.ghost-button { background: white; color: var(--muted); border: 1px solid var(--line); }
.full-button { width: 100%; }
.text-button { border: 0; color: var(--blue); background: none; font-weight: 700; font-size: 12px; }
.field-label { display: block; margin: 13px 0 7px; font-weight: 700; font-size: 12px; color: #41546d; }
.field-label small { color: var(--muted); font-weight: 400; }
.form-error { margin: 13px 0; padding: 11px 13px; border-radius: 10px; color: #a32626; background: #fff0f0; border: 1px solid #ffd3d3; font-size: 12px; }

/* Login */
.login-page { min-height: 100vh; background: #fff; }
.login-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(420px, .85fr); direction: ltr; }
.login-brand, .login-panel { direction: rtl; }
.login-brand { position: relative; overflow: hidden; padding: 58px 70px; color: white; background: radial-gradient(circle at 23% 15%, rgba(36,137,238,.26), transparent 30%), linear-gradient(150deg, #07162a 0%, #0b2a51 52%, #0b4b83 100%); }
.login-brand::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 46px 46px; mask-image: linear-gradient(to bottom, #000, transparent 82%); }
.login-brand::after { content: ""; position: absolute; width: 520px; height: 520px; border: 1px solid rgba(76, 179, 255, .12); border-radius: 50%; bottom: -280px; left: -130px; box-shadow: 0 0 0 70px rgba(48,145,222,.04), 0 0 0 140px rgba(48,145,222,.025); }
.brand-lockup-large { position: relative; z-index: 2; }
.login-copy { position: relative; z-index: 2; margin-top: 88px; max-width: 620px; }
.login-copy h1 { font-size: clamp(40px, 5vw, 72px); line-height: 1.12; margin: 15px 0 23px; letter-spacing: -.04em; }
.login-copy h1 em { color: #6ecaff; font-style: normal; }
.login-copy p { color: #c1d2e6; font-size: 17px; line-height: 1.9; max-width: 520px; }
.feature-row { position: relative; z-index: 2; display: flex; gap: 8px; margin-top: 30px; direction: ltr; justify-content: flex-end; }
.feature-row span { border: 1px solid rgba(255,255,255,.13); background: rgba(255,255,255,.06); color: #bcd4ea; padding: 8px 13px; border-radius: 9px; font-size: 11px; }
.login-art { position: absolute; width: 410px; height: 300px; left: 4vw; bottom: 3vh; opacity: .93; }
.float-card { position: absolute; width: 330px; height: 202px; border-radius: 19px; box-shadow: 0 30px 60px rgba(0,0,0,.28); }
.float-card-back { background: linear-gradient(150deg, #1664bd, #75d9ff); transform: rotate(10deg); left: 10px; top: 28px; opacity: .43; }
.float-card-front { background: linear-gradient(135deg, rgba(255,255,255,.98), rgba(235,247,255,.96)); left: 45px; top: 7px; transform: rotate(-5deg); padding: 23px; color: #103158; direction: rtl; }
.float-card-front::after { content: ""; position: absolute; width: 120px; height: 120px; border-radius: 50%; background: radial-gradient(circle, rgba(30,180,215,.22), transparent 68%); left: -30px; bottom: -25px; }
.mini-logo { font-size: 19px; font-weight: 700; color: #67809e; margin-bottom: 16px; direction: ltr; }
.mini-logo b { color: #1664bd; }
.mini-field { background: white; border: 1px solid #cde0f3; border-radius: 10px; padding: 9px 14px; margin: 9px 0; box-shadow: 0 4px 9px rgba(21,81,135,.07); text-align: center; font-size: 14px; letter-spacing: .14em; }
.float-card-front small { display: block; margin-top: 13px; color: #2376c5; }
.login-panel { display: grid; place-items: center; padding: 40px; background: linear-gradient(180deg, #fff, #f7faff); }
.mobile-brand { display: none; }
.login-box { width: min(420px, 100%); }
.login-heading { margin-bottom: 28px; }
.login-heading p { color: var(--muted); line-height: 1.7; margin: 8px 0 0; font-size: 13px; }
.login-heading #form-kicker { color: var(--blue); font-weight: 700; display: inline; }
.login-heading h2 { font-size: 32px; margin: 10px 0 0; }
.status-dot { display: inline-block; width: 8px; height: 8px; background: var(--green); box-shadow: 0 0 0 5px rgba(26,168,121,.11); border-radius: 50%; margin-left: 10px; }
.input-wrap { position: relative; }
.input-wrap input { padding-right: 43px; padding-left: 62px; }
.input-icon { position: absolute; right: 14px; top: 14px; width: 19px; text-align: center; color: #7690ad; z-index: 2; font-size: 12px; }
.password-toggle { position: absolute; left: 8px; top: 8px; border: 0; background: #f1f6fb; color: #58728f; border-radius: 8px; height: 30px; font-size: 10px; }
.login-box .primary-button { margin-top: 20px; min-height: 52px; }
.login-note { text-align: center; color: #8c99a9; font-size: 10px; margin-top: 20px; }

/* App shell */
.app-page { min-height: 100vh; }
.sidebar { position: fixed; right: 0; top: 0; bottom: 0; width: 238px; z-index: 50; display: flex; flex-direction: column; padding: 20px 13px 14px; color: white; background: linear-gradient(180deg, #081a31, #0c2849 65%, #0b3459); box-shadow: -10px 0 35px rgba(9,31,60,.08); }
.sidebar::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .23; background: radial-gradient(circle at 100% 0, #258be0, transparent 32%); }
.sidebar > * { position: relative; z-index: 1; }
.sidebar-brand { padding: 2px 8px 24px; border-bottom: 1px solid rgba(255,255,255,.08); }
.main-nav { overflow-y: auto; scrollbar-width: thin; flex: 1; padding: 12px 0; }
.nav-label { color: #6683a3; font-size: 10px; font-weight: 700; margin: 18px 13px 8px; }
.nav-item { width: 100%; min-height: 47px; border: 0; border-radius: 12px; padding: 0 13px; margin: 3px 0; display: flex; align-items: center; gap: 12px; background: transparent; color: #b8cae0; text-align: right; font-size: 13px; }
.nav-item:hover { color: white; background: rgba(255,255,255,.055); }
.nav-item.active { color: white; background: linear-gradient(90deg, rgba(38,137,238,.82), rgba(27,102,190,.68)); box-shadow: 0 10px 20px rgba(0,0,0,.13); }
.nav-icon { width: 25px; height: 25px; border-radius: 8px; display: grid; place-items: center; color: #80b8ec; background: rgba(255,255,255,.045); font-size: 15px; }
.nav-item.active .nav-icon { color: white; background: rgba(255,255,255,.12); }
.nav-badge { margin-right: auto; background: #fff; color: var(--blue); padding: 3px 6px; border-radius: 6px; font-size: 8px; }
.sidebar-user { display: flex; align-items: center; gap: 10px; padding: 13px 8px 2px; border-top: 1px solid rgba(255,255,255,.08); }
.avatar { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 11px; color: #fff; background: linear-gradient(135deg, #2196ed, #1bc0da); font-weight: 700; }
.sidebar-user strong, .sidebar-user small { display: block; }
.sidebar-user strong { font-size: 11px; }
.sidebar-user small { color: #6f8cac; font-size: 8px; margin-top: 3px; }
.sidebar-user button { margin-right: auto; color: #8ba4bf; background: transparent; border: 0; font-size: 19px; }
.app-shell { margin-right: 238px; min-height: 100vh; }
.topbar { height: 82px; position: sticky; top: 0; z-index: 40; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 0 32px; background: rgba(255,255,255,.91); backdrop-filter: blur(12px); border-bottom: 1px solid #e5ebf3; }
.menu-button { display: none; border: 0; background: #eff5fb; border-radius: 10px; width: 42px; height: 42px; }
.topbar-title span { color: #8b99aa; font-size: 10px; }
.topbar-title h1 { margin: 4px 0 0; font-size: 20px; }
.topbar-actions { display: flex; align-items: center; gap: 13px; }
.server-status { display: flex; align-items: center; gap: 7px; color: #668097; font-size: 10px; border-left: 1px solid var(--line); padding-left: 15px; }
.server-status i, .live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(26,168,121,.11); }
.content { padding: 27px 30px 50px; max-width: 1650px; margin: auto; }
.view { display: none; animation: fadeIn .25s ease; }
.view.active { display: block; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } }
.welcome-card { min-height: 270px; border-radius: 24px; padding: 38px 45px; color: white; display: flex; justify-content: space-between; overflow: hidden; position: relative; background: radial-gradient(circle at 9% 0, rgba(49,157,237,.35), transparent 30%), linear-gradient(135deg, #0a2341, #0d467b); box-shadow: var(--shadow); }
.welcome-card::before { content: ""; position: absolute; inset: 0; opacity: .2; background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 32px 32px; }
.welcome-card > div { position: relative; z-index: 1; }
.welcome-card .eyebrow { color: #73d5ff; }
.welcome-card h2 { margin: 11px 0 10px; font-size: 36px; line-height: 1.25; }
.welcome-card h2 em { color: #70d2ff; font-style: normal; }
.welcome-card p { color: #bed0e3; font-size: 13px; margin-bottom: 24px; }
.compact-welcome { min-height: 230px; padding-block: 32px; }
.welcome-preview { width: 340px; display: grid; place-items: center; }
.preview-paper { width: 195px; height: 252px; padding: 13px; border-radius: 8px; background: #fff; transform: rotate(-5deg); display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(3,1fr); gap: 6px; box-shadow: 0 28px 60px rgba(0,0,0,.30); }
.paper-card { border-radius: 4px; background: linear-gradient(160deg, #dceffd, #fff); border: 1px solid #b8d8ef; position: relative; }
.paper-card::before, .paper-card::after { content: ""; position: absolute; right: 8px; left: 8px; height: 4px; border-radius: 5px; background: #b7d6ec; }
.paper-card::before { top: 38%; }.paper-card::after { top: 57%; }
.stats-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; margin: 19px 0; }
.subscription-strip { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; margin: 18px 0 0; overflow: hidden; border: 1px solid #e3eaf3; border-radius: 17px; background: #e3eaf3; box-shadow: 0 8px 25px rgba(35,66,106,.045); }
.subscription-strip article { min-height: 84px; display: flex; align-items: center; gap: 12px; padding: 15px 17px; background: #fff; }
.subscription-strip small, .subscription-strip strong { display: block; }.subscription-strip small { color: #8998a9; font-size: 9px; }.subscription-strip strong { margin-top: 5px; font-size: 13px; }.subscription-strip strong b { font-size: 20px; }
.subscription-icon { width: 37px; height: 37px; flex: 0 0 37px; display: grid; place-items: center; border-radius: 11px; font-weight: 700; }.subscription-icon.success { color: #13845f; background: #e7f8f1; }.subscription-icon.blue { color: #1769d2; background: #e7f1ff; }.subscription-icon.cyan { color: #139ab9; background: #e4f9fd; }.subscription-icon.violet { color: #7652ca; background: #f0eaff; }
.subscription-value.active { color: #14845f; }.subscription-value.paused,.subscription-value.scheduled { color: #bd7a0d; }.subscription-value.expired { color: var(--red); }
.line-code-guard { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 16px; padding: 14px 16px; border: 1px solid #bde9dc; border-radius: 14px; color: #2e6f5e; background: #effcf7; }.line-code-guard b, .line-code-guard span { display: block; }.line-code-guard b { font-size: 11px; }.line-code-guard > div > span { margin-top: 4px; color: #6c8f85; font-size: 9px; }
.line-code-badges { display: flex; flex-wrap: wrap; gap: 6px; }.line-code-badges > span { display: inline-flex; align-items: center; gap: 6px; min-height: 31px; padding: 5px 9px; border-radius: 9px; color: #1769d2; background: #eaf3ff; border: 1px solid #d1e5fb; direction: ltr; }.line-code-badges b { font-size: 12px; letter-spacing: .08em; }.line-code-badges small { color: #71879d; font-size: 8px; direction: rtl; }.line-code-badges em { color: #9a5d16; font-size: 9px; font-style: normal; }
.quota-code-row { display: flex; align-items: center; gap: 6px; margin-top: 13px; }.quota-code-row small { color: #8b99aa; font-size: 8px; }.quota-code-row b { padding: 4px 7px; border-radius: 7px; color: #1769d2; background: #edf5ff; font-size: 9px; }
.stat-card { background: #fff; border: 1px solid #e6edf5; border-radius: 17px; padding: 20px; display: flex; align-items: center; gap: 15px; box-shadow: 0 8px 25px rgba(35,66,106,.045); }
.stat-icon { width: 47px; height: 47px; border-radius: 14px; display: grid; place-items: center; font-weight: 700; font-size: 17px; }
.stat-icon.blue { color: #1769d2; background: #e7f1ff; }.stat-icon.cyan { color: #139ab9; background: #e4f9fd; }.stat-icon.violet { color: #7652ca; background: #f0eaff; }.stat-icon.green { color: #15956c; background: #e6f8f1; }
.stat-card small, .stat-card strong, .stat-card em { display: block; }
.stat-card small { color: var(--muted); font-size: 10px; }
.stat-card strong { font-size: 25px; margin: 3px 0; }
.stat-card em { color: #93a0af; font-size: 8px; font-style: normal; }
.dashboard-grid { display: grid; grid-template-columns: 1.65fr .75fr; gap: 18px; }
.panel { background: #fff; border: 1px solid #e5ecf4; border-radius: var(--radius); padding: 22px; box-shadow: 0 9px 30px rgba(30,62,101,.045); }
.panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.panel-heading span { color: #8c99aa; font-size: 9px; }
.panel-heading h3 { margin: 4px 0 0; font-size: 16px; }
.table-wrap { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; font-size: 11px; }
.data-table th { color: #8593a3; text-align: right; padding: 10px; font-size: 9px; border-bottom: 1px solid var(--line); }
.data-table td { padding: 13px 10px; border-bottom: 1px solid #edf1f6; }
.data-table tr:last-child td { border-bottom: 0; }
.file-chip { display: flex; align-items: center; gap: 9px; }
.file-chip b { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px; background: #edf5ff; color: var(--blue); font-size: 9px; }
.file-chip strong, .file-chip small { display: block; }.file-chip small { color: #9aa6b4; margin-top: 3px; font-size: 8px; }
.count-pill { background: #eef7ff; color: var(--blue); padding: 5px 8px; border-radius: 8px; font-weight: 700; }
.quick-steps { margin: 0; padding: 0; list-style: none; }
.quick-steps li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid #edf1f6; }
.quick-steps li:last-child { border: 0; }
.quick-steps li > b { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 10px; color: var(--blue); background: #edf5ff; font-size: 11px; }
.quick-steps strong, .quick-steps small { display: block; }.quick-steps strong { font-size: 11px; }.quick-steps small { color: #92a0af; font-size: 8px; margin-top: 4px; }

/* Common pages */
.section-heading { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin-bottom: 23px; }
.section-heading h2 { margin: 8px 0 5px; font-size: 27px; }.section-heading p { margin: 0; color: var(--muted); font-size: 12px; }
.section-heading.compact { margin-bottom: 14px; }.section-heading.compact h2 { font-size: 23px; }
.item-grid, .media-grid, .template-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
.media-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
.item-card, .media-card { border: 1px solid #e1e9f2; background: #fff; border-radius: 17px; overflow: hidden; box-shadow: 0 9px 30px rgba(30,62,101,.045); }
.item-card { padding: 19px; }
.item-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.item-card h3 { margin: 5px 0 8px; font-size: 14px; }.item-card p { color: var(--muted); margin: 0; font-size: 10px; line-height: 1.7; }
.item-type { color: var(--blue); background: #edf5ff; border-radius: 8px; padding: 5px 8px; font-size: 8px; text-transform: uppercase; }
.item-stats { display: flex; gap: 9px; margin: 17px 0; }.item-stats span { flex: 1; padding: 10px; border-radius: 10px; background: #f6f9fc; }.item-stats small, .item-stats b { display: block; }.item-stats small { color: #91a0b0; font-size: 8px; }.item-stats b { font-size: 13px; margin-top: 3px; }
.card-actions { display: flex; gap: 8px; border-top: 1px solid #edf1f6; padding-top: 13px; }.card-actions button { flex: 1; min-height: 36px; border-radius: 9px; border: 0; background: #edf5ff; color: var(--blue); font-size: 10px; font-weight: 700; }.card-actions button.danger { flex: 0 0 39px; color: var(--red); background: #fff0f0; }
.media-preview { height: 150px; display: grid; place-items: center; padding: 18px; background: #edf3f9; background-image: linear-gradient(45deg,#e2e9f1 25%,transparent 25%),linear-gradient(-45deg,#e2e9f1 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#e2e9f1 75%),linear-gradient(-45deg,transparent 75%,#e2e9f1 75%); background-size: 18px 18px; background-position: 0 0,0 9px,9px -9px,-9px 0; }
.media-preview img { max-width: 100%; max-height: 100%; object-fit: contain; filter: drop-shadow(0 7px 10px rgba(22,55,90,.13)); }
.template-grid .media-preview { height: 210px; }.template-grid .media-preview img { width: 100%; height: 100%; object-fit: contain; }
.media-info { padding: 14px; }.media-info h3 { margin: 0 0 10px; font-size: 12px; }.media-meta { display: flex; justify-content: space-between; align-items: center; color: #8b99aa; font-size: 8px; }.media-meta button { border: 0; color: var(--red); background: #fff0f0; border-radius: 7px; padding: 5px 7px; }
.empty-box { grid-column: 1/-1; border: 1px dashed #cbd8e7; border-radius: 18px; padding: 45px 20px; text-align: center; color: #8b9aab; background: #fbfdff; }.empty-box b { display: block; color: #526980; margin-bottom: 6px; }
.two-panel-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 18px; }.form-panel .primary-button, .form-panel .soft-button { margin-top: 18px; width: 100%; }.form-panel input[type="color"] { padding: 6px; }
.category-list { display: grid; gap: 8px; }.category-item { display: flex; align-items: center; gap: 10px; padding: 12px; border: 1px solid #e8eef5; border-radius: 12px; }.category-item i { width: 11px; height: 30px; border-radius: 6px; }.category-item strong { font-size: 11px; }.category-item small { margin-right: auto; color: #96a3b2; }.category-item button { border: 0; color: var(--red); background: #fff0f0; border-radius: 7px; width: 29px; height: 29px; }
.settings-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 18px; align-items: start; }
.account-summary dl { margin: 0 0 15px; }.account-summary dl div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid #edf1f6; }.account-summary dt { color: #7b8b9d; font-size: 9px; }.account-summary dd { margin: 0; font-size: 10px; font-weight: 700; }
.user-policy-note { display: flex; gap: 12px; margin-bottom: 16px; padding: 13px 15px; border: 1px solid #c9e3ff; border-radius: 13px; color: #5b7590; background: #f1f7ff; font-size: 10px; line-height: 1.7; }.user-policy-note b { color: #1769d2; white-space: nowrap; }
.users-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 15px; }.user-card { padding: 18px; border: 1px solid #e1e9f2; border-radius: 17px; background: #fff; box-shadow: 0 9px 30px rgba(30,62,101,.045); }.user-card-head { display: flex; align-items: center; gap: 10px; }.user-card-head h3 { margin: 0 0 4px; font-size: 13px; }.user-card-head p { margin: 0; color: #8999aa; font-size: 9px; direction: ltr; text-align: right; }.user-status { margin-right: auto; padding: 5px 8px; border-radius: 8px; font-size: 8px; font-style: normal; }.user-status.active { color: #14845f; background: #e8f8f2; }.user-status.paused,.user-status.scheduled { color: #a66a0b; background: #fff5dc; }.user-status.expired { color: #b43838; background: #fff0f0; }.user-subscription { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin: 14px 0; }.user-subscription span { padding: 9px; border-radius: 9px; background: #f6f9fc; }.user-subscription small,.user-subscription b { display:block}.user-subscription small { color:#8a99a9;font-size:8px}.user-subscription b { margin-top:4px;font-size:10px}.user-codes { min-height: 72px; padding: 10px; border-radius: 10px; background: #fbfdff; border: 1px solid #e8eef5; }.user-codes > small { display: block; margin-bottom: 7px; color: #8292a3; font-size: 8px; }.user-stats { display: flex; flex-wrap: wrap; gap: 5px; margin: 12px 0; }.user-stats span { color: #718399; background: #f1f5f9; border-radius: 7px; padding: 4px 7px; font-size: 8px; }
.line-code-editor-head { display: flex; align-items: end; justify-content: space-between; gap: 10px; margin-top: 14px; }.line-code-editor-head small { color: #8393a4; font-size: 8px; }.line-code-editor-head .soft-button { min-height: 34px; padding-inline: 11px; font-size: 9px; }.line-code-editor { display: grid; gap: 7px; margin-top: 8px; }.line-code-edit-row { display: grid; grid-template-columns: 120px 1fr 34px; gap: 7px; }.line-code-edit-row button { border: 0; border-radius: 9px; color: var(--red); background: #fff0f0; font-size: 18px; }.line-code-rule-box { margin-top: 10px; padding: 10px; border-radius: 10px; color: #87566a; background: #fff4f7; border: 1px solid #f5cfda; font-size: 9px; }
.library-tabs { display: flex; gap: 7px; padding: 6px; margin-bottom: 16px; border: 1px solid var(--line); border-radius: 15px; background: #fff; width: fit-content; }
.library-tabs button { min-height: 40px; padding: 0 20px; border: 0; border-radius: 10px; color: #718299; background: transparent; font-weight: 700; font-size: 11px; }.library-tabs button.active { color: #fff; background: linear-gradient(135deg,var(--blue),var(--blue-2)); box-shadow: 0 7px 16px rgba(23,105,210,.18); }
.library-pane { display: none; padding: 21px; border: 1px solid #e3eaf3; border-radius: 19px; background: #fff; box-shadow: 0 9px 30px rgba(30,62,101,.045); }.library-pane.active { display: block; animation: fadeIn .2s ease; }
.library-pane-head { display: flex; justify-content: space-between; align-items: center; gap: 15px; margin-bottom: 19px; }.library-pane-head h3 { margin: 0 0 5px; font-size: 16px; }.library-pane-head p { margin: 0; color: var(--muted); font-size: 10px; }

/* Wizard */
.wizard-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 23px; }
.wizard-steps { display: flex; align-items: center; direction: rtl; background: white; border: 1px solid var(--line); padding: 8px; border-radius: 16px; }
.wizard-steps button { display: flex; align-items: center; gap: 8px; border: 0; background: none; color: #8492a2; padding: 7px 11px; font-size: 10px; }
.wizard-steps button b { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 9px; background: #eff3f7; color: #8393a5; }
.wizard-steps button.active { color: var(--blue); font-weight: 700; }.wizard-steps button.active b { color: #fff; background: var(--blue); box-shadow: 0 5px 12px rgba(23,105,210,.25); }
.wizard-steps i { width: 37px; height: 1px; background: #dce5ef; }
.wizard-page { display: none; }.wizard-page.active { display: block; animation: fadeIn .25s ease; }
.studio-tip { margin: 0 0 13px; padding: 12px 15px; border: 1px solid #bde9dc; border-radius: 12px; color: #2e6f5e; background: #effcf7; font-size: 11px; line-height: 1.7; }
.quota-select-layout { display: grid; grid-template-columns: 1fr 60px 1fr; align-items: stretch; min-height: 360px; }
.select-list { max-height: 390px; overflow-y: auto; display: grid; gap: 8px; }.select-quota { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 11px; border: 1px solid #e3eaf3; border-radius: 13px; padding: 12px; background: #fff; text-align: right; }.select-quota:hover { border-color: #a8c9ec; }.select-quota.selected { background: #edf6ff; border-color: #63a2e5; box-shadow: 0 0 0 3px rgba(36,137,238,.08); }.select-quota > b { width: 39px; height: 39px; display: grid; place-items: center; border-radius: 10px; color: var(--blue); background: #edf5ff; font-size: 9px; }.select-quota strong, .select-quota small { display: block; }.select-quota strong { font-size: 11px; }.select-quota small { color: #91a0b0; font-size: 8px; margin-top: 4px; }.select-quota em { font-style: normal; font-weight: 700; color: var(--blue); font-size: 10px; }
.or-divider { display: grid; place-items: center; position: relative; }.or-divider::before { content: ""; width: 1px; height: 100%; background: var(--line); position: absolute; }.or-divider span { position: relative; z-index: 1; width: 33px; height: 33px; display: grid; place-items: center; border-radius: 50%; color: #8a98a8; background: #f5f8fc; border: 1px solid var(--line); font-size: 9px; }
.upload-card { min-height: 360px; border: 2px dashed #b9d1eb; border-radius: 20px; background: linear-gradient(180deg,#fbfdff,#f1f7fd); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; position: relative; transition: .2s; }
.upload-card:hover, .upload-card.dragging { border-color: var(--blue-2); background: #eef7ff; }.upload-card input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }.upload-card h3 { font-size: 16px; margin: 14px 0 7px; }.upload-card p { color: #718399; font-size: 11px; margin: 0; }.upload-card small { color: #a0abba; margin-top: 9px; font-size: 8px; }.upload-icon { width: 58px; height: 58px; border-radius: 17px; display: grid; place-items: center; color: var(--blue); background: white; box-shadow: 0 10px 28px rgba(30,90,148,.13); font-size: 26px; }
.wizard-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 20px; padding-top: 17px; border-top: 1px solid var(--line); }
.designer-grid { display: grid; grid-template-columns: minmax(300px,380px) minmax(500px,1fr); direction: rtl; gap: 18px; align-items: stretch; }
.control-panel { border: 1px solid #e3eaf3; border-radius: 19px; background: #fff; padding: 20px; max-height: calc(100vh - 190px); overflow-y: auto; box-shadow: 0 10px 35px rgba(27,61,101,.06); }
.control-title span { color: #8c99aa; font-size: 9px; }.control-title h3 { margin: 4px 0 14px; font-size: 15px; }.control-title.small h3 { font-size: 13px; }
.two-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: 17px 0 10px; padding: 12px; border-radius: 12px; background: #f6f9fc; }.toggle-row strong, .toggle-row small { display: block; }.toggle-row strong { font-size: 10px; }.toggle-row small { color: #8d9bab; font-size: 8px; margin-top: 3px; }
.switch { position: relative; width: 42px; height: 24px; flex: 0 0 42px; }.switch input { opacity: 0; position: absolute; }.switch span { position: absolute; inset: 0; background: #c9d3df; border-radius: 20px; transition: .2s; }.switch span::after { content: ""; position: absolute; width: 18px; height: 18px; right: 3px; top: 3px; background: white; border-radius: 50%; box-shadow: 0 2px 5px rgba(0,0,0,.17); transition: .2s; }.switch input:checked + span { background: var(--blue); }.switch input:checked + span::after { transform: translateX(-18px); }
.number-stepper { display: flex; direction: ltr; height: 42px; }.number-stepper input { text-align: center; border-radius: 0; min-height: 42px; }.number-stepper button { width: 45px; border: 1px solid var(--line); background: #f5f8fc; color: var(--blue); font-size: 18px; }.number-stepper button:first-child { border-radius: 10px 0 0 10px; }.number-stepper button:last-child { border-radius: 0 10px 10px 0; }
.code-detection { margin-top: 7px; color: #8190a1; font-size: 8px; }.code-detection b { color: var(--blue); letter-spacing: .12em; }
.reference-layout-note { display: flex; flex-direction: column; gap: 4px; margin-top: 12px; padding: 11px 12px; border: 1px solid #ffd7df; border-radius: 11px; color: #7f1730; background: #fff4f6; }
.reference-layout-note b { font-size: 10px; }.reference-layout-note span { color: #9d5365; font-size: 8px; line-height: 1.6; }
.control-divider { height: 1px; background: var(--line); margin: 18px 0; }
.color-field { height: 44px; border: 1px solid var(--line); border-radius: 11px; display: flex; align-items: center; padding: 5px; direction: ltr; }.color-field input { width: 35px; min-height: 32px; height: 32px; padding: 0; border: 0; }.color-field span { color: #76879a; font-size: 9px; margin-left: 8px; }
.range-label { display: flex; justify-content: space-between; align-items: center; margin: 14px 0 5px; color: #566a80; font-size: 9px; }.range-label b { color: var(--blue); background: #edf5ff; border-radius: 6px; padding: 3px 6px; }
input[type="range"] { min-height: 20px; height: 20px; padding: 0; border: 0; box-shadow: none; accent-color: var(--blue); }
.advanced-settings { margin-top: 17px; border: 1px solid var(--line); border-radius: 11px; padding: 10px; }.advanced-settings summary { color: var(--blue); font-size: 10px; font-weight: 700; }
.text-style-card { margin-top: 10px; padding: 11px; border: 1px solid #e4ebf3; border-radius: 12px; background: #f9fbfd; }.text-style-card > strong { font-size: 11px; }
.position-summary { display: grid; gap: 6px; margin: 12px 0; }.position-summary span { display: flex; justify-content: space-between; padding: 8px 10px; border-radius: 9px; color: #718299; background: #f5f8fc; font-size: 9px; }.position-summary b { color: var(--blue); direction: ltr; }
.pdf-structure-note { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; padding: 11px 12px; border: 1px solid #c9e3ff; border-radius: 11px; color: #16518c; background: #f0f7ff; }.pdf-structure-note b { font-size: 10px; }.pdf-structure-note span { color: #5c7895; font-size: 8px; line-height: 1.7; }
.preview-stage { direction: rtl; border-radius: 21px; border: 1px solid #dbe5ef; min-height: 620px; display: flex; flex-direction: column; overflow: hidden; background: radial-gradient(circle at 50% 38%, #fff, #edf3f8 70%); }
.preview-toolbar { display: flex; align-items: center; justify-content: space-between; padding: 16px 19px; background: rgba(255,255,255,.86); border-bottom: 1px solid #e2eaf2; }.preview-toolbar > div { display: flex; align-items: center; gap: 9px; }.preview-toolbar strong { font-size: 11px; }.preview-toolbar small { color: #8f9dac; font-size: 8px; }.preview-toolbar button { width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 9px; background: #fff; color: var(--blue); }
.card-canvas-wrap { flex: 1; min-height: 450px; display: grid; place-items: center; padding: 38px; overflow: hidden; }
.card-canvas { width: min(810px,95%); aspect-ratio: 810/513; position: relative; overflow: hidden; border-radius: 18px; background: #fff; box-shadow: 0 28px 65px rgba(30,66,105,.20); direction: ltr; container-type: inline-size; }
.card-canvas::after { content: ""; position: absolute; inset: 0; border: 1px solid rgba(40,122,200,.16); border-radius: inherit; pointer-events: none; }
.card-canvas > #card-background { width: 100%; height: 100%; object-fit: fill; display: block; pointer-events: none; user-select: none; }
.drag-item { position: absolute; z-index: 5; transform: translate(-50%,-50%); touch-action: none; user-select: none; cursor: grab; border: 1px dashed rgba(23,105,210,.72); border-radius: 7px; outline: 3px solid rgba(23,105,210,.08); }
.drag-item:hover, .drag-item:focus, .drag-item.dragging { border-color: #0f6cd0; outline-color: rgba(23,105,210,.18); }.drag-item.dragging { cursor: grabbing; box-shadow: 0 6px 18px rgba(13,72,132,.18); }
.drag-item::before { content: attr(data-label); position: absolute; right: 0; bottom: calc(100% + 5px); padding: 3px 6px; border-radius: 5px; color: #fff; background: rgba(12,70,126,.88); font: 8px Tahoma,Arial,sans-serif; letter-spacing: 0; white-space: nowrap; direction: rtl; pointer-events: none; }
.logo-drag { left: 50%; top: 17%; width: 24%; height: 20%; padding: 3px; }
.logo-drag img { width: 100%; height: 100%; object-fit: contain; display: block; filter: drop-shadow(0 4px 4px rgba(20,45,75,.10)); pointer-events: none; }
.card-number { position: absolute; z-index: 6; left: 45.16%; width: auto; max-width: 90%; min-width: 20%; padding: 5px 12px; transform: translate(-50%,-50%); text-align: center; direction: ltr; font-family: Arial, sans-serif; font-weight: 700; letter-spacing: .08em; line-height: 1; white-space: nowrap; }
.card-number.username { top: 50.3%; font-size: clamp(18px, 3.1vw, 34px); color: #910831; }.card-number.password { top: 70%; font-size: clamp(18px, 3.1vw, 34px); color: #910831; }
.drag-help { display: flex; justify-content: center; align-items: center; gap: 13px; min-height: 39px; color: #2e6f5e; background: #effcf7; border-top: 1px solid #cfeee5; font-size: 9px; }.drag-help small { color: #75978d; font-size: 8px; }
.preview-meta { display: grid; grid-template-columns: repeat(3,1fr); background: white; border-top: 1px solid #e2eaf2; }.preview-meta > div { padding: 14px 18px; border-left: 1px solid #e7edf4; }.preview-meta > div:last-child { border: 0; }.preview-meta small, .preview-meta strong { display: block; }.preview-meta small { color: #91a0b0; font-size: 8px; }.preview-meta strong { margin-top: 5px; font-size: 10px; }
.review-layout { display: grid; grid-template-columns: minmax(0,1fr) 325px; gap: 18px; align-items: start; }
.review-main { min-width: 0; }.preview-trust-note { width: min(100%,700px); margin: 0 auto 14px; padding: 12px 14px; display: flex; align-items: center; justify-content: space-between; gap: 14px; border: 1px solid #c9e3ff; border-radius: 13px; color: #54718f; background: #f1f8ff; }.preview-trust-note b,.preview-trust-note span { display: block; }.preview-trust-note b { color: #15538f; font-size: 10px; }.preview-trust-note span { margin-top: 4px; font-size: 8px; line-height: 1.7; }.preview-trust-note .soft-button { flex: 0 0 auto; min-height: 36px; padding-inline: 12px; font-size: 9px; }.a4-preview { min-height: 0; width: min(100%,560px); margin: auto; padding: 1px 1px 45px; display: grid; gap: 1px; position: relative; background: #fff; border: 1px solid #dfe7ef; box-shadow: 0 20px 50px rgba(23,56,93,.12); aspect-ratio: 210/297; overflow: hidden; cursor: zoom-in; }
.a4-preview::after { content: "Page 1"; position: absolute; bottom: 15px; left: 0; right: 0; text-align: center; color: #91102f; font: italic 10px Arial,sans-serif; }
.a4-preview-open { overflow: hidden; }.a4-preview-open::before { content: ""; position: fixed; inset: 0; z-index: 118; background: rgba(5,20,38,.82); backdrop-filter: blur(5px); }.a4-preview.a4-expanded { position: fixed; z-index: 120; left: 50%; top: 50%; width: min(92vw,calc((100vh - 32px) * .70707),700px); margin: 0; transform: translate(-50%,-50%); cursor: zoom-out; box-shadow: 0 30px 90px rgba(0,0,0,.42); }.a4-preview.a4-expanded::before { content: "اضغط على الصفحة لإغلاق المعاينة"; position: absolute; z-index: 20; top: 9px; right: 50%; transform: translateX(50%); padding: 6px 10px; border-radius: 20px; color: #fff; background: rgba(7,33,60,.82); font: 9px Tahoma,Arial,sans-serif; white-space: nowrap; }
.a4-mini-card { position: relative; overflow: hidden; border: 0; direction: ltr; }.a4-mini-card > img:first-child { width: 100%; height: 100%; object-fit: fill; display: block; }.a4-mini-card .mini-overlay { position: absolute; width: auto; max-width: 92%; text-align: center; transform: translate(-50%,-50%); font-family: Arial,sans-serif; font-weight: 700; line-height: 1; white-space: nowrap; }.a4-mini-card .mini-logo-overlay { position: absolute; height: 20%; object-fit: contain; transform: translate(-50%,-50%); }
.review-summary { position: sticky; top: 105px; text-align: center; }.success-seal { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto 13px; color: white; background: var(--green); box-shadow: 0 0 0 9px rgba(26,168,121,.09); font-size: 21px; }.review-summary h3 { margin: 0; }.review-summary > p { color: var(--muted); font-size: 10px; line-height: 1.7; }.review-summary dl { margin: 18px 0; border-top: 1px solid var(--line); }.review-summary dl div { display: flex; justify-content: space-between; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--line); }.review-summary dt { color: #7c8b9c; font-size: 9px; }.review-summary dd { margin: 0; font-size: 10px; font-weight: 700; max-width: 155px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.review-buttons { display: grid; gap: 9px; }.review-note { display: block; margin-top: 14px; color: #93a0af; font-size: 8px; line-height: 1.6; }

/* Modal & toast */
.modal { position: fixed; inset: 0; z-index: 100; display: none; place-items: center; padding: 20px; background: rgba(6,21,39,.58); backdrop-filter: blur(4px); }.modal.open { display: grid; }.modal-card { width: min(610px,96vw); max-height: 90vh; overflow: hidden; position: relative; display: flex; flex-direction: column; background: #fff; border-radius: 22px; padding: 28px; box-shadow: 0 30px 80px rgba(0,0,0,.26); }.modal-close { position: absolute; z-index: 3; left: 17px; top: 17px; border: 0; width: 34px; height: 34px; border-radius: 10px; background: #f0f4f8; color: #678; font-size: 21px; }.modal-heading { flex: 0 0 auto; }.modal-heading span { color: var(--blue); font-size: 9px; font-weight: 700; }.modal-heading h2 { margin: 6px 0; padding-left: 38px; font-size: 22px; }.modal-heading p { color: var(--muted); margin: 0 0 20px; font-size: 10px; }.modal-card #modal-body { min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 0 3px 3px; scrollbar-width: thin; scrollbar-color: #a8b5c3 transparent; }.modal-upload { min-height: 190px; }.mapping-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 9px; }.sample-table { margin-top: 14px; max-height: 210px; overflow: auto; border: 1px solid var(--line); border-radius: 11px; }.modal-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 18px; padding-bottom: 1px; }.progress-line { height: 5px; border-radius: 5px; background: #e6edf5; overflow: hidden; margin: 13px 0; }.progress-line i { display: block; width: 55%; height: 100%; background: linear-gradient(90deg,var(--blue),var(--cyan)); animation: loading 1.2s ease infinite alternate; }.loading-box { text-align: center; padding: 35px 10px; color: var(--muted); }.loading-box b { display: block; color: var(--ink); margin-bottom: 6px; }.mapping-summary { display: flex; gap: 8px; margin-bottom: 14px; }.mapping-summary span { flex: 1; background: #f4f8fc; border-radius: 10px; padding: 9px; color: #718299; font-size: 9px; }.mapping-summary b { color: var(--blue); }
.media-upload-form { min-width: 0; }.media-file-picker { min-height: 48px; display: grid; grid-template-columns: auto minmax(0,1fr); align-items: center; gap: 10px; padding: 5px; border: 1px solid var(--line); border-radius: 12px; background: #f8fbfe; direction: rtl; }.media-file-native { position: absolute !important; width: 1px !important; height: 1px !important; min-height: 0 !important; padding: 0 !important; opacity: 0; pointer-events: none; }.media-file-picker label { min-height: 36px; display: inline-flex; align-items: center; justify-content: center; padding: 0 15px; border-radius: 9px; color: #fff; background: linear-gradient(135deg,var(--blue),var(--blue-2)); font-size: 10px; font-weight: 700; cursor: pointer; white-space: nowrap; }.media-file-picker > span { min-width: 0; overflow: hidden; color: #718399; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; direction: rtl; }.media-upload-preview { width: 100%; margin-top: 14px; overflow: hidden; border: 1px solid #dce6f0; border-radius: 14px; background: #f6f9fc; }.media-upload-stage { width: 100%; height: clamp(150px,30vh,245px); display: grid; place-items: center; overflow: hidden; padding: 14px; background-color: #edf3f9; background-image: linear-gradient(45deg,#e2e9f1 25%,transparent 25%),linear-gradient(-45deg,#e2e9f1 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#e2e9f1 75%),linear-gradient(-45deg,transparent 75%,#e2e9f1 75%); background-size: 18px 18px; background-position: 0 0,0 9px,9px -9px,-9px 0; }.media-upload-preview.logo-mode .media-upload-stage { height: clamp(140px,24vh,200px); }.media-upload-stage img { display: block; width: 100%; height: 100%; min-width: 0; min-height: 0; object-fit: contain; filter: drop-shadow(0 7px 10px rgba(22,55,90,.13)); }.media-upload-details { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 11px; border-top: 1px solid #dce6f0; background: #fff; }.media-upload-details b { flex: 0 0 auto; color: #31516f; font-size: 9px; direction: ltr; }.media-upload-details span { color: #7d8da0; font-size: 8px; line-height: 1.6; text-align: left; }.media-upload-preview.has-warning { border-color: #f0c77c; }.media-upload-preview.has-warning .media-upload-details { color: #8b5a12; background: #fff9ed; }.media-upload-preview.has-warning .media-upload-details span { color: #94651f; }
.uploaded-files-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; max-height: 125px; overflow-y: auto; margin-bottom: 13px; }
.uploaded-files-summary span { display: block; min-width: 0; padding: 8px 10px; border: 1px solid #e3eaf3; border-radius: 9px; background: #fbfdff; }
.uploaded-files-summary b, .uploaded-files-summary small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.uploaded-files-summary b { color: #40566f; font-size: 9px; }.uploaded-files-summary small { color: #8e9bab; font-size: 7px; margin-top: 3px; }
.line-code-error { display: grid; gap: 5px; margin: 10px 0 14px; padding: 11px; border-radius: 10px; color: #9e3131; background: #fff5f5; border: 1px solid #ffd4d4; }.line-code-error b { font-size: 10px; }.line-code-error span,.line-code-error small { color: #9b6262; font-size: 8px; line-height: 1.7; }.validation-success { margin: 10px 0 13px; padding: 10px 12px; border-radius: 10px; color: #14785a; background: #edfaf5; border: 1px solid #c4ecdd; font-size: 9px; }
.export-confirm { text-align: center; }.confirm-icon { width: 54px; height: 54px; display: grid; place-items: center; margin: 0 auto 10px; border-radius: 50%; color: #fff; background: var(--green); box-shadow: 0 0 0 9px rgba(26,168,121,.09); font-size: 22px; }.export-confirm h3 { margin: 15px 0; }.confirm-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 7px; }.confirm-grid span { padding: 10px 7px; border-radius: 10px; background: #f4f8fc; }.confirm-grid small, .confirm-grid b { display: block; }.confirm-grid small { color: #8392a3; font-size: 8px; }.confirm-grid b { margin-top: 4px; font-size: 11px; }.pdf-layer-summary { display: grid; grid-template-columns: auto 1fr 1fr; gap: 8px; align-items: center; margin-top: 13px; padding: 11px; border: 1px solid #c9e3ff; border-radius: 11px; color: #5c7895; background: #f0f7ff; font-size: 9px; }.pdf-layer-summary b { color: #16518c; }
@keyframes loading { to { transform: translateX(-75%); } }
.toast-stack { position: fixed; top: 20px; left: 20px; z-index: 200; display: grid; gap: 8px; }.toast { min-width: 270px; max-width: 390px; padding: 13px 15px; border-radius: 12px; color: #fff; background: #153957; box-shadow: 0 15px 35px rgba(12,38,68,.24); font-size: 11px; animation: toastIn .25s ease; }.toast.error { background: #a93737; }.toast.success { background: #157c61; } @keyframes toastIn { from { opacity: 0; transform: translateY(-8px); } }

@media (max-width: 1180px) {
  .stats-grid { grid-template-columns: repeat(2,1fr); }
  .subscription-strip { grid-template-columns: repeat(2,1fr); }
  .dashboard-grid { grid-template-columns: 1fr; }
  .designer-grid { grid-template-columns: 330px minmax(420px,1fr); }
  .media-grid { grid-template-columns: repeat(3,1fr); }
  .item-grid, .template-grid { grid-template-columns: repeat(2,1fr); }
  .users-grid { grid-template-columns: repeat(2,1fr); }
}

@media (max-width: 1100px) {
  .login-shell { display: block; }.login-brand { display: none; }.login-panel { min-height: 100vh; }.mobile-brand { display: flex; margin-bottom: 45px; }.mobile-brand strong { color: var(--ink); }.mobile-brand small { color: var(--muted); }
  .sidebar { transform: translateX(105%); transition: .25s; }.sidebar.open { transform: translateX(0); }.app-shell { margin-right: 0; }.menu-button { display: grid; place-items: center; }.content { padding: 20px; }.welcome-preview { display: none; }.welcome-card { min-height: auto; }
  .designer-grid { grid-template-columns: 1fr; }.control-panel { max-height: none; }.preview-stage { min-height: 520px; }.card-canvas-wrap { min-height: 340px; padding: 22px; }
  .review-layout, .settings-grid { grid-template-columns: 1fr; }.review-summary { position: static; order: 1; width: min(100%,700px); margin-inline: auto; }.review-main { order: 2; }.quota-select-layout { grid-template-columns: 1fr; }.or-divider { height: 55px; }.or-divider::before { height: 1px; width: 100%; }.upload-card { min-height: 260px; }
}

@media (max-width: 620px) {
  .modal { padding: 9px; }.modal-card { width: 100%; max-height: calc(100dvh - 18px); padding: 20px 15px 15px; border-radius: 18px; }.modal-close { left: 12px; top: 12px; }.modal-heading h2 { padding-left: 36px; font-size: 20px; }.modal-heading p { margin-bottom: 14px; line-height: 1.6; }.modal-actions { position: sticky; bottom: -3px; z-index: 2; padding: 12px 0 2px; background: linear-gradient(to bottom,rgba(255,255,255,0),#fff 12px); }.modal-actions button { flex: 1; padding-inline: 10px; }.media-upload-stage { height: clamp(135px,25vh,190px); padding: 9px; }.media-upload-preview.logo-mode .media-upload-stage { height: clamp(125px,22vh,170px); }.media-upload-details { align-items: flex-start; flex-direction: column; gap: 4px; }.media-upload-details span { text-align: right; }.media-file-picker { grid-template-columns: 105px minmax(0,1fr); }
  .login-panel { padding: 25px; }.login-heading h2 { font-size: 27px; }
  .topbar { padding: 0 15px; height: 72px; }.topbar .server-status { display: none; }.topbar-actions .soft-button { font-size: 0; padding: 0; width: 42px; }.topbar-actions .soft-button::after { content: "+"; font-size: 20px; }
  .content { padding: 15px 12px 35px; }.welcome-card { padding: 26px 23px; }.welcome-card h2 { font-size: 28px; }.subscription-strip { grid-template-columns: 1fr 1fr; }.subscription-strip article { min-height: 72px; padding: 11px; }.subscription-icon { width: 31px; height: 31px; flex-basis: 31px; }.stats-grid { grid-template-columns: 1fr 1fr; gap: 9px; }.stat-card { padding: 13px; gap: 9px; }.stat-icon { width: 38px; height: 38px; }.stat-card strong { font-size: 19px; }.stat-card em { display: none; }
  .wizard-head { display: block; }.wizard-actions { margin-top: 9px; }.wizard-steps { overflow-x: auto; }.wizard-steps button span { display: none; }.wizard-steps i { width: 22px; }
  .section-heading { align-items: flex-start; flex-direction: column; }.section-heading > button { width: 100%; }.line-code-guard,.user-policy-note { align-items: flex-start; flex-direction: column; }.library-tabs { width: 100%; overflow-x: auto; }.library-tabs button { flex: 1; white-space: nowrap; padding-inline: 11px; }.library-pane { padding: 14px; }.library-pane-head { align-items: flex-start; flex-direction: column; }.library-pane-head button { width: 100%; }.item-grid, .media-grid, .template-grid, .two-panel-grid,.users-grid { grid-template-columns: 1fr; }.two-fields, .mapping-grid { grid-template-columns: 1fr; }.line-code-edit-row { grid-template-columns: 92px 1fr 34px; }.preview-meta { grid-template-columns: 1fr 1fr; }.preview-meta > div:last-child { grid-column: 1/-1; border-top: 1px solid #e7edf4; }.card-canvas-wrap { min-height: 270px; padding: 12px; }.preview-stage { min-height: 440px; }.drag-help { flex-direction: column; gap: 2px; padding: 7px; }.drag-item::before { display: none; }.preview-trust-note { align-items: stretch; flex-direction: column; }.preview-trust-note .soft-button { width: 100%; }.a4-preview { min-height: 0; width: 100%; }.wizard-footer { gap: 9px; }.wizard-footer button { flex: 1; }.confirm-grid { grid-template-columns: 1fr 1fr; }.pdf-layer-summary { grid-template-columns: 1fr; }
}