:root{
  --color-primary:#ff6b00;
  --color-secondary:#f97316;
  --color-primary-dark:#ea580c;
  --color-primary-light:#fff7ed;
  --color-primary-bg:#fff0e4;
  --color-navy:#0f1a2e;
  --color-navy-soft:#1e2a40;
  --color-navy-light:#334155;
  --color-white:#fff;
  --color-gray-50:#f9fafb;
  --color-gray-100:#f3f4f6;
  --color-gray-200:#e5e7eb;
  --color-gray-300:#d1d5db;
  --color-gray-400:#9ca3af;
  --color-gray-500:#6b7280;
  --color-gray-600:#4b5563;
  --color-gray-700:#374151;
  --color-success:#059669;
  --color-success-light:#d1fae5;
  --color-warning:#d97706;
  --color-warning-light:#fef3c7;
  --color-danger:#dc2626;
  --color-danger-light:#fee2e2;
  --color-info:#0284c7;
  --color-info-light:#e0f2fe;
  --radius-xs:6px;
  --radius-sm:10px;
  --radius-md:16px;
  --radius-lg:22px;
  --radius-xl:28px;
  --radius-2xl:36px;
  --radius-full:9999px;
  --shadow-xs:0 1px 2px rgba(15,26,46,0.03);
  --shadow-sm:0 2px 8px rgba(15,26,46,0.04);
  --shadow-md:0 6px 18px rgba(15,26,46,0.06);
  --shadow-lg:0 12px 30px rgba(15,26,46,0.08);
  --shadow-xl:0 20px 40px rgba(15,26,46,0.10);
  --space-0:0;
  --space-0-5:2px;
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:20px;
  --space-6:24px;
  --space-7:28px;
  --space-8:32px;
  --space-10:40px;
  --space-12:48px;
  --space-16:64px;
  --font-family:'Yekan Bakh','Inter',system-ui,sans-serif;
  --font-mono:'Yekan Bakh','Fira Code','Courier New',monospace;
  --font-en:'Inter','Yekan Bakh',system-ui,sans-serif;
  --text-xs:0.69rem;
  --text-sm:0.81rem;
  --text-base:1.15rem;
  --text-md:1rem;
  --text-lg:1.125rem;
  --text-xl:1.5rem;
  --text-2xl:1.75rem;
  --text-3xl:2.25rem;
  --text-4xl:2.75rem;
  --leading-tight:1.3;
  --leading-normal:1.5;
  --leading-relaxed:1.7;
  --weight-normal:400;
  --weight-medium:500;
  --weight-semibold:600;
  --weight-bold:700;
  --weight-extrabold:800;
  --weight-black:900;
  --transition-fast:0.15s ease;
  --transition-normal:0.25s ease;
  --transition-slow:0.35s ease;
  --bg-body:#f3f5f9;
  --bg-card:#fff;
  --bg-input:#fff;
  --bg-hero:linear-gradient(145deg,#fefdfb 0%,#fff8f0 30%,#fff0e4 60%,#fefdfb 100%);
  --border-color:#eaedf2;
  --text-body:#0f1a2e;
  --text-muted:#5f6b7a;
  --container-padding:var(--space-4);
  --container-max-width:1380px;
}
.dark-mode{
  --color-white:#1a1a2e;
  --color-gray-50:#16213e;
  --color-gray-100:#1a1a2e;
  --color-gray-200:#2d2d44;
  --color-gray-300:#3d3d5c;
  --color-gray-400:#6b6b8a;
  --color-gray-500:#8a8aaa;
  --color-gray-600:#aaaacc;
  --color-gray-700:#ccccdd;
  --bg-body:#0f0f1a;
  --bg-card:#1a1a2e;
  --bg-input:#1a1a2e;
  --bg-hero:linear-gradient(135deg,#1a1a2e 0%,#16213e 100%);
  --border-color:#2d2d44;
  --text-body:#e0e0e0;
  --text-muted:#8a8aaa;
}
@font-face{
  font-family:'Yekan Bakh';
  src:url('/staticfiles/fonts/YekanBakh-Light.woff2') format('woff2');
  font-weight:300;
  font-display:swap;
}
@font-face{
  font-family:'Yekan Bakh';
  src:url('/staticfiles/fonts/YekanBakh-Regular.woff2') format('woff2');
  font-weight:400;
  font-display:swap;
}
@font-face{
  font-family:'Yekan Bakh';
  src:url('/staticfiles/fonts/YekanBakh-Medium.woff2') format('woff2');
  font-weight:500;
  font-display:swap;
}
@font-face{
  font-family:'Yekan Bakh';
  src:url('/staticfiles/fonts/YekanBakh-Bold.woff2') format('woff2');
  font-weight:700;
  font-display:swap;
}
*,
*::before,
*::after{
  margin:0;
  padding:0;
  box-sizing:border-box;
}
html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}
body{
  background:var(--bg-body);
  font-family:var(--font-family);
  font-size:var(--text-base);
  color:var(--text-body);
  line-height:var(--leading-normal);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  direction:rtl;
  width:100%;
  min-height:100vh;
}
img,svg,video{
  width:100%;
  height:auto;
  display:block;
}
a{
  color:inherit;
  text-decoration:none;
}
ul,ol{
  list-style:none;
}
input,textarea,select,button,span{
  font-family:var(--font-family);
}
code,pre{
  font-family:var(--font-family);
}
:focus-visible{
  outline-color:var(--color-primary);
}
html,
body,
p,
h1,h2,h3,h4,h5,h6,
div,
section,
article,
aside,
header,
footer,
nav,
main,
span,
a,
li,
ul,
ol,
button,
input,
textarea,
select,
label,
small,
strong,
em,
b,
td,
th,
tr,
table,
form,
fieldset,
legend,
address,
blockquote,
cite,
details,
summary,
figcaption,
figure,
mark,
meter,
progress,
sub,
sup{
  font-family:var(--font-family);
}
body,
.hero,
.hero *,
.search-master,
.search-master *,
.suggested-numbers,
.suggested-numbers *,
.suggested-header,
.suggested-header *,
.hero-listing-card,
.hero-listing-card *,
.hero-card-front,
.hero-card-front *,
.hero-card-back,
.hero-card-back *,
.hero-listing-wrapper,
.hero-listing-wrapper *,
.latest-listings-section,
.latest-listings-section *,
.latest-listing-card,
.latest-listing-card *,
.latest-listing-info,
.latest-listing-info *,
.sim-card,
.sim-card *,
.product-card,
.product-card *,
.feature-item,
.feature-item *,
.banner-item,
.banner-item *,
.category-card,
.category-card *,
.service-card,
.service-card *,
.blog-card,
.blog-card *,
.review-card,
.review-card *,
.stat-card,
.stat-card *,
.operator-card,
.operator-card *,
.why-card,
.why-card *,
.ad-card,
.ad-card *,
.faq-item,
.faq-item *{
  user-select:none !important;
  -webkit-user-select:none !important;
  -moz-user-select:none !important;
  -ms-user-select:none !important;
  -webkit-touch-callout:none !important;
}
.container{
  width:100%;
  padding:var(--space-4) 0;
}
.main-container{
  flex:1;
  max-width:var(--container-max-width);
  margin:12px auto;
  overflow:hidden;
}
.page-layout{
  display:flex;
  justify-content:center;
  align-items:flex-start;
  gap:var(--space-5);
  padding:0 var(--container-padding);
  min-height:100vh;
  max-width:1440px;
  margin:0 auto;
}
.main-content{
  padding:var(--space-6) var(--container-padding) 140px;
}
.grid-2{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:var(--space-4);
}
.grid-3{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--space-4);
}
.grid-4{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:var(--space-3);
}
.gap-1{gap:var(--space-1)}
.gap-2{gap:var(--space-2)}
.gap-3{gap:var(--space-3)}
.gap-4{gap:var(--space-4)}
.gap-6{gap:var(--space-6)}
.mb-2{margin-bottom:var(--space-2)}
.mb-4{margin-bottom:var(--space-4)}
.mb-6{margin-bottom:var(--space-6)}
.mb-8{margin-bottom:var(--space-8)}
.mt-4{margin-top:var(--space-4)}
.mt-6{margin-top:var(--space-6)}
.text-center{text-align:center}
.text-right{text-align:right}
.text-left{text-align:left}
.text-primary{color:var(--color-primary)}
.text-warning{color:var(--color-warning)}
.d-none{display:none !important}
.d-flex{display:flex !important}
.d-block{display:block !important}
.flex-wrap{flex-wrap:wrap}
.flex-grow{flex:1}
.items-center{align-items:center}
.justify-between{justify-content:space-between}
.justify-center{justify-content:center}
.truncate{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  border:0;
}
.section-divider-hr{
  border:none;
  height:2px;
  background:linear-gradient(90deg,transparent,var(--color-primary) 30%,var(--color-primary) 70%,transparent);
  margin:var(--space-4) auto !important;
  max-width:60vw;
  opacity:0.6;
  border-radius:var(--radius-full);
}
.breadcrumb{
  font-size:14px;
  color:var(--text-muted);
  margin-bottom:16px;
}
.breadcrumb a{color:var(--color-primary);text-decoration:none}
.breadcrumb a:hover{text-decoration:underline}
.breadcrumb .separator{margin:0 8px;color:var(--text-muted)}
.page-header{
  text-align:center;
  margin:24px 0;
}
.page-header h1{
  font-size:22px;
  font-weight:700;
  color:var(--text-body);
  margin-bottom:12px;
}
.page-header h1 i{color:var(--color-primary)}
.page-header p{font-size:16px;color:var(--text-muted)}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--space-2);
  padding:var(--space-2) var(--space-5);
  border-radius:var(--radius-full);
  font-weight:var(--weight-semibold);
  font-size:var(--text-sm);
  line-height:1.4;
  cursor:pointer;
  border:none;
  text-decoration:none;
  user-select:none;
  white-space:nowrap;
  position:relative;
  overflow:hidden;
  font-family:var(--font-family);
  transition:background var(--transition-fast),transform var(--transition-fast),box-shadow var(--transition-fast);
}
.btn:active{transform:scale(0.97)}
.btn:disabled,
.btn-disabled{opacity:0.5;pointer-events:none}
.btn-ghost{background:var(--color-gray-100);color:var(--color-navy-soft)}
.btn-ghost:hover{background:var(--color-gray-200)}
.btn-primary{background:var(--color-primary);color:var(--color-white)}
.btn-primary:hover{background:var(--color-primary-dark)}
.btn-dark{background:var(--color-navy);color:var(--color-white)}
.btn-dark:hover{background:var(--color-primary)}
.btn-outline{background:transparent;color:var(--color-primary);border:1.5px solid var(--color-primary)}
.btn-outline:hover{background:var(--color-primary-light)}
.btn-success{background:var(--color-success);color:#fff}
.btn-success:hover{background:#047857}
.btn-warning{background:var(--color-warning);color:#fff}
.btn-warning:hover{background:#b45309}
.btn-glow{
  background:var(--color-primary);
  padding:var(--space-3) var(--space-8);
  font-weight:var(--weight-bold);
  color:var(--color-white);
  font-size:var(--text-md);
  border-radius:var(--radius-full);
  border:none;
  box-shadow:0 4px 20px rgba(249,115,22,0.35);
}
.btn-glow:hover{background:var(--color-primary-dark);box-shadow:0 6px 30px rgba(249,115,22,0.45)}
.btn-search{
  width:100%;
  justify-content:center;
  background:var(--color-primary);
  color:var(--color-white);
  padding:12px var(--space-6);
  font-size:var(--text-md);
  font-weight:var(--weight-bold);
  border-radius:var(--radius-sm);
  border:none;
  margin:var(--space-2);
}
.btn-search:hover{background:var(--color-primary-dark)}
.btn-sm{padding:var(--space-1) var(--space-3);font-size:var(--text-xs)}
.btn-lg{padding:var(--space-4) var(--space-8);font-size:var(--text-lg)}
.btn-block{width:100%;padding:var(--space-4) var(--space-8)}
.view-all{
  color:var(--color-primary);
  font-weight:var(--weight-semibold);
  font-size:var(--text-sm);
  display:flex;
  align-items:center;
  gap:var(--space-1);
  text-decoration:none;
  transition:var(--transition-fast);
  margin-left:4px;
}
.view-all:hover{color:var(--color-primary-dark);transform:translateX(-3px)}
.view-all i{font-size:var(--text-xs)}
.card{
  background:var(--bg-card);
  border-radius:var(--radius-lg);
  padding:var(--space-5);
  border:1px solid var(--border-color);
  box-shadow:var(--shadow-sm);
  transition:var(--transition-normal);
}
.card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.sim-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
  gap:var(--space-4);
  margin-bottom:var(--space-5);
}
.sim-card{
  background:var(--bg-card);
  border-radius:var(--radius-lg);
  padding:var(--space-4);
  border:1px solid var(--border-color);
  box-shadow:var(--shadow-sm);
  transition:var(--transition-normal);
  position:relative;
  cursor:pointer;
}
.sim-card:hover{
  border-color:#fed7aa;
  box-shadow:0 10px 25px rgba(249,115,22,0.1);
  transform:translateY(-2px);
}
.sim-card--featured{border:1.5px solid #fcd34d;background:#fffdf7}
.card-badge{
  position:absolute;
  top:var(--space-3);
  left:var(--space-3);
  background:var(--color-primary);
  color:var(--color-white);
  padding:var(--space-1) var(--space-3);
  border-radius:var(--radius-full);
  font-size:var(--text-xs);
  font-weight:var(--weight-bold);
}
.sim-number{
  font-size:var(--text-md);
  font-weight:var(--weight-black);
  font-family:var(--font-family);
  letter-spacing:1px;
  color:var(--text-body);
  direction:ltr;
  text-align:center;
  margin:var(--space-2) 0 var(--space-1);
  font-feature-settings:"kern" 1,"tnum" 1,"ss01" 1;
}
.sim-meta{
  display:flex;
  justify-content:center;
  gap:var(--space-2);
  flex-wrap:wrap;
  margin:var(--space-2) 0;
}
.sim-price-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:var(--space-3);
  border-top:1px solid var(--border-color);
  padding-top:var(--space-3);
}
.sim-price{
  font-size:var(--text-xl);
  font-weight:var(--weight-extrabold);
  color:var(--color-primary-dark);
}
.sim-price small{
  font-size:var(--text-xs);
  font-weight:var(--weight-medium);
  color:var(--text-muted);
  display:block;
}
.stats-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:var(--space-4);
  margin-bottom:var(--space-6);
}
.stat-card{
  background:var(--bg-card);
  border-radius:var(--radius-md);
  padding:var(--space-4);
  border:1px solid var(--border-color);
  transition:var(--transition-normal);
  position:relative;
  overflow:hidden;
  text-align:center;
}
.stat-card:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow-md);
  cursor:pointer;
}
.stat-card .stat-icon{
  width:44px;
  height:44px;
  border-radius:var(--radius-sm);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.25rem;
  margin-bottom:var(--space-2);
}
.stat-card-primary .stat-icon{background:var(--color-primary-light);color:var(--color-primary)}
.stat-card-success .stat-icon{background:var(--color-success-light);color:var(--color-success)}
.stat-card-warning .stat-icon{background:var(--color-warning-light);color:var(--color-warning)}
.stat-card-info .stat-icon{background:var(--color-info-light);color:var(--color-info)}
.stat-card-purple .stat-icon{background:#f3e8ff;color:#9333ea}
.stat-card .stat-number{
  font-size:var(--text-xl);
  font-weight:var(--weight-extrabold);
  color:var(--text-body);
  font-family:var(--font-family);
}
.stat-card .stat-label{
  font-size:var(--text-xs);
  color:var(--text-muted);
  margin-top:var(--space-1);
}
.stat-card .stat-change{
  font-size:var(--text-xs);
  margin-top:var(--space-1);
  font-weight:var(--weight-medium);
}
.stat-card .stat-change.positive{color:var(--color-success)}
.stat-card .stat-change.negative{color:var(--color-danger)}
.stat-bg-icon{display:none !important}
.stats-grid-5,
.shop-stats-grid{
  display:grid;
  gap:12px;
  margin-bottom:24px;
}
.stats-grid-5{grid-template-columns:repeat(5,1fr)}
.shop-stats-grid{grid-template-columns:repeat(5,1fr)}
.stat-card--panel{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:10px;
  padding:22px 14px;
  min-height:170px;
  border-radius:14px;
  position:relative;
  overflow:hidden;
  background:var(--bg-card);
  border:1px solid var(--border-color);
  box-shadow:var(--shadow-sm);
  transition:transform 0.18s ease,box-shadow 0.18s ease,border-color 0.18s ease;
}
.stat-card--panel:hover{
  transform:translateY(-3px);
  box-shadow:0 8px 22px rgba(0,0,0,0.07);
}
.stat-card--panel .stat-icon{
  width:56px;
  height:56px;
  min-width:56px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:22px;
  margin:0;
  flex-shrink:0;
}
.stat-card--panel .stat-number{
  font-size:22px;
  font-weight:800;
  color:var(--text-body);
  font-family:var(--font-mono);
  direction:ltr;
  line-height:1.2;
  margin:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:100%;
}
.stat-card--panel .stat-label{
  font-size:13px;
  font-weight:600;
  color:var(--text-muted);
  margin:0;
  line-height:1.4;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:100%;
}
.stat-icon-primary{background:var(--color-primary-light);color:var(--color-primary)}
.stat-icon-info{background:var(--color-info-light);color:var(--color-info)}
.stat-icon-warning{background:var(--color-warning-light);color:var(--color-warning)}
.stat-icon-purple{background:#f3e8ff;color:#9333ea}
.wallet-mini{
  cursor:pointer;
  transition:border-color 0.2s ease,box-shadow 0.2s ease;
}
.wallet-mini:hover{
  border-color:var(--color-primary);
  box-shadow:0 8px 20px rgba(249,115,22,0.15);
}
.wallet-mini:focus-visible{
  outline:3px solid var(--color-primary);
  outline-offset:2px;
}
.why-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--space-4);
  margin:var(--space-10) 0 var(--space-8);
}
.why-card{
  background:var(--bg-card);
  border-radius:var(--radius-lg);
  padding:var(--space-6) var(--space-4);
  text-align:center;
  border:1px solid var(--border-color);
  box-shadow:var(--shadow-xs);
}
.why-icon{
  width:56px;
  height:56px;
  background:var(--color-primary-light);
  border-radius:var(--radius-md);
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto var(--space-3);
  font-size:24px;
  color:var(--color-primary);
}
.why-card h3{
  font-size:var(--text-base);
  font-weight:var(--weight-bold);
  margin-bottom:var(--space-2);
  color:var(--text-body);
}
.why-card p{
  font-size:var(--text-sm);
  color:var(--text-muted);
  line-height:var(--leading-relaxed);
}
.input,
.textarea,
.select,
.sp-input,
.sp-select,
.sp-textarea{
  width:100%;
  padding:12px;
  background:var(--bg-input);
  border:1.5px solid var(--color-gray-200);
  border-radius:var(--radius-md);
  font-size:var(--text-sm);
  color:var(--text-body);
  transition:border-color var(--transition-fast),box-shadow var(--transition-fast);
  -webkit-appearance:none;
  font-family:var(--font-family);
}
.sp-select{
  padding:14.5px;
}
.input::placeholder,
.textarea::placeholder{color:var(--color-gray-400)}
.textarea,
.sp-textarea{min-height:100px;resize:vertical;line-height:var(--leading-relaxed)}
.select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:left 16px center;
  padding-right:var(--space-4);
  padding-left:var(--space-10);
  cursor:pointer;
}
.prefix-input{
  display:flex;
  align-items:center;
  background:var(--color-gray-50);
  border-radius:var(--radius-full);
  padding:var(--space-2) var(--space-4);
  font-weight:var(--weight-extrabold);
  font-size:20px;
  font-family:var(--font-family);
  color:var(--text-body);
  border:1.5px solid var(--color-gray-200);
  min-width:105px;
  justify-content:center;
  cursor:pointer;
  user-select:none;
  transition:border-color var(--transition-fast);
  font-feature-settings:"kern" 1,"tnum" 1,"ss01" 1;
  margin-right:10px;
}
.prefix-input:hover{border-color:var(--color-primary)}
.digits-wrapper{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  justify-content:flex-start;
  align-items:center;
}
.digit-cell{
  width:48px !important;
  height:48px !important;
  background:var(--bg-input);
  border:2px dashed var(--color-gray-300);
  border-radius:var(--radius-sm);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:24px;
  font-weight:var(--weight-extrabold);
  font-family:var(--font-family);
  color:var(--color-gray-400);
  cursor:pointer;
  transition:var(--transition-fast);
  font-feature-settings:"kern" 1,"tnum" 1,"ss01" 1;
}
.digit-cell:hover,
.digit-cell.active{
  border-color:var(--color-primary);
  color:var(--text-body);
  background:var(--color-primary-light);
}
.digit-cell.filled{
  border-style:solid;
  border-color:var(--color-primary);
  color:var(--text-body);
  background:#fffaf5;
}
.checkbox-label,
.radio-label{
  display:inline-flex;
  align-items:center;
  gap:var(--space-2);
  font-size:var(--text-sm);
  cursor:pointer;
}
.checkbox,
.radio{
  width:18px;
  height:18px;
  accent-color:var(--color-primary);
  cursor:pointer;
}
.form-group,
.sp-field{
  display:flex;
  flex-direction:column;
  gap:var(--space-1);
  margin-bottom:var(--space-4);
  position:relative;
}
.form-group--flat{margin:0}
.form-group--tight{margin-bottom:12px}
.form-group--mt{margin-top:var(--space-4)}
.form-label,
.sp-label{
  font-size:var(--text-sm);
  font-weight:var(--weight-medium);
  color:var(--color-navy-soft);
  margin:0 0 var(--space-1);
  display:block;
}
.form-hint,
.sp-hint{
  font-size:var(--text-xs);
  color:var(--color-gray-500);
  line-height:var(--leading-relaxed);
}
.sp-hint--mb{margin-bottom:var(--space-3)}
.form-error{
  font-size:var(--text-xs);
  color:var(--color-danger);
  display:none;
}
.form-error.show{display:block}
.input-group{
  display:flex;
  align-items:center;
  gap:0;
}
.input-group .input{border-radius:0;flex:1}
.input-group .input:first-child{border-radius:var(--radius-md)}
.input-group .input:last-child{border-radius:var(--radius-md)}
.input-group-addon{
  background:var(--color-gray-100);
  border:1.5px solid var(--color-gray-200);
  padding:var(--space-3) var(--space-4);
  font-size:var(--text-sm);
  color:var(--color-gray-600);
  white-space:nowrap;
}
.input-group-addon:first-child{
  border-radius:var(--radius-md) 0 0 var(--radius-md);
  border-left:none;
}
.input-group-addon:last-child{
  border-radius:0 var(--radius-md) var(--radius-md) 0;
  border-right:none;
}
.toggle{
  position:relative;
  display:inline-block;
  width:48px;
  height:28px;
}
.toggle input{opacity:0;width:0;height:0}
.toggle-slider{
  position:absolute;
  cursor:pointer;
  inset:0;
  background:var(--color-gray-200);
  border-radius:var(--radius-full);
  transition:var(--transition-fast);
}
.toggle-slider::before{
  content:'';
  position:absolute;
  height:22px;
  width:22px;
  left:3px;
  bottom:3px;
  background:var(--color-white);
  border-radius:50%;
  transition:var(--transition-fast);
}
.toggle input:checked+.toggle-slider{background:var(--color-primary)}
.toggle input:checked+.toggle-slider::before{transform:translateX(20px)}
.input-error{
  border-color:var(--color-danger) !important;
  box-shadow:0 0 0 3px rgba(220,38,38,0.12) !important;
}
.dark-mode .input,
.dark-mode .textarea,
.dark-mode .select,
.dark-mode .sp-input,
.dark-mode .sp-select,
.dark-mode .sp-textarea{
  background:var(--bg-input);
  border-color:var(--border-color);
  color:var(--text-body);
}
.dark-mode .input::placeholder,
.dark-mode .textarea::placeholder{color:var(--color-gray-400)}
.dark-mode .prefix-input{background:var(--bg-input);border-color:var(--border-color);color:var(--text-body)}
.dark-mode .input-group-addon{background:var(--color-gray-100);border-color:var(--border-color);color:var(--color-gray-400)}
.dark-mode .digit-cell{background:var(--bg-input);border-color:var(--border-color);color:var(--color-gray-400)}
.dark-mode .digit-cell.filled{background:var(--border-color);border-color:var(--color-primary);color:var(--text-body)}
.dark-mode .digit-cell.active{border-color:var(--color-primary);background:rgba(249,115,22,0.1);color:var(--text-body)}
.dark-mode .digit-cell:hover{border-color:var(--color-primary);color:var(--text-body);background:rgba(249,115,22,0.05)}
.dark-mode .form-label,
.dark-mode .sp-label{color:var(--text-muted)}
.dark-mode .form-hint,
.dark-mode .sp-hint{color:var(--color-gray-400)}
.dashboard-wrapper{
  display:flex;
  min-height:100vh;
  position:relative;
}
.dashboard-sidebar-wrapper{
  width:260px;
  flex-shrink:0;
  transition:transform 0.3s ease;
  z-index:100;
}
.dashboard-main{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
}
.dashboard-content{
  padding:0 !important;
  margin:0 !important;
  width:100%;
}
.sidebar-overlay{
  display:none;
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgba(0,0,0,0.5);
  backdrop-filter:blur(4px);
  z-index:99;
}
.sidebar-overlay.active{display:block}
.sidebar-toggle{
  display:none;
  position:fixed;
  bottom:var(--space-4);
  right:var(--space-4);
  z-index:101;
  width:48px;
  height:48px;
  border-radius:var(--radius-full);
  background:var(--color-primary);
  color:#fff;
  border:none;
  box-shadow:var(--shadow-lg);
  align-items:center;
  justify-content:center;
  font-size:1.3rem;
  cursor:pointer;
  transition:var(--transition-fast);
}
.sidebar-toggle:hover{background:var(--color-primary-dark);transform:scale(1.05)}
.dashboard-greeting{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-4);
  margin-bottom:var(--space-5);
  flex-wrap:wrap;
  background:var(--bg-card);
  border:1px solid var(--border-color);
  border-radius:var(--radius-lg);
  padding:var(--space-4) var(--space-5);
  box-shadow:var(--shadow-sm);
}
.greeting-text h1{
  font-size:var(--text-2xl);
  font-weight:var(--weight-extrabold);
  color:var(--text-body);
  margin:0 0 var(--space-1);
  line-height:1.3;
}
.greeting-text p{
  font-size:var(--text-sm);
  color:var(--text-muted);
  margin:0;
}
.greeting-actions{
  display:flex;
  gap:var(--space-2);
  flex-wrap:wrap;
}
.wave{
  display:inline-block;
  animation:wave-animation 2.5s infinite;
  transform-origin:70% 70%;
}
@keyframes wave-animation{
  0%{transform:rotate(0)}
  10%{transform:rotate(14deg)}
  20%{transform:rotate(-8deg)}
  30%{transform:rotate(14deg)}
  40%{transform:rotate(-4deg)}
  50%{transform:rotate(10deg)}
  60%{transform:rotate(0)}
  100%{transform:rotate(0)}
}
.alert-flex{
  display:flex;
  align-items:center;
  gap:10px;
}
.banner-row{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
  margin-bottom:24px;
}
.banner-card{
  display:block;
  border-radius:14px;
  overflow:hidden;
  border:1px solid var(--border-color);
  background:var(--color-gray-50);
  aspect-ratio:2000/1000;
  transition:transform 0.2s ease,box-shadow 0.2s ease;
  padding:0;
  margin:0;
}
.banner-card:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(0,0,0,0.08);
}
.banner-card img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
}
.table-section{
  background:var(--bg-card);
  border:1px solid var(--border-color);
  border-radius:var(--radius-lg);
  padding:var(--space-4);
  margin-bottom:var(--space-5);
  box-shadow:var(--shadow-sm);
}
.table-section--mt{margin-top:var(--space-5)}
.table-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-3);
  margin-bottom:var(--space-4);
  flex-wrap:wrap;
}
.table-title{
  font-size:var(--text-base);
  font-weight:var(--weight-bold);
  color:var(--text-body);
  display:flex;
  align-items:center;
  gap:var(--space-2);
  flex-wrap:wrap;
}
.table-title i{color:var(--color-primary)}
.count-badge{
  font-size:var(--text-xs);
  font-weight:var(--weight-semibold);
  background:var(--color-gray-100);
  color:var(--text-muted);
  padding:2px 10px;
  border-radius:var(--radius-full);
}
.table-actions{
  display:flex;
  gap:var(--space-2);
  flex-wrap:wrap;
  align-items:center;
}
.table-actions .search-box{
  display:flex;
  align-items:center;
  gap:var(--space-2);
  background:var(--bg-card);
  border:1px solid var(--border-color);
  border-radius:var(--radius-full);
  padding:2px 4px 2px 12px;
  transition:var(--transition-fast);
  min-width:240px;
}
.table-actions .search-box:focus-within{
  border-color:var(--color-primary);
  box-shadow:0 0 0 3px rgba(249,115,22,0.08);
}
.table-actions .search-box input{
  border:none;
  outline:none;
  padding:var(--space-1) 0;
  font-size:var(--text-sm);
  background:transparent;
  color:var(--text-body);
  font-family:var(--font-family);
  width:100%;
}
.table-actions .search-box input::placeholder{color:var(--text-muted)}
.table-actions .search-box button{
  background:var(--color-primary);
  color:#fff;
  border:none;
  border-radius:var(--radius-full);
  padding:var(--space-1) var(--space-3);
  cursor:pointer;
  font-size:var(--text-xs);
  display:flex;
  align-items:center;
  gap:var(--space-1);
  font-family:var(--font-family);
  transition:var(--transition-fast);
}
.table-actions .search-box button:hover{background:var(--color-primary-dark)}
.filter-dropdown{position:relative;display:inline-block}
.filter-dropdown .filter-btn{
  background:var(--bg-card);
  border:1px solid var(--border-color);
  padding:var(--space-1) var(--space-3);
  border-radius:var(--radius-full);
  cursor:pointer;
  font-size:var(--text-xs);
  color:var(--text-body);
  display:flex;
  align-items:center;
  gap:var(--space-1);
  font-family:var(--font-family);
  transition:var(--transition-fast);
}
.filter-dropdown .filter-btn:hover{border-color:var(--color-primary)}
.filter-dropdown .filter-menu{
  display:none;
  position:absolute;
  top:calc(100% + 4px);
  left:0;
  min-width:160px;
  background:var(--bg-card);
  border:1px solid var(--border-color);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-md);
  z-index:10;
  padding:var(--space-2);
}
.filter-dropdown .filter-menu.open{display:block}
.filter-dropdown .filter-menu label{
  display:flex;
  align-items:center;
  gap:var(--space-2);
  padding:var(--space-1) var(--space-3);
  font-size:var(--text-xs);
  color:var(--text-body);
  cursor:pointer;
  border-radius:var(--radius-sm);
  transition:var(--transition-fast);
}
.filter-dropdown .filter-menu label:hover{background:var(--color-gray-100)}
.filter-dropdown .filter-menu label input[type="checkbox"]{
  accent-color:var(--color-primary);
  width:14px;
  height:14px;
  cursor:pointer;
}
.table-wrapper{
  overflow-x:auto;
  border-radius:var(--radius-md);
  border:1px solid var(--border-color);
  background:var(--bg-card);
  padding:0;
  margin-bottom:var(--space-4);
  -webkit-overflow-scrolling:touch;
}
.table{
  width:100%;
  border-collapse:collapse;
  font-size:var(--text-sm);
  background:var(--bg-card);
}
.table thead{background:var(--color-gray-50)}
.table th{
  padding:var(--space-3) var(--space-4);
  text-align:right;
  font-weight:var(--weight-bold);
  color:var(--text-body);
  border-bottom:2px solid var(--border-color);
  white-space:nowrap;
  font-size:var(--text-sm);
}
.table td{
  padding:var(--space-3) var(--space-4);
  border-bottom:1px solid var(--border-color);
  color:var(--text-body);
  vertical-align:middle;
  font-size:var(--text-sm);
}
.table tbody tr:hover{background:var(--color-primary-light)}
.table tbody tr:last-child td{border-bottom:none}
.table .status-badge{
  display:inline-block;
  padding:2px 12px;
  border-radius:var(--radius-full);
  font-size:var(--text-xs);
  font-weight:var(--weight-medium);
  text-align:center;
  min-width:70px;
}
.table .sim-number{
  font-family:var(--font-family);
  font-weight:var(--weight-bold);
  direction:ltr;
}
.table .btn-sm{
  padding:var(--space-1) var(--space-3);
  font-size:var(--text-xs);
  border-radius:var(--radius-full);
  border:none;
  cursor:pointer;
  transition:var(--transition-fast);
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:var(--space-1);
  font-family:var(--font-family);
}
.table .btn-sm.btn-primary{background:var(--color-primary);color:#fff}
.table .btn-sm.btn-primary:hover{background:var(--color-primary-dark)}
.table .btn-sm.btn-danger{background:var(--color-danger);color:#fff}
.table .btn-sm.btn-danger:hover{background:#b91c1c}
.table .btn-sm.btn-outline{background:transparent;color:var(--color-primary);border:1px solid var(--color-primary)}
.table .btn-sm.btn-outline:hover{background:var(--color-primary-light)}
.status-badge{
  display:inline-flex;
  align-items:center;
  padding:4px 12px;
  border-radius:var(--radius-full);
  font-size:var(--text-xs);
  font-weight:var(--weight-bold);
  white-space:nowrap;
}
.status-badge.active{background:var(--color-success-light);color:var(--color-success)}
.status-badge.pending,
.status-badge.in_check{background:var(--color-warning-light);color:var(--color-warning)}
.status-badge.expired{background:var(--color-gray-100);color:var(--text-muted)}
.status-badge.draft{background:var(--color-info-light);color:var(--color-info)}
.status-badge.rejected{background:var(--color-danger-light);color:var(--color-danger)}
.status-badge.inactive{background:rgba(255,71,87,0.15);color:#ff4757}
.row-actions{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
}
.pagination{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:var(--space-2);
  margin:var(--space-4) 0;
  flex-wrap:wrap;
  direction:rtl;
}
.pagination .page-item{
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:36px;
  height:36px;
  border-radius:var(--radius-sm);
  font-size:var(--text-sm);
  font-weight:var(--weight-medium);
  border:1px solid var(--border-color);
  background:var(--bg-card);
  cursor:pointer;
  transition:var(--transition-fast);
  color:var(--text-body);
  text-decoration:none;
  padding:0 var(--space-2);
}
.pagination .page-item:hover{
  background:var(--color-primary-light);
  border-color:var(--color-primary);
  color:var(--color-primary);
}
.pagination .page-item.active{
  background:var(--color-primary);
  border-color:var(--color-primary);
  color:#fff;
}
.pagination .page-item.disabled{
  opacity:0.4;
  pointer-events:none;
  cursor:default;
}
.pagination .page-item i{font-size:var(--text-xs)}
.pagination .page-info{font-size:var(--text-sm);color:var(--text-muted)}
.pagination-item{
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:40px;
  height:40px;
  padding:0 var(--space-3);
  border-radius:var(--radius-sm);
  background:var(--color-gray-100);
  color:var(--text-muted);
  font-size:var(--text-sm);
  font-weight:var(--weight-medium);
  text-decoration:none;
  transition:all 0.2s ease;
  border:1px solid transparent;
  cursor:pointer;
  user-select:none;
}
.pagination-item:hover:not(.active):not(.disabled){
  background:var(--color-primary-bg);
  color:var(--color-primary);
  border-color:var(--color-primary);
}
.pagination-item.active{
  background:var(--color-primary);
  color:#fff;
  border-color:var(--color-primary);
  box-shadow:0 4px 12px rgba(249,115,22,0.25);
}
.pagination-item.disabled{
  opacity:0.4;
  cursor:not-allowed;
  pointer-events:none;
}
.pagination-item i{font-size:var(--text-sm)}
.pagination-sm .pagination-item{min-width:32px;height:32px;font-size:var(--text-xs);padding:0 var(--space-2)}
.pagination-lg .pagination-item{min-width:48px;height:48px;font-size:var(--text-base);padding:0 var(--space-4);border-radius:var(--radius-md)}
.filter-bar{
  display:flex;
  gap:var(--space-3);
  flex-wrap:wrap;
  margin-bottom:var(--space-4);
  align-items:center;
}
.filter-bar .filter-input,
.filter-input{
  padding:var(--space-2) var(--space-3);
  border:1.5px solid var(--border-color);
  border-radius:var(--radius-sm);
  font-size:var(--text-sm);
  background:var(--bg-input);
  color:var(--text-body);
  font-family:var(--font-family);
  min-width:180px;
  transition:border-color 0.2s;
}
.filter-bar .filter-input:focus,
.filter-input:focus{
  border-color:var(--color-primary);
  outline:none;
  box-shadow:0 0 0 3px rgba(249,115,22,0.12);
}
.filter-bar .filter-select,
.filter-select{
  padding:var(--space-2) var(--space-3);
  border:1.5px solid var(--border-color);
  border-radius:var(--radius-sm);
  font-size:var(--text-sm);
  background:var(--bg-input);
  color:var(--text-body);
  font-family:var(--font-family);
  cursor:pointer;
  min-width:140px;
  transition:border-color 0.2s;
}
.filter-bar .filter-select:focus,
.filter-select:focus{
  border-color:var(--color-primary);
  outline:none;
  box-shadow:0 0 0 3px rgba(249,115,22,0.12);
}
.empty-state{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:var(--space-6) var(--space-4);
  color:var(--text-muted);
}
.empty-state i{
  font-size:40px;
  color:var(--color-gray-300);
  margin-bottom:var(--space-3);
  display:block;
}
.empty-state p{
  font-size:var(--text-sm);
  margin:0;
}
.empty-state-cta{margin-top:var(--space-3)}
.empty-state--full{grid-column:1/-1;width:100%}
.view-toggle{
  display:flex;
  gap:4px;
  background:var(--color-gray-100);
  border-radius:12px;
}
.view-toggle button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  min-width:40px;
  padding:0;
  background:transparent;
  border:none;
  border-radius:10px;
  cursor:pointer;
  font-size:1rem;
  transition:var(--transition-fast);
  font-family:var(--font-family);
}
.view-toggle button i{font-size:1rem;color:inherit;line-height:1}
.view-toggle button.active{
  background:var(--bg-card);
  color:var(--color-primary);
  box-shadow:var(--shadow-sm);
}
.view-toggle button:hover{color:var(--text-body)}
.grid-view{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:var(--space-3);
}
.grid-view .grid-item{
  background:var(--bg-card);
  border-radius:var(--radius-md);
  padding:var(--space-3);
  border:1px solid var(--border-color);
  transition:var(--transition-normal);
}
.grid-view .grid-item:hover{
  border-color:var(--color-primary);
  box-shadow:var(--shadow-sm);
}
.grid-view .grid-item .grid-number{
  font-size:var(--text-sm);
  font-weight:var(--weight-extrabold);
  font-family:var(--font-family);
  color:var(--text-body);
  text-align:center;
  direction:ltr;
  margin-bottom:var(--space-1);
}
.grid-view .grid-item .grid-meta{
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:var(--space-1);
  font-size:var(--text-xs);
  color:var(--text-muted);
  margin-bottom:var(--space-1);
}
.grid-view .grid-item .grid-meta .label{
  font-weight:var(--weight-medium);
  color:var(--text-body);
}
.grid-view .grid-item .grid-price{
  font-size:var(--text-sm);
  font-weight:var(--weight-extrabold);
  color:var(--color-primary);
  text-align:center;
  margin:var(--space-1) 0;
}
.grid-view .grid-item .grid-actions{
  display:flex;
  gap:var(--space-1);
  justify-content:center;
  flex-wrap:wrap;
  margin-top:var(--space-2);
  padding-top:var(--space-2);
  border-top:1px solid var(--border-color);
}
.grid-view .grid-item .grid-status{text-align:center}
.messages-list{
  display:flex;
  flex-direction:column;
  gap:var(--space-2);
}
.message-item{
  display:flex;
  align-items:center;
  gap:var(--space-3);
  padding:var(--space-2) var(--space-3);
  background:var(--bg-card);
  border-radius:var(--radius-md);
  border:1px solid var(--border-color);
  transition:var(--transition-fast);
}
.message-item--link{
  text-decoration:none;
  color:inherit;
}
.message-item:hover{
  border-color:var(--color-primary-light);
  box-shadow:var(--shadow-sm);
}
.message-item .message-avatar,
.message-avatar{
  width:36px;
  height:36px;
  border-radius:var(--radius-full);
  background:var(--color-gray-100);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--color-gray-400);
  flex-shrink:0;
  font-size:1rem;
}
.message-item .message-info,
.message-info{flex:1;min-width:0}
.message-item .message-sender,
.message-sender{
  font-weight:var(--weight-medium);
  font-size:var(--text-sm);
  color:var(--text-body);
}
.message-item .message-preview,
.message-preview{
  font-size:var(--text-xs);
  color:var(--text-muted);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.message-item .message-date,
.message-date{
  font-size:var(--text-xs);
  color:var(--text-muted);
  flex-shrink:0;
  white-space:nowrap;
}
.dashboard-footer{
  margin-top:var(--space-6);
  text-align:center;
  padding:var(--space-2) 0;
}
.dashboard-footer p{
  color:var(--text-muted);
  font-size:var(--text-xs);
  margin:0;
}
.quick-actions{margin-bottom:var(--space-5)}
.quick-actions--mt{margin-top:var(--space-5)}
.quick-actions-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:var(--space-3);
  margin-top:var(--space-3);
}
.quick-actions-grid-2{grid-template-columns:repeat(2,1fr)}
.quick-action{
  display:flex;
  align-items:center;
  gap:var(--space-2);
  padding:var(--space-3) var(--space-4);
  background:var(--bg-card);
  border:1px solid var(--border-color);
  border-radius:var(--radius-md);
  color:var(--text-body);
  text-decoration:none;
  font-size:var(--text-sm);
  font-weight:var(--weight-semibold);
  transition:all 0.2s ease;
  position:relative;
}
.quick-action:hover{
  border-color:var(--color-primary);
  color:var(--color-primary);
  transform:translateY(-2px);
  box-shadow:var(--shadow-sm);
}
.quick-action i{
  color:var(--color-primary);
  font-size:1.1rem;
  width:20px;
  text-align:center;
}
.quick-action span{font-size:var(--text-sm);font-weight:var(--weight-medium)}
.quick-action .badge{
  margin-right:auto;
  background:var(--color-danger);
  color:#fff;
  font-size:10px;
  padding:2px 8px;
  border-radius:var(--radius-full);
  font-weight:var(--weight-bold);
}
.quick-action .badge.badge-danger{background:var(--color-danger)}
.quick-action .badge.badge-warning{background:var(--color-warning)}
.quick-action .badge.badge-success{background:var(--color-success)}
.panel-tabs{
  display:flex;
  gap:var(--space-1);
  background:var(--bg-card);
  border:1px solid var(--border-color);
  border-radius:var(--radius-lg);
  padding:var(--space-2);
  box-shadow:var(--shadow-sm);
  overflow-x:auto;
  scrollbar-width:none;
  margin-bottom:var(--space-4);
  -webkit-overflow-scrolling:touch;
}
.panel-tabs::-webkit-scrollbar{display:none}
.panel-tabs a{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:10px 16px;
  border-radius:var(--radius-md);
  font-size:var(--text-sm);
  font-weight:var(--weight-semibold);
  color:var(--text-muted);
  text-decoration:none;
  white-space:nowrap;
  transition:all 0.2s ease;
  position:relative;
}
.panel-tabs a:hover{background:var(--color-gray-50);color:var(--text-body)}
.panel-tabs a.active{background:var(--color-primary);color:#fff}
.panel-tabs a .badge{
  background:var(--color-gray-100);
  color:var(--text-muted);
  font-size:10px;
  padding:2px 8px;
  border-radius:var(--radius-full);
  font-weight:var(--weight-bold);
}
.panel-tabs a.active .badge{background:rgba(255,255,255,0.25);color:#fff}
.sim-meta-text{font-size:11px;color:var(--text-muted)}
.review-note{max-width:240px}
.exposure-meter{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--font-mono);
  font-size:var(--text-xs);
  color:var(--text-body);
}
.exposure-meter .bar{
  display:inline-block;
  width:60px;
  height:6px;
  border-radius:var(--radius-full);
  background:var(--color-gray-100);
  overflow:hidden;
  position:relative;
}
.exposure-meter .bar>span{
  display:block;
  height:100%;
  background:var(--color-primary);
  border-radius:var(--radius-full);
  transition:width 0.3s ease;
}
.visit-pack-form{margin-top:4px}
.row-action-inline{display:inline}
.info-card{
  background:var(--bg-card);
  border:1px solid var(--border-color);
  border-radius:var(--radius-lg);
  padding:var(--space-4);
  box-shadow:var(--shadow-sm);
}
.info-card h3{
  font-size:var(--text-base);
  font-weight:var(--weight-bold);
  color:var(--text-body);
  margin:0 0 var(--space-2);
  display:flex;
  align-items:center;
  gap:var(--space-2);
}
.info-card h3 i{color:var(--color-primary)}
.info-card p{
  font-size:var(--text-sm);
  line-height:2;
  color:var(--text-muted);
  margin:0;
}
.info-card-title{margin-top:var(--space-4)}
.info-card-text{margin:0;font-size:var(--text-sm)}
.info-card--full{grid-column:1/-1}
.panel-form{
  background:var(--bg-card);
  border:1px solid var(--border-color);
  border-radius:var(--radius-lg);
  padding:var(--space-5);
  box-shadow:var(--shadow-sm);
}
.panel-form--md{max-width:760px}
.panel-form--lg{max-width:640px}
.form-actions{
  display:flex;
  gap:var(--space-3);
  flex-wrap:wrap;
  margin-top:var(--space-4);
  flex-direction:row-reverse;
}
.form-thumb-square{
  width:64px;
  height:64px;
  border-radius:var(--radius-sm);
  object-fit:cover;
  display:block;
  margin-bottom:6px;
}
.form-thumb-cover{
  width:100%;
  max-height:90px;
  border-radius:var(--radius-sm);
  object-fit:cover;
  display:block;
  margin-bottom:6px;
}
.cell-nowrap-sm{font-size:12px;color:var(--text-muted);white-space:nowrap}
.cell-log-msg{font-size:12px;max-width:340px}
.cell-ip{font-size:11px;color:var(--text-muted)}
.cell-ltr{direction:ltr}
.cell-meta-sm{font-size:11px}
.log-changes{font-size:11px;color:var(--text-muted);direction:ltr}
.icon-featured{color:#f59e0b}
.panel-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4)}
.panel-grid-2--mt{margin-top:var(--space-5)}
.form-inline{display:inline}
.form-inline-mt{margin-top:var(--space-3)}
.decision-row{display:flex;gap:8px;flex-wrap:wrap}
.decision-row--gap{display:flex;gap:8px;flex-wrap:wrap}
.audit-list-grow{flex:1}
.audit-link{text-decoration:none;color:inherit}
.related-listing-sm{margin:12px 0 0;font-size:var(--text-sm)}
.listing-title-sm{margin:0 0 6px;font-weight:700}
.listing-desc-sm{margin:0;font-size:var(--text-sm);white-space:pre-line;color:var(--text-muted)}
.listing-thumb{max-width:260px;border-radius:var(--radius-md);margin-top:var(--space-3)}
.report-desc{margin:var(--space-3) 0 0;font-size:var(--text-sm);white-space:pre-line}
.text-sm-muted{font-size:var(--text-sm)}
.bulk-bar{
  display:flex;
  align-items:center;
  gap:var(--space-2);
  flex-wrap:wrap;
  padding:var(--space-2) var(--space-3);
  background:var(--color-gray-50);
  border-radius:var(--radius-md);
  margin-bottom:var(--space-3);
}
.bulk-bar .text-muted{font-size:var(--text-xs)}
.risk-dot{
  display:inline-block;
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--color-gray-300);
}
.risk-dot.danger{background:var(--color-danger)}
.risk-dot.warn{background:var(--color-warning)}
.risk-dot.ok{background:var(--color-success)}
.mini-flags{display:flex;flex-direction:column;gap:2px;font-size:10px;color:var(--text-muted)}
.mini-flags .danger{color:var(--color-danger)}
.mini-flags .warn{color:var(--color-warning)}
.mini-flags .ok{color:var(--color-success)}
.lock-note{font-size:10px;color:var(--color-warning);margin-top:2px}
.lock-note i{margin-left:2px}
.audit-list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.audit-list li{
  display:flex;
  align-items:flex-start;
  gap:8px;
  font-size:var(--text-xs);
  color:var(--text-body);
  padding:6px 8px;
  border-radius:var(--radius-sm);
  background:var(--color-gray-50);
}
.audit-list .when{
  color:var(--text-muted);
  font-size:10px;
  min-width:90px;
  white-space:nowrap;
}
.check-list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:6px;
  font-size:var(--text-sm);
}
.check-list li{padding:6px 10px;border-radius:var(--radius-sm);background:var(--color-gray-50)}
.check-list li.danger{background:var(--color-danger-light);color:var(--color-danger)}
.check-list li.warn{background:var(--color-warning-light);color:var(--color-warning)}
.check-list li.ok{background:var(--color-success-light);color:var(--color-success)}
.big-number{
  font-size:var(--text-2xl);
  font-weight:var(--weight-black);
  font-family:var(--font-mono);
  color:var(--color-primary);
  text-align:center;
  letter-spacing:2px;
  padding:var(--space-3);
  background:var(--color-primary-light);
  border-radius:var(--radius-md);
  margin-bottom:var(--space-3);
  direction:ltr;
}
.kv{
  display:flex;
  flex-direction:column;
  gap:6px;
  font-size:var(--text-sm);
}
.kv>div{
  display:flex;
  align-items:center;
  gap:6px;
  padding:4px 0;
  border-bottom:1px solid var(--border-color);
}
.kv>div:last-child{border-bottom:none}
.kv b{
  min-width:90px;
  color:var(--text-muted);
  font-weight:var(--weight-semibold);
  font-size:var(--text-xs);
}
.thread{
  display:flex;
  flex-direction:column;
  gap:var(--space-3);
}
.thread-msg{
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:var(--space-3) var(--space-4);
  border-radius:var(--radius-md);
  border:1px solid var(--border-color);
  background:var(--color-gray-50);
  max-width:90%;
  align-self:flex-start;
}
.thread-msg.user{background:var(--color-info-light);border-color:#bae6fd;align-self:flex-start}
.thread-msg.staff{background:var(--color-primary-light);border-color:var(--color-primary);align-self:flex-end}
.thread-msg.internal{background:var(--color-warning-light);border-color:var(--color-warning);align-self:flex-end}
.thread-msg--self{align-self:flex-start}
.thread-meta{
  display:flex;
  justify-content:space-between;
  font-size:var(--text-xs);
  color:var(--text-muted);
  margin-bottom:4px;
}
.thread-meta strong{color:var(--text-body);font-weight:var(--weight-bold)}
.thread-msg p{margin:0;font-size:var(--text-sm);line-height:var(--leading-relaxed);color:var(--text-body)}
.thread-empty{font-size:var(--text-sm);margin:0}
.canned{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-bottom:var(--space-2);
}
.canned button{
  padding:4px 10px;
  border-radius:var(--radius-full);
  border:1px solid var(--border-color);
  background:var(--bg-card);
  color:var(--text-muted);
  font-size:var(--text-xs);
  cursor:pointer;
  font-family:var(--font-family);
  transition:var(--transition-fast);
}
.canned button:hover{border-color:var(--color-primary);color:var(--color-primary)}
.prio{
  display:inline-flex;
  align-items:center;
  padding:2px 10px;
  border-radius:var(--radius-full);
  font-size:var(--text-xs);
  font-weight:var(--weight-bold);
  background:var(--color-gray-100);
  color:var(--text-muted);
}
.prio.high{background:var(--color-danger-light);color:var(--color-danger)}
.prio.medium{background:var(--color-warning-light);color:var(--color-warning)}
.prio.low{background:var(--color-info-light);color:var(--color-info)}
.ticket-title-link{text-decoration:none;color:var(--text-body)}
.sp-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:var(--space-4);
  flex-wrap:wrap;
  gap:var(--space-3);
}
.sp-back{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:var(--text-sm);
  color:var(--text-muted);
  text-decoration:none;
  padding:8px 14px;
  border-radius:var(--radius-md);
  transition:var(--transition-fast);
}
.sp-back:hover{background:var(--color-gray-100);color:var(--text-body)}
.sp-back:focus-visible{border-color:var(--color-primary)}
.sp-header{
  position:relative;
  overflow:hidden;
  background:var(--bg-card);
  border:1px solid var(--border-color);
  border-radius:var(--radius-lg);
  padding:var(--space-4) var(--space-5);
  display:flex;
  align-items:center;
  gap:var(--space-4);
  margin-bottom:var(--space-4);
  flex-wrap:wrap;
}
.sp-header.has-cover::before{
  content:'';
  position:absolute;
  inset:0;
  background:var(--cover) center/cover;
  opacity:0.12;
}
.sp-header>*{position:relative;z-index:1}
.sp-header-logo{
  width:72px;
  height:72px;
  border-radius:var(--radius-full);
  overflow:hidden;
  background:var(--color-primary-light);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  border:3px solid var(--color-primary);
  font-size:1.75rem;
  font-weight:var(--weight-black);
  color:var(--color-primary);
}
.sp-header-logo img{width:100%;height:100%;object-fit:cover}
.sp-header-info{flex:1;min-width:0}
.sp-header-name{
  font-size:var(--text-xl);
  font-weight:var(--weight-black);
  color:var(--text-body);
  margin:0 0 6px;
  display:flex;
  align-items:center;
  gap:var(--space-2);
  flex-wrap:wrap;
}
.sp-header-meta{
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-3);
  font-size:var(--text-xs);
  color:var(--text-muted);
}
.sp-header-meta span{display:inline-flex;align-items:center;gap:4px}
.sp-header-meta i{color:var(--color-primary);font-size:0.75rem}
.verified-badge{
  display:inline-flex;
  align-items:center;
  gap:4px;
  background:var(--color-success-light);
  color:var(--color-success);
  padding:2px 10px;
  border-radius:var(--radius-full);
  font-size:11px;
  font-weight:var(--weight-bold);
}
.verified-badge.featured-badge{background:var(--color-warning-light);color:var(--color-warning)}
.verified-badge.verified-badge--pending{background:var(--color-warning-light);color:var(--color-warning)}
.verified-badge.verified-badge--info{background:var(--color-info-light);color:var(--color-info)}
.verified-badge.verified-badge--danger{background:var(--color-danger-light);color:var(--color-danger)}
.sp-layout{
  display:grid;
  grid-template-columns:320px 1fr;
  gap:var(--space-4);
  align-items:flex-start;
}
.sp-side{
  display:flex;
  flex-direction:column;
  gap:var(--space-4);
  position:sticky;
  top:20px;
}
.sp-main{min-width:0}
.sp-card{
  background:var(--bg-card);
  border:1px solid var(--border-color);
  border-radius:var(--radius-lg);
  padding:var(--space-4);
  box-shadow:var(--shadow-sm);
}
.sp-card-title{
  font-size:var(--text-sm);
  font-weight:var(--weight-bold);
  color:var(--text-body);
  margin:0 0 var(--space-3);
  display:flex;
  align-items:center;
  gap:var(--space-2);
}
.sp-progress-wrap{
  position:relative;
  width:120px;
  height:120px;
  margin:0 auto var(--space-3);
}
.sp-progress-wrap svg{width:120px;height:120px;transform:rotate(-90deg)}
.sp-progress-ring-bg{fill:none;stroke:var(--color-gray-100);stroke-width:10}
.sp-progress-ring-fill{
  fill:none;
  stroke:var(--color-primary);
  stroke-width:10;
  stroke-linecap:round;
  transition:stroke-dashoffset 0.8s ease;
}
.sp-progress-text{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}
.sp-progress-percent{
  font-size:var(--text-2xl);
  font-weight:var(--weight-black);
  color:var(--color-primary);
  line-height:1;
}
.sp-progress-label{font-size:10px;color:var(--text-muted);margin-top:4px}
.sp-progress-msg{
  font-size:var(--text-xs);
  color:var(--text-muted);
  line-height:var(--leading-relaxed);
  text-align:center;
  margin:var(--space-2) 0 var(--space-4);
}
.sp-checklist{display:flex;flex-direction:column;gap:var(--space-1)}
.sp-check{
  display:flex;
  align-items:center;
  gap:var(--space-2);
  padding:8px 10px;
  border-radius:var(--radius-sm);
  background:var(--color-gray-50);
  font-size:var(--text-xs);
  color:var(--text-body);
  cursor:pointer;
  transition:var(--transition-fast);
  border:1px solid transparent;
  text-decoration:none;
}
.sp-check:hover{
  border-color:var(--color-primary);
  background:var(--color-primary-light);
  transform:translateX(-3px);
}
.sp-check.done{background:var(--color-success-light);color:#065f46}
.sp-check .check-icon{
  width:18px;
  height:18px;
  border-radius:50%;
  background:var(--color-gray-200);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:9px;
  color:var(--text-muted);
  flex-shrink:0;
}
.sp-check.done .check-icon{background:var(--color-success);color:#fff}
.sp-check .check-text{flex:1}
.sp-check .go{font-size:0.65rem;color:var(--text-muted);flex-shrink:0}
.sp-badges{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--space-2);
  margin-top:var(--space-4);
  padding-top:var(--space-3);
  border-top:1px solid var(--border-color);
}
.sp-badge{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  padding:var(--space-2);
  border-radius:var(--radius-sm);
  background:var(--color-gray-50);
  color:var(--color-gray-400);
  font-size:10px;
  transition:var(--transition-fast);
}
.sp-badge i{font-size:1.25rem}
.sp-badge.earned{
  background:var(--color-primary-light);
  color:var(--color-primary);
  box-shadow:0 2px 8px rgba(249,115,22,0.15);
}
.sp-demo-card{
  background:linear-gradient(135deg,var(--color-primary-light),var(--bg-card));
  border:1px solid var(--color-primary);
  border-radius:var(--radius-lg);
  padding:var(--space-4);
}
.sp-demo-card h4{
  font-size:var(--text-base);
  font-weight:var(--weight-bold);
  color:var(--text-body);
  margin:0 0 var(--space-2);
}
.sp-demo-card p{
  font-size:var(--text-sm);
  color:var(--text-muted);
  margin:0 0 var(--space-3);
  line-height:var(--leading-relaxed);
}
.sp-tabs{
  display:flex;
  gap:var(--space-1);
  background:var(--bg-card);
  border:1px solid var(--border-color);
  border-radius:var(--radius-lg);
  padding:var(--space-2);
  box-shadow:var(--shadow-sm);
  overflow-x:auto;
  scrollbar-width:none;
  margin-bottom:var(--space-4);
  -webkit-overflow-scrolling:touch;
}
.sp-tabs::-webkit-scrollbar{display:none}
.sp-tab{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:10px 18px;
  border-radius:var(--radius-md);
  font-size:var(--text-sm);
  font-weight:var(--weight-semibold);
  color:var(--text-muted);
  cursor:pointer;
  transition:var(--transition-fast);
  border:none;
  background:transparent;
  white-space:nowrap;
  position:relative;
  font-family:var(--font-family);
}
.sp-tab:hover{background:var(--color-gray-50);color:var(--text-body)}
.sp-tab.active{background:var(--color-primary);color:#fff;box-shadow:0 4px 12px rgba(249,115,22,0.3)}
.sp-tab i{font-size:0.85rem}
.sp-tab .tab-dot{
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--color-danger);
  position:absolute;
  top:6px;
  right:6px;
}
.sp-tab.active .tab-dot{background:#fff}
.sp-panel{display:none}
.sp-panel.active{display:block}
.sp-section{
  background:var(--bg-card);
  border:1px solid var(--border-color);
  border-radius:var(--radius-lg);
  padding:var(--space-5);
  margin-bottom:var(--space-4);
}
.sp-section-title{
  font-size:var(--text-base);
  font-weight:var(--weight-bold);
  color:var(--text-body);
  margin:0 0 var(--space-4);
  padding-bottom:var(--space-3);
  border-bottom:1px solid var(--border-color);
  display:flex;
  align-items:center;
  gap:var(--space-2);
  flex-wrap:wrap;
}
.sp-section-title i:first-child{
  color:var(--color-primary);
  width:32px;
  height:32px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--color-primary-light);
  border-radius:var(--radius-md);
  font-size:0.85rem;
}
.section-status{
  margin-right:auto;
  font-size:10px;
  font-weight:var(--weight-bold);
  padding:3px 10px;
  border-radius:var(--radius-full);
  white-space:nowrap;
}
.section-status.ok{background:var(--color-success-light);color:var(--color-success)}
.section-status.missing{background:var(--color-warning-light);color:var(--color-warning)}
.sp-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4)}
.sp-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-4)}
.sp-grid-2--mt{margin-top:var(--space-4)}
.sp-field{
  display:flex;
  flex-direction:column;
  gap:var(--space-1);
  margin-bottom:var(--space-4);
  position:relative;
}
.sp-field:last-child{margin-bottom:0}
.sp-field--mt{margin-top:var(--space-4)}
.sp-field-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-2);
  margin-bottom:4px;
}
.sp-field-header .sp-label{margin:0}
.sp-btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:10px 18px;
  border-radius:var(--radius-md);
  font-size:var(--text-sm);
  font-weight:var(--weight-semibold);
  cursor:pointer;
  border:none;
  transition:all 0.2s ease;
  text-decoration:none;
  white-space:nowrap;
  font-family:var(--font-family);
}
.sp-btn:focus-visible{border-color: var(--color-primary)}
.sp-btn-primary{background:var(--color-primary);color:#fff;box-shadow:0 2px 8px rgba(249,115,22,0.2)}
.sp-btn-primary:hover{background:var(--color-primary-dark);transform:translateY(-1px)}
.sp-btn-outline{background:var(--bg-card);color:var(--text-body);border:1.5px solid var(--border-color)}
.sp-btn-outline:hover{border-color:var(--color-primary);color:var(--color-primary)}
.sp-btn-danger{background:var(--color-danger);color:#fff}
.sp-btn-danger:hover{background:#b91c1c;transform:translateY(-1px)}
.sp-btn-demo{background:var(--color-primary-light);color:var(--color-primary);border:1.5px solid var(--color-primary)}
.sp-btn-demo:hover{background:var(--color-primary);color:#fff}
.sp-btn-block{width:100%;justify-content:center}
.sp-input.verified,
.sp-select.verified,
.sp-textarea.verified{
  border-color:rgba(5,150,105,0.4);
  background:rgba(5,150,105,0.02);
}
.field-status{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:2px 8px;
  border-radius:var(--radius-full);
  font-size:10px;
  font-weight:var(--weight-bold);
  white-space:nowrap;
}
.field-status.ok{background:var(--color-success-light);color:var(--color-success)}
.field-status.missing{background:var(--color-warning-light);color:var(--color-warning)}
.sp-counter{
  position:absolute;
  left:12px;
  bottom:6px;
  font-size:10px;
  color:var(--text-muted);
  pointer-events:none;
}
.sp-flash{animation:spFlash 1.6s ease-out}
@keyframes spFlash{
  0%{box-shadow:0 0 0 0 rgba(249,115,22,0.4)}
  50%{box-shadow:0 0 0 8px rgba(249,115,22,0)}
  100%{box-shadow:0 0 0 0 rgba(249,115,22,0)}
}
.sp-map-tools{
  display:flex;
  gap:var(--space-2);
  flex-wrap:wrap;
  margin-bottom:var(--space-3);
}
.sp-map-tools .sp-input{flex:1;min-width:200px}
.sp-map-wrap{
  width:100%;
  height:320px;
  border-radius:var(--radius-md);
  overflow:hidden;
  border:1px solid var(--border-color);
  margin-bottom:var(--space-2);
  background:var(--color-gray-100);
}
.sp-map{width:100%;height:100%}
.sp-map-status{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:var(--text-xs);
  color:var(--text-muted);
  padding:var(--space-2) var(--space-3);
  background:var(--color-gray-50);
  border-radius:var(--radius-sm);
  margin-bottom:var(--space-3);
}
.sp-map-status.ok{background:var(--color-success-light);color:var(--color-success)}
.sp-presets{
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-2);
  margin-bottom:var(--space-3);
}
.sp-presets button{
  padding:4px 12px;
  border-radius:var(--radius-full);
  border:1px solid var(--border-color);
  background:var(--bg-card);
  color:var(--text-muted);
  font-size:var(--text-xs);
  cursor:pointer;
  font-family:var(--font-family);
  transition:var(--transition-fast);
}
.sp-presets button:hover{border-color:var(--color-primary);color:var(--color-primary)}
.sp-days-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(100px,1fr));
  gap:var(--space-2);
}
.sp-day{
  display:flex;
  align-items:center;
  gap:6px;
  padding:8px 12px;
  border:1.5px solid var(--border-color);
  border-radius:var(--radius-sm);
  cursor:pointer;
  font-size:var(--text-sm);
  transition:var(--transition-fast);
  user-select:none;
  background:var(--bg-card);
  color:var(--text-body);
}
.sp-day:hover{border-color:var(--color-primary)}
.sp-day input{accent-color:var(--color-primary)}
.sp-day:has(input:checked){
  background:var(--color-primary-light);
  border-color:var(--color-primary);
  color:var(--color-primary);
  font-weight:var(--weight-bold);
}
.sp-checkbox-group{
  display:flex;
  flex-direction:column;
  gap:var(--space-2);
  margin-top:var(--space-3);
}
.sp-checkbox{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:var(--text-sm);
  cursor:pointer;
  color:var(--text-body);
}
.sp-checkbox input{accent-color:var(--color-primary)}
.sp-chips{
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-2);
}
.sp-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:8px 14px;
  border:1.5px solid var(--border-color);
  border-radius:var(--radius-full);
  background:var(--bg-card);
  cursor:pointer;
  font-size:var(--text-sm);
  color:var(--text-body);
  transition:var(--transition-fast);
  user-select:none;
  position:relative;
}
.sp-chip:hover{border-color:var(--color-primary)}
.sp-chip input{position:absolute;opacity:0;pointer-events:none}
.sp-chip:has(input:checked){
  background:var(--color-primary);
  border-color:var(--color-primary);
  color:#fff;
}
.sp-links-list{
  display:flex;
  flex-direction:column;
  gap:var(--space-2);
  margin-bottom:var(--space-3);
}
.sp-link-row{
  display:grid;
  grid-template-columns:1fr 1.5fr auto;
  gap:var(--space-2);
  align-items:center;
}
.sp-service-row{
  display:grid;
  grid-template-columns:1.5fr 1fr 1.5fr auto;
  gap:var(--space-2);
  align-items:center;
}
.sp-link-remove{
  width:36px;
  height:36px;
  border-radius:var(--radius-sm);
  border:1px solid var(--color-danger-light);
  background:var(--color-danger-light);
  color:var(--color-danger);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:0.85rem;
  transition:var(--transition-fast);
  flex-shrink:0;
}
.sp-link-remove:hover{background:var(--color-danger);color:#fff}
.sp-add-link{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:8px 16px;
  border:1.5px dashed var(--color-primary);
  background:var(--color-primary-light);
  color:var(--color-primary);
  border-radius:var(--radius-md);
  cursor:pointer;
  font-size:var(--text-sm);
  font-weight:var(--weight-semibold);
  font-family:var(--font-family);
  transition:var(--transition-fast);
}
.sp-add-link:hover{background:var(--color-primary);color:#fff;border-style:solid}
.sp-image-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
  gap:var(--space-4);
  margin-bottom:var(--space-4);
}
.sp-image-item{display:flex;flex-direction:column;gap:var(--space-2)}
.sp-image-upload{
  position:relative;
  width:100%;
  aspect-ratio:1/1;
  border-radius:var(--radius-md);
  background:var(--color-gray-50);
  border:2px dashed var(--border-color);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  cursor:pointer;
  transition:var(--transition-fast);
}
.sp-image-upload:hover{border-color:var(--color-primary);background:var(--color-primary-light)}
.sp-image-upload.wide{aspect-ratio:4/1}
.sp-image-upload .sp-image-preview{width:100%;height:100%;object-fit:cover}
.sp-image-upload .sp-image-placeholder{font-size:2.5rem;color:var(--color-gray-300)}
.sp-image-upload .sp-file-input{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  opacity:0;
  cursor:pointer;
}
.sp-image-hint{
  text-align:center;
  font-size:11px;
  color:var(--text-muted);
  line-height:1.7;
}
.sp-image-hint strong{color:var(--text-body);font-size:var(--text-xs)}
.sp-image-hint-ok{color:var(--color-success);font-weight:var(--weight-bold)}
.sp-image-hint-missing{color:var(--color-warning);font-weight:var(--weight-bold)}
.sp-dropzone{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:var(--space-2);
  padding:var(--space-6);
  border:2px dashed var(--border-color);
  border-radius:var(--radius-lg);
  background:var(--color-gray-50);
  cursor:pointer;
  text-align:center;
  transition:var(--transition-fast);
  margin-bottom:var(--space-4);
}
.sp-dropzone:hover{border-color:var(--color-primary);background:var(--color-primary-light)}
.sp-dropzone>i{font-size:2rem;color:var(--color-primary)}
.sp-dropzone>strong{color:var(--text-body);font-size:var(--text-sm)}
.sp-gallery-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(120px,1fr));
  gap:var(--space-3);
}
.sp-gallery-item{
  position:relative;
  aspect-ratio:1/1;
  border:none;
  overflow:hidden;
}
.sp-gallery-item img{width:100%;height:100%;object-fit:cover}
.sp-gallery-del{
  position:absolute;
  top:6px;
  left:6px;
  background:rgba(0,0,0,0.6);
  color:#fff;
  width:28px;
  height:28px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  font-size:12px;
}
.sp-gallery-del input{position:absolute;inset:0;opacity:0;cursor:pointer}
.sp-gallery-item.marked{outline:3px solid var(--color-danger)}
.sp-gallery-item.marked img{opacity:0.4}
.sp-filters{
  display:flex;
  gap:var(--space-2);
  flex-wrap:wrap;
}
.sp-filters button{
  padding:6px 14px;
  border-radius:var(--radius-full);
  border:1px solid var(--border-color);
  background:var(--bg-card);
  color:var(--text-muted);
  font-size:var(--text-xs);
  cursor:pointer;
  font-family:var(--font-family);
  transition:var(--transition-fast);
}
.sp-filters button:hover{border-color:var(--color-primary);color:var(--color-primary)}
.sp-filters button.active{
  background:var(--color-primary);
  border-color:var(--color-primary);
  color:#fff;
  font-weight:var(--weight-bold);
}
.sp-timeline{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:var(--space-4);
}
.sp-timeline-item{
  position:relative;
  display:flex;
  gap:var(--space-3);
  align-items:flex-start;
}
.sp-timeline-item--hidden{display:none}
.sp-timeline-icon{
  width:32px;
  height:32px;
  border-radius:50%;
  background:var(--color-gray-100);
  color:var(--text-muted);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:0.85rem;
  flex-shrink:0;
}
.sp-timeline-icon.success{background:var(--color-success-light);color:var(--color-success)}
.sp-timeline-icon.warning{background:var(--color-warning-light);color:var(--color-warning)}
.sp-timeline-icon.danger{background:var(--color-danger-light);color:var(--color-danger)}
.sp-timeline-icon.info{background:var(--color-info-light);color:var(--color-info)}
.sp-timeline-content{
  flex:1;
  min-width:0;
  background:var(--color-gray-50);
  border-radius:var(--radius-md);
  padding:var(--space-3) var(--space-4);
}
.sp-timeline-title{
  font-size:var(--text-sm);
  font-weight:var(--weight-bold);
  color:var(--text-body);
  margin:0 0 4px;
}
.sp-timeline-desc{
  font-size:var(--text-xs);
  color:var(--text-muted);
  margin:0;
  line-height:var(--leading-relaxed);
}
.sp-timeline-meta{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:var(--space-2);
  font-size:10px;
  color:var(--text-muted);
  flex-wrap:wrap;
}
.sp-actions{
  display:flex;
  justify-content:space-between;
  gap:var(--space-3);
  padding:var(--space-4);
  background:var(--bg-card);
  border:1px solid var(--border-color);
  border-radius:var(--radius-lg);
  position:sticky;
  bottom:var(--space-3);
  z-index:10;
  box-shadow:0 -4px 20px rgba(15,26,46,0.06);
  flex-wrap:wrap;
  margin-top:var(--space-4);
}
.sp-actions-group{
  display:flex;
  gap:var(--space-2);
  flex-wrap:wrap;
}
.info-actions{
  margin-top:var(--space-3);
  padding-top:var(--space-3);
  border-top:1px solid var(--border-color);
  display:flex;
  flex-direction:column;
  gap:var(--space-2);
}
.info-actions .sp-btn{width:100%;justify-content:center}
.sp-toast{
  position:fixed;
  top:var(--space-4);
  left:var(--space-4);
  z-index:9999;
  display:flex;
  flex-direction:column;
  gap:var(--space-2);
  pointer-events:none;
  max-width:min(90vw,420px);
}
.sp-toast .toast-item{
  pointer-events:auto;
  padding:var(--space-3) var(--space-5);
  border-radius:var(--radius-md);
  background:var(--bg-card);
  border:1px solid var(--border-color);
  box-shadow:var(--shadow-lg);
  font-size:var(--text-sm);
  font-weight:var(--weight-medium);
  color:var(--text-body);
  display:flex;
  align-items:center;
  gap:var(--space-2);
}
.sp-toast .toast-item.success{background:var(--color-success-light);border-color:#a7f3d0;color:#065f46}
.sp-toast .toast-item.error,
.sp-toast .toast-item.danger{background:var(--color-danger-light);border-color:#fecaca;color:#991b1b}
.sp-toast .toast-item.info{background:var(--color-info-light);border-color:#bae6fd;color:#0c4a6e}
.sp-toast .toast-item.warning{background:var(--color-warning-light);border-color:#fde68a;color:#92400e}
@keyframes spToastIn{
  from{opacity:0;transform:translateX(-20px)}
  to{opacity:1;transform:translateX(0)}
}
.sp-toast-out{opacity:0;transform:translateX(-20px);transition:all 0.3s ease}
.edit-listing-alert .alert-body{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-4);
  flex-wrap:wrap;
  flex:1;
  min-width:0;
}
.edit-listing-alert .alert-body span{
  flex:1;
  min-width:0;
  line-height:1.8;
}
.edit-listing-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:var(--space-4);
  flex-wrap:wrap;
  gap:var(--space-3);
}
.edit-listing-topbar-actions{
  display:flex;
  gap:var(--space-2);
  flex-wrap:wrap;
}
.edit-listing-back{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:var(--text-sm);
  color:var(--text-muted);
  text-decoration:none;
  padding:8px 14px;
  border-radius:var(--radius-md);
  transition:var(--transition-fast);
}
.edit-listing-back:hover{background:var(--color-gray-100);color:var(--text-body)}
.edit-listing-back:focus-visible{border-color: var(--color-primary)}
.edit-listing-demo-btn{
  display:inline-flex;
  align-items:center;
  padding:10px 18px;
  border-radius:var(--radius-sm);
  font-size:var(--text-sm);
  font-weight:var(--weight-semibold);
  border:none;
  background:var(--color-primary);
  color:#fff;
  transition:var(--transition-fast);
}
.edit-listing-demo-btn:hover{transform:translateY(-1px)}
.edit-listing-demo-btn:focus-visible{border-color: var(--color-primary)}
.edit-listing-page-title h1{
  font-size:var(--text-2xl);
  font-weight:var(--weight-extrabold);
  color:var(--text-body);
  margin:0 0 var(--space-3);
}
.edit-listing-alert{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:14px 18px;
  background:#fef6e7;
  border:1px solid #f5d9a8;
  border-radius:var(--radius-md);
  margin-bottom:var(--space-4);
  font-size:13px;
  line-height:1.85;
  color:#92400e;
}
.edit-listing-alert i{
  color:#d97706;
  font-size:20px;
  flex-shrink:0;
  margin-top:2px;
}
.edit-listing-alert strong{color:#78350f;font-weight:800}
.edit-listing-layout{
  display:grid;
  grid-template-columns:380px 1fr;
  gap:var(--space-5);
}
.edit-listing-main-column{
  display:flex;
  flex-direction:column;
  gap:var(--space-4);
  min-width:0;
}
.edit-listing-sidebar{
  display:flex;
  flex-direction:column;
  gap:var(--space-4);
  position:sticky;
  top:90px;
}
.edit-listing-card,
.preview-card{
  background:var(--bg-card);
  border:1px solid var(--border-color);
  border-radius:var(--radius-lg);
  padding:var(--space-5);
  box-shadow:var(--shadow-sm);
}
.edit-listing-section{
  padding-bottom:var(--space-4);
  margin-bottom:var(--space-4);
  border-bottom:1px solid var(--border-color);
}
.edit-listing-section:last-of-type{
  border-bottom:none;
  padding-bottom:0;
  margin-bottom:0;
}
.edit-listing-section-title{
  font-size:var(--text-sm);
  font-weight:var(--weight-bold);
  color:var(--text-body);
  margin-bottom:var(--space-3);
  display:flex;
  align-items:center;
  gap:var(--space-2);
  flex-wrap:wrap;
}
.edit-listing-section-title i{
  color:var(--color-primary);
  width:26px;
  height:26px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--color-primary-light);
  border-radius:var(--radius-sm);
  font-size:0.8rem;
}
.edit-price-tag{
  margin-right:auto;
  background:var(--color-primary) !important;
  color:#fff !important;
  border-radius:24px;
  padding:4px 10px;
  font-size:10px;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:4px;
}
.edit-price-tag i{
  color:#fff !important;
  width:auto;
  height:auto;
  background:transparent;
  font-size:10px;
}
.edit-price-tag.locked{
  background:var(--color-gray-300) !important;
  color:var(--text-muted) !important;
  cursor:not-allowed !important;
}
.edit-price-tag.locked i{color:var(--text-muted) !important}
.preview-sim{
  background:linear-gradient(135deg,var(--color-primary-light),#fff);
  border:1.5px solid var(--color-primary);
  border-radius:var(--radius-lg);
  padding:var(--space-4);
  position:relative;
}
.preview-sim .badge-featured{
  position:absolute;
  top:-8px;
  right:12px;
  background:var(--color-warning);
  color:#fff;
  padding:2px 12px;
  border-radius:var(--radius-full);
  font-size:10px;
  font-weight:var(--weight-bold);
  box-shadow:0 2px 8px rgba(217,119,6,0.3);
  z-index:2;
}
.preview-sim .sim-image{
  width:100%;
  aspect-ratio:1/1;
  border-radius:var(--radius-md);
  overflow:hidden;
  background:var(--color-gray-100);
  margin-bottom:var(--space-3);
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--border-color);
  position:relative;
  cursor:pointer;
  transition:var(--transition-fast);
}
.preview-sim .sim-image:hover{border-color:var(--color-primary)}
.preview-sim .sim-image:hover::after{
  content:'\f304';
  font-family:'Font Awesome 6 Free';
  font-weight:900;
  position:absolute;
  inset:0;
  background:rgba(15,26,46,0.55);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.5rem;
  z-index:2;
}
.preview-sim .sim-image img{width:100%;height:100%;object-fit:cover}
.preview-sim .sim-image i.placeholder-icon{font-size:2.5rem;color:var(--color-gray-300)}
.preview-sim .sim-image input[type="file"]{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  opacity:0;
  cursor:pointer;
  z-index:3;
}
.preview-sim .sim-image .img-hint{
  position:absolute;
  bottom:8px;
  left:8px;
  background:rgba(0,0,0,0.6);
  color:#fff;
  font-size:10px;
  padding:2px 8px;
  border-radius:var(--radius-full);
  pointer-events:none;
  z-index:4;
}
.preview-sim .sim-number{
  font-size:var(--text-xl);
  font-weight:var(--weight-black);
  color:var(--text-body);
  text-align:center;
  letter-spacing:2px;
  margin-bottom:var(--space-3);
  padding-bottom:var(--space-3);
  border-bottom:1px solid var(--border-color);
}
.preview-sim .sim-meta-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:var(--space-2);
  flex-wrap:wrap;
  margin-bottom:var(--space-3);
}
.preview-sim .sim-meta-row .tag{
  background:rgba(249,115,22,0.1);
  color:var(--color-primary);
  padding:2px 10px;
  border-radius:var(--radius-full);
  font-size:10px;
  font-weight:var(--weight-semibold);
}
.preview-sim .sim-price-row{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
}
.preview-sim .sim-price-row .label-sm{
  font-size:var(--text-xs);
  color:var(--text-muted);
}
.preview-sim .sim-price{
  font-size:var(--text-xl);
  font-weight:var(--weight-black);
  color:var(--color-primary-dark);
  display:flex;
  align-items:baseline;
  gap:4px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.preview-sim .sim-price .currency{font-size:var(--text-xs);color:var(--text-muted);font-weight:var(--weight-normal)}
.preview-sim .sim-price .old-price{font-size:var(--text-xs);color:var(--text-muted);text-decoration:line-through;font-weight:var(--weight-normal)}
.preview-sim .sim-price .discount-tag{
  background:var(--color-danger);
  color:#fff;
  padding:2px 8px;
  border-radius:var(--radius-full);
  font-size:10px;
  font-weight:var(--weight-bold);
}
.preview-title{
  font-size:var(--text-sm);
  font-weight:var(--weight-bold);
  color:var(--text-body);
  margin-bottom:var(--space-3);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-2);
}
.preview-title i{color:var(--color-primary)}
.preview-title a{
  font-size:var(--text-xs);
  color:var(--color-primary);
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:4px;
  font-weight:var(--weight-semibold);
}
.preview-title a:hover{text-decoration:underline}
.info-title{
  font-size:var(--text-sm);
  font-weight:var(--weight-bold);
  color:var(--text-body);
  margin-bottom:var(--space-3);
  display:flex;
  align-items:center;
  gap:var(--space-2);
}
.info-title i{
  color:var(--color-primary);
  width:22px;
  height:22px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--color-primary-light);
  border-radius:var(--radius-sm);
  font-size:0.7rem;
}
.listing-meta{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-bottom:var(--space-3);
  padding-bottom:var(--space-3);
  border-bottom:1px solid var(--border-color);
}
.listing-meta .chip{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:4px 10px;
  border-radius:var(--radius-full);
  font-weight:var(--weight-semibold);
  font-size:10px;
  background:var(--color-gray-100);
  color:var(--text-muted);
}
.listing-meta .chip.success{background:var(--color-success-light);color:var(--color-success)}
.listing-meta .chip.warning{background:var(--color-warning-light);color:var(--color-warning)}
.listing-meta .chip.danger{background:var(--color-danger-light);color:var(--color-danger)}
.listing-meta .chip.info{background:var(--color-info-light);color:var(--color-info)}
.verification-box{
  border-radius:var(--radius-md);
  padding:var(--space-4);
  margin-bottom:0;
}
.verification-box.accepted{background:var(--color-success-light);border-right:4px solid var(--color-success)}
.verification-box.pending{background:var(--color-warning-light);border-right:4px solid var(--color-warning)}
.verification-box.in_check{background:var(--color-info-light);border-right:4px solid var(--color-info)}
.verification-box.rejected{background:var(--color-danger-light);border-right:4px solid var(--color-danger)}
.verification-box.need_verify{background:var(--color-gray-100);border-right:4px solid var(--color-gray-400)}
.verification-box .vb-header{
  display:flex;
  align-items:center;
  gap:var(--space-2);
  margin-bottom:var(--space-2);
}
.verification-box .vb-header i{font-size:1.1rem}
.verification-box.accepted .vb-header i{color:var(--color-success)}
.verification-box.pending .vb-header i{color:var(--color-warning)}
.verification-box.in_check .vb-header i{color:var(--color-info)}
.verification-box.rejected .vb-header i{color:var(--color-danger)}
.verification-box.need_verify .vb-header i{color:var(--color-gray-500)}
.verification-box .vb-header strong{font-size:var(--text-sm);font-weight:var(--weight-bold)}
.verification-box.accepted .vb-header strong{color:#065f46}
.verification-box.pending .vb-header strong{color:#92400e}
.verification-box.in_check .vb-header strong{color:#075985}
.verification-box.rejected .vb-header strong{color:#991b1b}
.verification-box.need_verify .vb-header strong{color:var(--color-gray-700)}
.verification-box .vb-text{font-size:var(--text-xs);line-height:var(--leading-relaxed)}
.verification-box.accepted .vb-text{color:#065f46}
.verification-box.pending .vb-text{color:#92400e}
.verification-box.in_check .vb-text{color:#075985}
.verification-box.rejected .vb-text{color:#991b1b}
.verification-box.need_verify .vb-text{color:var(--color-gray-600)}
.price-block{
  background:var(--color-gray-50);
  border:1px solid var(--border-color);
  border-radius:var(--radius-md);
  padding:var(--space-3);
  margin-bottom:var(--space-3);
}
.price-block:last-child{margin-bottom:0}
.price-block-tight{margin-top:var(--space-3);margin-bottom:0}
.price-block .price-current{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-bottom:var(--space-2);
  margin-bottom:var(--space-2);
}
.price-block .price-current .label{font-size:var(--text-xs);color:var(--text-muted)}
.price-block .price-current .value{font-size:var(--text-base);font-weight:var(--weight-extrabold);color:var(--color-primary)}
.price-block .price-original{
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:11px;
  color:var(--text-muted);
  padding:2px 0;
}
.price-block .price-original .value{font-weight:var(--weight-semibold);color:var(--text-body)}
.price-block .price-original .value.muted{color:var(--text-muted);font-weight:var(--weight-normal)}
.price-hint{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  color:#059669;
  margin-top:10px;
  line-height:2;
}
.price-hint i{color:var(--color-success);font-size:0.9rem;flex-shrink:0}
.price-hint.locked-hint{color:var(--color-warning)}
.price-hint.locked-hint i{color:var(--color-warning)}
.alert-section{
  margin:var(--space-4) 0;
  padding:0;
}
.alert{
  display:flex;
  align-items:flex-start;
  gap:var(--space-3);
  padding:var(--space-2);
  border-radius:var(--radius-md);
  font-size:12px;
  line-height:var(--leading-relaxed);
  margin-bottom:var(--space-4);
  text-align:justify;
}
.alert i{font-size:var(--text-lg);flex-shrink:0;margin-top:1px}
.alert-success{background:var(--color-success-light);color:#065f46;border:1px solid #a7f3d0}
.alert-warning{background:var(--color-warning-light);color:#92400e;border:1px solid #fde68a}
.alert-danger{background:var(--color-danger-light);color:#991b1b;border:1px solid #fecaca}
.alert-info{background:var(--color-info-light);color:#0c4a6e;border:1px solid #bae6fd}
.alert--form{margin-bottom:16px;text-align:right}
.alert .alert-icon{color:#d97706;font-size:1.2rem}
.about-page{
  max-width:900px;
  margin:0 auto;
  padding:var(--space-4);
}
.about-header{
  text-align:center;
  padding:var(--space-8) 0 var(--space-6);
}
.about-header .about-icon{
  font-size:4rem;
  color:var(--color-primary);
  display:inline-block;
}
.about-header h1{
  font-size:var(--text-3xl);
  font-weight:var(--weight-black);
  color:var(--text-body);
  margin-bottom:var(--space-2);
}
.about-header p{
  font-size:var(--text-lg);
  color:var(--text-muted);
  max-width:600px;
  margin:0 auto;
  line-height:var(--leading-relaxed);
}
.about-section{margin:var(--space-8) 0}
.about-section h2{
  font-size:var(--text-2xl);
  font-weight:var(--weight-bold);
  color:var(--text-body);
  margin-bottom:var(--space-3);
  display:flex;
  align-items:center;
  gap:var(--space-2);
}
.about-section h2 i{color:var(--color-primary)}
.about-section p{
  font-size:var(--text-base);
  color:var(--text-muted);
  line-height:var(--leading-relaxed);
  margin-bottom:var(--space-3);
}
.about-section ul{
  padding-right:var(--space-6);
  margin-bottom:var(--space-3);
}
.about-section ul li{
  font-size:var(--text-base);
  color:var(--text-muted);
  line-height:var(--leading-relaxed);
  list-style:disc;
  margin-bottom:var(--space-1);
}
.about-values{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  gap:var(--space-4);
  margin:var(--space-6) 0;
}
.about-values .value-card{
  background:var(--bg-card);
  border-radius:var(--radius-md);
  padding:var(--space-4);
  text-align:center;
  border:1px solid var(--border-color);
  transition:var(--transition-fast);
}
.about-values .value-card:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow-md);
  border-color:var(--color-primary);
}
.about-values .value-card .value-icon{
  font-size:2.5rem;
  color:var(--color-primary);
  margin-bottom:var(--space-2);
}
.about-values .value-card h4{
  font-size:var(--text-base);
  font-weight:var(--weight-bold);
  color:var(--text-body);
  margin-bottom:var(--space-1);
}
.about-values .value-card p{
  font-size:var(--text-sm);
  color:var(--text-muted);
  margin:0;
}
.about-stats{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:var(--space-4);
  margin:var(--space-6) 0;
}
.about-stats .stat-card{
  background:var(--bg-card);
  border-radius:var(--radius-md);
  padding:var(--space-4);
  text-align:center;
  border:1px solid var(--border-color);
}
.about-stats .stat-number{
  font-size:var(--text-2xl);
  font-weight:var(--weight-black);
  color:var(--color-primary);
  font-family:var(--font-family);
}
.about-stats .stat-label{
  font-size:var(--text-sm);
  color:var(--text-muted);
  margin-top:var(--space-1);
}
.about-team{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  gap:var(--space-4);
  margin:var(--space-4) 0;
}
.about-team .team-card{
  background:var(--bg-card);
  border-radius:var(--radius-md);
  padding:var(--space-4);
  text-align:center;
  border:1px solid var(--border-color);
  transition:var(--transition-fast);
}
.about-team .team-card:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow-md);
}
.about-team .team-card .team-avatar{
  width:80px;
  height:80px;
  border-radius:50%;
  background:var(--color-gray-100);
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto var(--space-3);
  font-size:2.5rem;
  color:var(--color-gray-500);
  overflow:hidden;
}
.about-team .team-card .team-avatar img{width:100%;height:100%;object-fit:cover}
.about-team .team-card h4{
  font-size:var(--text-base);
  font-weight:var(--weight-bold);
  color:var(--text-body);
  margin-bottom:var(--space-1);
}
.about-team .team-card p{
  font-size:var(--text-sm);
  color:var(--text-muted);
  margin:0;
}
.side-ads{
  width:160px;
  flex-shrink:0;
  display:flex;
  flex-direction:column;
  gap:var(--space-5);
  position:sticky;
  top:50px;
  align-self:flex-start;
}
.right-ads{margin-left:var(--space-5)}
.left-ads{margin-right:var(--space-5)}
.ad-banner{
  position:relative;
  background:var(--bg-card);
  border-radius:var(--radius-sm);
  box-shadow:var(--shadow-sm);
  overflow:hidden;
  transition:opacity var(--transition-fast);
  width:100%;
}
.ad-banner img{width:100%;height:auto;display:block}
.ad-close{
  position:absolute;
  top:var(--space-1);
  right:var(--space-1);
  background:rgba(0,0,0,0.65);
  color:var(--color-white);
  border:none;
  border-radius:50%;
  width:22px;
  height:22px;
  font-size:14px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  line-height:1;
  transition:background var(--transition-fast);
}
.ad-close:hover{background:rgba(0,0,0,0.9)}
.ad-close:focus-visible{border-color:var(--color-primary)}
.ad-label{
  position:absolute;
  bottom:var(--space-2);
  right:var(--space-2);
  background:rgba(15,26,46,0.75);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  color:var(--color-white);
  font-size:var(--text-xs);
  padding:var(--space-1) var(--space-3);
  border-radius:var(--radius-full);
  font-weight:var(--weight-medium);
  pointer-events:none;
}
.ad-card{
  background:var(--bg-card);
  border-radius:var(--radius-md);
  padding:var(--space-4);
  border:1px solid var(--border-color);
  border-right:4px solid var(--color-primary);
  display:flex;
  align-items:center;
  gap:var(--space-3);
  transition:all 0.2s;
}
.ad-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.ad-card .ad-icon{
  width:48px;
  height:48px;
  border-radius:var(--radius-sm);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.3rem;
  flex-shrink:0;
}
.ad-card .ad-icon i{font-size:1.3rem}
.ad-card h4{margin:0;font-size:0.95rem;color:var(--text-body)}
.ad-card .tag{font-size:0.65rem;padding:1px 8px}
.ad-card p{margin:var(--space-1) 0;font-size:0.85rem;color:var(--text-muted)}
.ad-card .ad-price{font-weight:var(--weight-bold);color:var(--color-primary);font-size:0.85rem}
.ads-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:var(--space-4);
}
.blog-page-header{
  text-align:center;
  padding:var(--space-8) 0 var(--space-6);
  border-bottom:1px solid var(--border-color);
  margin-bottom:var(--space-6);
}
.blog-page-header h1{
  font-size:var(--text-3xl);
  font-weight:var(--weight-black);
  color:var(--text-body);
  margin-bottom:var(--space-2);
}
.blog-page-header p{
  font-size:var(--text-lg);
  color:var(--text-muted);
  max-width:600px;
  margin:0 auto;
}
.blog-categories{
  display:flex;
  gap:var(--space-2);
  flex-wrap:wrap;
  justify-content:center;
  margin-bottom:var(--space-6);
}
.blog-categories .cat-btn{
  padding:var(--space-1) var(--space-4);
  border-radius:var(--radius-full);
  border:1px solid var(--border-color);
  background:var(--bg-card);
  color:var(--text-muted);
  cursor:pointer;
  transition:var(--transition-fast);
  font-family:var(--font-family);
  font-size:var(--text-sm);
}
.blog-categories .cat-btn:hover{
  border-color:var(--color-primary);
  color:var(--color-primary);
  background:var(--color-primary-light);
}
.blog-categories .cat-btn.active{
  background:var(--color-primary);
  color:#fff;
  border-color:var(--color-primary);
}
.blog-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:var(--space-5);
  margin-bottom:var(--space-6);
}
.blog-scroll-wrapper{
  position:relative;
  overflow:hidden;
  border-radius:var(--radius-lg);
}
.blog-scroll-container{
  display:flex;
  gap:var(--space-4);
  overflow-x:auto;
  overflow-y:hidden;
  scroll-behavior:smooth;
  padding:var(--space-2) var(--space-1) var(--space-4);
  -webkit-overflow-scrolling:touch;
  scroll-snap-type:x mandatory;
  cursor:grab;
}
.blog-scroll-container:active{cursor:grabbing}
.blog-scroll-container::-webkit-scrollbar{height:2px}
.blog-scroll-container::-webkit-scrollbar-track{background:var(--color-gray-100)}
.blog-scroll-container::-webkit-scrollbar-thumb{background:var(--color-primary)}
.blog-scroll-container::-webkit-scrollbar-thumb:hover{background:var(--color-primary-dark)}
.blog-card{
  flex:0 0 280px;
  min-width:280px;
  background:var(--bg-card);
  border-radius:var(--radius-lg);
  overflow:hidden;
  border:1px solid var(--border-color);
  box-shadow:var(--shadow-sm);
  transition:var(--transition-normal);
  scroll-snap-align:start;
  -webkit-tap-highlight-color:transparent;
}
.blog-card:hover{
  box-shadow:var(--shadow-md);
  transform:translateY(-4px);
  border-color:var(--color-primary);
}
.blog-card a{display:block;text-decoration:none}
.blog-card .blog-image{
  width:100%;
  height:220px;
  overflow:hidden;
  background:var(--color-gray-100);
  position:relative;
}
.blog-card .blog-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform 0.5s ease;
}
.blog-card:hover .blog-image img{transform:scale(1.06)}
.blog-card .blog-image .blog-category{
  position:absolute;
  bottom:var(--space-3);
  right:var(--space-3);
  background:var(--color-primary);
  color:#fff;
  padding:var(--space-1) var(--space-3);
  border-radius:var(--radius-full);
  font-size:var(--text-xs);
  font-weight:var(--weight-semibold);
}
.blog-card .blog-image .blog-image-placeholder{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:48px;
  color:var(--color-gray-300);
  background:var(--color-gray-50);
}
.blog-card .blog-content{padding:var(--space-4) var(--space-5)}
.blog-card .blog-content .blog-title{
  font-size:var(--text-base);
  font-weight:var(--weight-bold);
  color:var(--text-body);
  margin-bottom:var(--space-2);
  line-height:var(--leading-tight);
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.blog-card .blog-content .blog-title a{
  color:var(--text-body);
  text-decoration:none;
  transition:color var(--transition-fast);
}
.blog-card .blog-content .blog-title a:hover{color:var(--color-primary)}
.blog-card .blog-content .blog-excerpt{
  font-size:var(--text-sm);
  color:var(--text-muted);
  line-height:var(--leading-relaxed);
  margin-bottom:var(--space-4);
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
  text-align:justify;
}
.blog-card .blog-content .blog-meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-top:var(--space-3);
  border-top:1px solid var(--border-color);
}
.blog-card .blog-content .blog-meta .blog-date{
  font-size:var(--text-xs);
  color:var(--text-muted);
  display:flex;
  align-items:center;
  gap:var(--space-1);
}
.blog-card .blog-content .blog-meta .blog-read-more{
  font-size:var(--text-xs);
  font-weight:var(--weight-semibold);
  color:var(--color-primary);
  display:flex;
  align-items:center;
  gap:var(--space-1);
  transition:color var(--transition-fast);
  text-decoration:none;
}
.blog-card .blog-content .blog-meta .blog-read-more:hover{color:var(--color-primary-dark)}
.blog-empty{
  text-align:center;
  padding:var(--space-8);
  color:var(--text-muted);
}
.blog-empty i{
  font-size:3rem;
  color:var(--border-color);
  display:block;
  margin-bottom:var(--space-3);
}
.section-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:var(--space-4);
  flex-wrap:wrap;
  gap:var(--space-2);
}
.section-title{
  font-size:var(--text-2xl);
  font-weight:var(--weight-black);
  color:var(--text-body);
}
.scroll-buttons{display:flex;gap:var(--space-1)}
.scroll-btn{
  width:36px;
  height:36px;
  border-radius:50%;
  border:1px solid var(--border-color);
  background:var(--bg-card);
  color:var(--text-muted);
  cursor:pointer;
  transition:all 0.3s ease;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:14px;
}
.scroll-btn:hover{
  background:var(--color-primary);
  color:#fff;
  border-color:var(--color-primary);
  box-shadow:0 2px 12px rgba(249,115,22,0.3);
}
.scroll-btn:disabled{opacity:0.4;cursor:not-allowed}
.blog-badge{
  position:absolute;
  top:var(--space-2);
  left:var(--space-2);
  padding:2px 12px;
  border-radius:var(--radius-full);
  font-size:var(--text-xs);
  font-weight:var(--weight-bold);
}
.featured-badge{
  background:var(--color-primary);
  color:#fff;
  box-shadow:0 2px 8px rgba(249,115,22,0.3);
}
.contact-page{max-width:900px;margin:0 auto;padding:var(--space-4)}
.contact-header{text-align:center;padding:var(--space-8) 0 var(--space-6)}
.contact-header h1{
  font-size:var(--text-3xl);
  font-weight:var(--weight-black);
  color:var(--text-body);
  margin-bottom:var(--space-2);
}
.contact-header p{
  font-size:var(--text-lg);
  color:var(--text-muted);
  max-width:600px;
  margin:0 auto;
  line-height:var(--leading-relaxed);
}
.contact-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--space-6);
  margin:var(--space-6) 0;
}
.contact-info{display:flex;flex-direction:column;gap:var(--space-4)}
.contact-info .info-card{
  background:var(--bg-card);
  border-radius:var(--radius-md);
  padding:var(--space-4);
  border:1px solid var(--border-color);
  display:flex;
  align-items:center;
  gap:var(--space-4);
  transition:var(--transition-fast);
}
.contact-info .info-card:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow-md);
  border-color:var(--color-primary);
}
.contact-info .info-card .info-icon{
  width:48px;
  height:48px;
  border-radius:50%;
  background:var(--color-primary-light);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.2rem;
  color:var(--color-primary);
  flex-shrink:0;
}
.contact-info .info-card .info-content{flex:1}
.contact-info .info-card .info-content h4{
  font-size:var(--text-sm);
  font-weight:var(--weight-bold);
  color:var(--text-body);
  margin-bottom:var(--space-1);
}
.contact-info .info-card .info-content p,
.contact-info .info-card .info-content a{
  font-size:var(--text-sm);
  color:var(--text-muted);
  text-decoration:none;
  transition:var(--transition-fast);
}
.contact-info .info-card .info-content a:hover{color:var(--color-primary)}
.contact-form{
  background:var(--bg-card);
  border-radius:var(--radius-md);
  padding:var(--space-6);
  border:1px solid var(--border-color);
}
.contact-form h3{
  font-size:var(--text-xl);
  font-weight:var(--weight-bold);
  color:var(--text-body);
  margin-bottom:var(--space-4);
}
.contact-form .form-group{margin-bottom:var(--space-4)}
.contact-form .form-group label{
  display:block;
  font-size:var(--text-sm);
  font-weight:var(--weight-medium);
  color:var(--text-body);
  margin-bottom:var(--space-1);
}
.contact-form .form-group .input{
  width:100%;
  padding:var(--space-3) var(--space-4);
  border:1.5px solid var(--border-color);
  border-radius:var(--radius-md);
  background:var(--bg-input);
  color:var(--text-body);
  transition:var(--transition-fast);
  font-family:var(--font-family);
  font-size:var(--text-md);
}
.contact-form .form-group .input:focus{
  border-color:var(--color-primary);
  outline:none;
  box-shadow:0 0 0 3px rgba(249,115,22,0.12);
}
.contact-form .form-group .textarea{
  width:100%;
  padding:var(--space-3) var(--space-4);
  border:1.5px solid var(--border-color);
  border-radius:var(--radius-md);
  background:var(--bg-input);
  color:var(--text-body);
  transition:var(--transition-fast);
  font-family:var(--font-family);
  font-size:var(--text-md);
  min-height:120px;
  resize:vertical;
}
.contact-form .form-group .textarea:focus{
  border-color:var(--color-primary);
  outline:none;
  box-shadow:0 0 0 3px rgba(249,115,22,0.12);
}
.contact-form .form-group .form-hint{
  font-size:var(--text-xs);
  color:var(--text-muted);
  margin-top:var(--space-1);
}
.contact-form .btn-submit{
  width:100%;
  padding:var(--space-3);
  background:var(--color-primary);
  color:#fff;
  border:none;
  border-radius:var(--radius-md);
  font-size:var(--text-base);
  font-weight:var(--weight-bold);
  cursor:pointer;
  transition:var(--transition-fast);
  font-family:var(--font-family);
}
.contact-form .btn-submit:hover{
  background:var(--color-primary-dark);
  transform:translateY(-2px);
  box-shadow:0 4px 20px rgba(249,115,22,0.3);
}
.contact-social{margin-top:var(--space-6);text-align:center}
.contact-social h3{
  font-size:var(--text-base);
  font-weight:var(--weight-bold);
  color:var(--text-body);
  margin-bottom:var(--space-3);
}
.contact-social .social-links{
  display:flex;
  justify-content:center;
  gap:var(--space-3);
  flex-wrap:wrap;
}
.contact-social .social-links a{
  display:flex;
  align-items:center;
  justify-content:center;
  width:48px;
  height:48px;
  border-radius:50%;
  background:var(--bg-card);
  border:1px solid var(--border-color);
  color:var(--text-muted);
  font-size:1.3rem;
  transition:var(--transition-fast);
}
.contact-social .social-links a:hover{
  background:var(--color-primary);
  border-color:var(--color-primary);
  color:#fff;
  transform:translateY(-3px);
}
.login-page{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:var(--space-4);
  margin:var(--space-8) var(--space-4);
  position:relative;
}
.login-page::before{
  content:'';
  position:absolute;
  top:-120px;
  right:-80px;
  width:350px;
  height:350px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(249,115,22,0.05) 0%,transparent 70%);
  pointer-events:none;
}
.login-page::after{
  content:'';
  position:absolute;
  bottom:-100px;
  left:-60px;
  width:280px;
  height:280px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(249,115,22,0.04) 0%,transparent 70%);
  pointer-events:none;
}
.login-container{
  max-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:var(--space-4);
  width:100%;
  position:relative;
}
.login-container--hidden{display:none}
.login-card{
  max-width:460px;
  width:100%;
  background:var(--bg-card);
  border-radius:var(--radius-xl);
  padding:var(--space-8) var(--space-6);
  box-shadow:var(--shadow-lg);
  text-align:center;
  border:1px solid var(--border-color);
  transition:var(--transition-fast);
}
.login-icon{
  font-size:48px;
  color:var(--color-primary);
  margin-bottom:var(--space-4);
  display:inline-block;
}
.login-title{
  font-size:var(--text-xl);
  font-weight:var(--weight-bold);
  color:var(--text-body);
  margin-bottom:var(--space-3);
}
.login-subtitle{
  font-size:var(--text-md);
  color:var(--text-muted);
  margin-bottom:var(--space-8);
}
.login-footer{margin-top:var(--space-4);padding-top:var(--space-3)}
.login-footer-link{
  cursor:pointer;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:var(--color-sprimary);
  font-size:var(--text-sm);
  font-weight:var(--weight-medium);
  transition:var(--transition-fast);
}
.login-footer-link:hover{color:var(--color-primary-dark)}
.login-footer-link--btn{
  border:none;
  background:none;
  font-family:var(--font-family);
  padding:0;
  color:var(--color-primary);
  font-size:var(--text-sm);
  font-weight:var(--weight-medium);
  display:inline-flex;
  align-items:center;
  gap:6px;
  cursor:pointer;
  transition:var(--transition-fast);
}
.login-footer-link--btn:hover{color:var(--color-primary-dark)}
.login-footer-sep{margin:0 8px;color:var(--color-gray-300)}
.modal-overlay{
  position:fixed;
  inset:0;
  background:rgba(15,26,46,0.5);
  backdrop-filter:blur(4px);
  display:none;
  align-items:center;
  justify-content:center;
  padding:var(--space-4);
  z-index:9000;
}
.modal-overlay.active{display:flex !important}
.modal{
  background:var(--bg-card);
  border-radius:var(--radius-xl);
  padding:var(--space-6);
  width:100%;
  max-width:520px;
  box-shadow:var(--shadow-xl);
  position:relative;
  max-height:85vh;
  overflow-y:auto;
}
.modal-close{
  position:absolute;
  top:var(--space-3);
  left:var(--space-3);
  width:36px;
  height:36px;
  border-radius:var(--radius-full);
  background:var(--color-gray-400);
  border:none;
  color:#fff;
  cursor:pointer;
  transition:all 0.3s;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:var(--text-lg);
  z-index:10;
}
.modal-close:hover{background:rgba(0,0,0,0.7);transform:rotate(90deg)}
.modal-header{
  font-size:var(--text-xl);
  font-weight:var(--weight-bold);
  margin-bottom:var(--space-4);
  color:var(--text-body);
}
.modal-text{
  font-size:var(--text-sm);
  color:var(--text-muted);
  margin-bottom:var(--space-4);
}
.modal-actions{display:flex;gap:var(--space-3);margin-top:var(--space-4)}
.operators-section{margin:var(--space-8) 0}
.operators-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
  gap:var(--space-4);
}
.operator-card{
  background:var(--bg-card);
  border-radius:var(--radius-md);
  padding:var(--space-4);
  text-align:center;
  border:1px solid var(--border-color);
  transition:var(--transition-fast);
  text-decoration:none;
  color:var(--text-body);
  box-shadow:var(--shadow-xs);
}
.operator-card:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow-md);
  border-color:var(--color-primary);
}
.operator-card .operator-icon{
  width:64px;
  height:64px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto var(--space-3);
  font-size:1.8rem;
  transition:var(--transition-fast);
}
.operator-card .operator-icon img{width:36px;height:36px;object-fit:contain}
.operator-card h4{
  font-size:var(--text-base);
  font-weight:var(--weight-bold);
  color:var(--text-body);
  margin-bottom:var(--space-2);
}
.operator-card .badge{font-size:var(--text-xs);padding:var(--space-1) var(--space-3)}
.step-links{display:flex}
.products-page{margin:0 auto;padding:20px}
.scenario-box{
  background:linear-gradient(135deg,#fff7ed,#fffbeb);
  border-radius:16px;
  padding:20px 24px;
  margin-bottom:24px;
  border-right:4px solid var(--color-primary);
  text-align:justify;
}
.scenario-box .label{
  font-weight:700;
  color:var(--color-primary);
  font-size:0.85rem;
  letter-spacing:0.5px;
}
.scenario-box p{margin:6px 0 0;color:#374151;line-height:2;font-size:1.05rem}
.scenario-box .highlight{color:var(--color-primary);font-weight:700}
.info-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:16px;
  margin:16px 0;
}
.products-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  margin-bottom:20px;
}
.products-header h1{font-size:1.5rem;color:var(--text-body);margin:0}
.products-header h1 i{color:var(--color-primary);margin-left:8px}
.products-header h1 span{font-size:0.9rem;color:var(--text-muted);font-weight:400}
.products-header p{color:var(--text-muted);font-size:0.9rem;margin:4px 0 0}
.products-layout{display:flex;flex-wrap:wrap}
.products-filters{
  flex:0 0 280px;
  background:var(--bg-card);
  border-radius:16px;
  padding:20px;
  border:1px solid var(--border-color);
  align-self:flex-start;
  position:sticky;
  top:100px;
  margin-left:24px;
}
.products-filters h4{margin:0 0 16px;font-size:0.95rem}
.products-filters h4 i{color:var(--color-primary);margin-left:6px}
.filter-group{margin-bottom:16px}
.filter-group label{
  display:block;
  font-weight:600;
  font-size:0.85rem;
  margin-bottom:6px;
  color:var(--text-body);
}
.filter-group .filter-input{
  width:100%;
  padding:8px 12px;
  font-size:0.85rem;
  border:2px solid var(--border-color);
  border-radius:8px;
  outline:none;
  font-family:var(--font-family);
  transition:border-color 0.3s;
  background:var(--bg-card);
}
.filter-group .filter-input:focus{border-color:var(--color-primary)}
.filter-group .filter-input::placeholder{color:var(--text-muted)}
.filter-group .price-range{display:flex;gap:8px}
.filter-group .price-range input{flex:1}
.filter-group .filter-select{
  width:100%;
  padding:8px 12px;
  font-size:0.85rem;
  border:2px solid var(--border-color);
  border-radius:8px;
  outline:none;
  font-family:var(--font-family);
  background:var(--bg-card);
  transition:border-color 0.3s;
  cursor:pointer;
}
.filter-group .filter-select:focus{border-color:var(--color-primary)}
.filter-divider{border:none;border-top:1px solid var(--color-gray-100);margin:12px 0}
.filter-link{
  text-decoration:none;
  font-size:0.9rem;
  padding:4px 0;
  display:block;
  transition:color 0.3s;
}
.filter-link:hover{color:var(--color-primary) !important}
.filter-link.active{color:var(--color-primary);font-weight:700}
.filter-link .operator-logo{
  width:20px;
  height:20px;
  border-radius:50%;
  vertical-align:middle;
  margin-left:4px;
}
.filter-link i{width:18px;color:var(--color-primary)}
.filter-link .count{color:var(--text-muted);font-size:0.75rem;float:left}
.products-grid{flex:1;min-width:200px}
.products-grid .grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:16px;
}
.products-grid .empty-state{
  text-align:center;
  padding:60px 20px;
  background:var(--color-gray-50);
  border-radius:20px;
}
.products-grid .empty-state .empty-icon{font-size:4rem;color:var(--color-gray-300);margin-bottom:16px}
.products-grid .empty-state h3{color:var(--color-gray-600)}
.products-grid .empty-state p{color:var(--text-muted);margin-bottom:16px}
.product-card{
  background:var(--bg-card);
  border-radius:16px;
  padding:20px;
  border:1px solid var(--border-color);
  transition:all 0.3s;
  box-shadow:0 2px 8px rgba(0,0,0,0.04);
  position:relative;
}
.product-card:hover{
  border-color:var(--color-primary);
  transform:translateY(-4px);
  box-shadow:0 8px 24px rgba(0,0,0,0.08);
}
.product-card .discount-badge{
  position:absolute;
  top:12px;
  right:12px;
  background:var(--color-danger);
  color:#fff;
  padding:2px 12px;
  border-radius:30px;
  font-size:0.7rem;
  font-weight:700;
}
.product-card .card-header{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.product-card .card-icon{
  width:56px;
  height:56px;
  border-radius:12px;
  background:var(--color-primary-light);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.5rem;
  color:var(--color-primary);
  flex-shrink:0;
}
.product-card .card-number{
  font-size:0.9rem;
  font-weight:700;
  color:var(--text-body);
  direction:ltr;
  font-family:var(--font-family);
}
.product-card .card-meta{font-size:0.7rem;color:var(--text-muted)}
.product-card .card-tags{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:12px}
.product-card .card-tags .tag{
  background:var(--color-gray-100);
  padding:2px 10px;
  border-radius:20px;
  font-size:0.65rem;
  color:var(--text-body);
}
.product-card .card-tags .tag i{margin-left:4px}
.product-card .card-footer{
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-top:1px solid var(--color-gray-100);
  padding-top:12px;
}
.product-card .card-footer .price{font-weight:700;color:var(--text-body);font-size:1.1rem}
.product-card .card-footer .price small{font-size:0.65rem;color:var(--text-muted)}
.product-card .card-footer .price .old-price{
  font-size:0.7rem;
  color:var(--text-muted);
  text-decoration:line-through;
  display:block;
}
.product-card .card-footer .price .discount-price{color:var(--color-danger)}
.products-pagination{margin-top:20px}
.reviews-section{margin:var(--space-8) 0}
.reviews-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:var(--space-4);
}
.review-card{
  background:var(--bg-card);
  border-radius:var(--radius-md);
  padding:var(--space-4);
  border:1px solid var(--border-color);
  transition:var(--transition-fast);
  box-shadow:var(--shadow-xs);
}
.review-card:hover{
  border-color:var(--color-primary);
  box-shadow:var(--shadow-md);
  transform:translateY(-3px);
}
.review-card .review-header{display:flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-2)}
.review-card .review-avatar{
  width:44px;
  height:44px;
  border-radius:50%;
  background:var(--color-gray-100);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.2rem;
  color:var(--text-muted);
  overflow:hidden;
  flex-shrink:0;
}
.review-card .review-avatar img{width:100%;height:100%;object-fit:cover}
.review-card .review-name{
  font-weight:var(--weight-bold);
  font-size:var(--text-sm);
  color:var(--text-body);
}
.review-card .review-rating{color:#fbbf24;font-size:var(--text-sm);letter-spacing:1px}
.review-card .review-text{
  font-size:var(--text-sm);
  color:var(--text-muted);
  line-height:var(--leading-relaxed);
  margin-bottom:var(--space-2);
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.review-card .review-footer{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding-top:var(--space-2);
  border-top:1px solid var(--border-color);
  font-size:var(--text-xs);
  color:var(--text-muted);
}
.review-card .review-shop{font-weight:var(--weight-medium);color:var(--color-primary)}
.review-card .review-date{color:var(--text-muted)}
.categories-section,
.featured-section,
.most-viewed-section,
.discounted-section{margin:var(--space-8) 0}
.categories-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
  gap:var(--space-4);
}
.category-card{
  background:var(--bg-card);
  border-radius:var(--radius-md);
  padding:var(--space-4);
  text-align:center;
  border:1px solid var(--border-color);
  transition:var(--transition-fast);
  text-decoration:none;
  color:var(--text-body);
}
.category-card:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow-md);
  border-color:#fed7aa;
}
.category-card .category-icon{
  width:56px;
  height:56px;
  border-radius:var(--radius-full);
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto var(--space-2);
  font-size:1.5rem;
}
.category-card h4{font-size:var(--text-sm);font-weight:var(--weight-bold);margin-bottom:var(--space-1)}
.category-card p{font-size:var(--text-xs);color:var(--text-muted);margin:0}
.banner-section{margin:var(--space-8) 0}
.banner-card--hero{
  margin:24px 0;
  background:linear-gradient(135deg,var(--color-navy),var(--color-navy-soft));
  border-radius:var(--radius-lg);
  padding:var(--space-6);
  color:#fff;
  text-align:center;
}
.banner-card--hero h3{font-size:var(--text-2xl);margin-bottom:var(--space-2)}
.banner-card--hero h3 span{color:var(--color-primary)}
.banner-card--hero p{color:var(--color-gray-400);max-width:500px;margin:0 auto var(--space-4)}
.banner-card--hero .btn-glow{
  background:var(--color-primary);
  padding:var(--space-3) var(--space-8);
  font-weight:var(--weight-bold);
  color:#fff;
  font-size:var(--text-md);
  border-radius:var(--radius-full);
  border:none;
  box-shadow:0 4px 20px rgba(249,115,22,0.35);
  transition:all 0.3s;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:var(--space-2);
  text-decoration:none;
}
.banner-card--hero .btn-glow:hover{
  background:var(--color-primary-dark);
  transform:translateY(-2px);
  box-shadow:0 6px 30px rgba(249,115,22,0.45);
}
.section-header-wrap{
  text-align:center;
  margin-bottom:var(--space-5);
}
.section-header-wrap h3{
  font-size:var(--text-xl);
  font-weight:var(--weight-bold);
  color:var(--text-body);
  margin-bottom:var(--space-2);
}
.section-header-wrap h3 i{color:var(--color-primary);margin-left:var(--space-2)}
.section-header-wrap p{font-size:var(--text-md);color:var(--text-muted)}
.sidebar-header{
  text-align:center;
  padding-bottom:var(--space-6);
  border-bottom:1px solid var(--border-color);
  margin-bottom:var(--space-6);
}
.sidebar-avatar{
  width:72px;
  height:72px;
  border-radius:var(--radius-full);
  background:var(--color-primary);
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto var(--space-3);
  font-size:2rem;
  color:var(--color-white);
  overflow:hidden;
  flex-shrink:0;
}
.sidebar-avatar.store{
  width:80px;
  height:80px;
  border-radius:var(--radius-md);
  background:var(--color-gray-100);
  color:var(--text-muted);
  border:2px solid var(--border-color);
}
.sidebar-avatar img{width:100%;height:100%;object-fit:cover}
.sidebar-title{font-weight:var(--weight-bold);font-size:var(--text-lg);color:var(--text-body)}
.sidebar-subtitle{font-size:var(--text-sm);color:var(--text-muted)}
.sidebar-role{margin-top:var(--space-1)}
.role-badge{
  display:inline-block;
  padding:2px 12px;
  border-radius:var(--radius-full);
  font-size:var(--text-xs);
  font-weight:var(--weight-medium);
  background:var(--color-primary);
  color:var(--color-white);
}
.sidebar-rating{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:var(--space-2);
  margin-top:var(--space-1);
  font-size:var(--text-sm);
}
.sidebar-rating .stars{color:var(--color-warning)}
.sidebar-rating .rating-number{color:var(--text-muted);font-weight:var(--weight-medium)}
.sidebar-status{margin-top:var(--space-2)}
.sidebar-nav{
  display:flex;
  flex-direction:column;
  gap:var(--space-3);
}
.nav-section{
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:0.5px;
  color:var(--text-muted);
  padding:12px 0;
  font-weight:var(--weight-bold);
  opacity:0.5;
}
.sidebar-nav a{
  display:flex;
  align-items:center;
  gap:var(--space-3);
  padding:12px;
  border-radius:var(--radius-sm);
  transition:var(--transition-fast);
  text-decoration:none;
  font-size:14px;
  color:var(--text-muted);
  position:relative;
  cursor:pointer;
}
.sidebar-nav a:hover{background:var(--color-gray-100);color:var(--text-body)}
.sidebar-nav a.active{background:var(--color-primary);color:#fff}
.sidebar-nav a.active:hover{background:var(--color-primary-dark)}
.sidebar-nav a.active::before{
  content:'';
  position:absolute;
  right:0;
  top:50%;
  transform:translateY(-50%);
  width:3px;
  height:60%;
  background:var(--color-primary);
  border-radius:0 3px 3px 0;
}
.sidebar-nav a i{
  width:20px;
  text-align:center;
  font-size:1rem;
  color:var(--text-muted);
  flex-shrink:0;
}
.sidebar-nav a:hover i{color:var(--text-body)}
.sidebar-nav a.active i{color:#fff}
.sidebar-nav a .badge{
  margin-right:auto;
  color:#fff;
  padding:1px 8px;
  border-radius:var(--radius-full);
  font-size:var(--text-xs);
  font-weight:var(--weight-medium);
}
.badge-danger{background:var(--color-danger)}
.badge-warning{background:var(--color-warning)}
.badge-success{background:var(--color-success)}
.badge-info{background:var(--color-info)}
.small-icon{font-size:10px !important;opacity:0.5;width:auto !important}
.nav-divider{height:1px;margin:8px 0;background:var(--border-color)}
.sidebar-nav a.logout-link{padding-top:var(--space-3);color:var(--text-muted)}
.sidebar-nav a.logout-link:hover,
.sidebar-nav a.logout-link:hover i{color:var(--color-danger)}
.sidebar-nav .has-submenu>.submenu-toggle{position:relative}
.sidebar-nav .has-submenu>.submenu-toggle::after{
  content:'\f078';
  font-family:'Font Awesome 6 Free';
  font-weight:900;
  font-size:0.5rem;
  margin-right:auto;
  color:var(--text-muted);
  transition:var(--transition-fast);
}
.sidebar-nav .has-submenu.open>.submenu-toggle::after{transform:rotate(180deg)}
.sidebar-nav .submenu{
  max-height:0;
  overflow:hidden;
  transition:max-height 0.3s ease;
  padding-right:var(--space-2);
}
.sidebar-nav .has-submenu.open .submenu{max-height:500px;margin:6px 0}
.sidebar-nav .submenu a{
  padding:10px 0 10px 12px;
  font-size:13px;
  color:var(--text-muted);
  border-radius:var(--radius-sm);
}
.sidebar-nav .submenu a:hover{color:var(--text-body);background:var(--color-gray-100)}
.sidebar-nav .submenu a i{font-size:0.75rem;width:18px}
.dashboard-sidebar,
.store-sidebar,
.admin-sidebar,
.business-sidebar,
.customer-sidebar{
  width:260px;
  min-height:100vh;
  padding:var(--space-6) var(--space-4);
  position:sticky;
  top:0;
  height:100vh;
  overflow-y:auto;
  flex-shrink:0;
  transition:var(--transition-normal);
}
.dashboard-sidebar::-webkit-scrollbar,
.store-sidebar::-webkit-scrollbar{width:4px}
.dashboard-sidebar::-webkit-scrollbar-thumb,
.store-sidebar::-webkit-scrollbar-thumb{
  background:var(--color-primary);
  border-radius:var(--radius-full);
}
.dashboard-sidebar,
.admin-sidebar{background:var(--color-navy);color:var(--color-white)}
.store-sidebar{background:var(--color-white);border-left:1px solid var(--color-gray-200)}
.user-info,
.store-info{
  text-align:center;
  padding-bottom:var(--space-6);
  border-bottom:1px solid rgba(255,255,255,0.1);
  margin-bottom:var(--space-6);
}
.store-sidebar .store-info{border-bottom-color:var(--color-gray-200)}
.user-avatar,
.store-logo{
  width:72px;
  height:72px;
  border-radius:var(--radius-full);
  background:var(--color-primary);
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto var(--space-3);
  font-size:2rem;
  color:var(--color-white);
  overflow:hidden;
}
.store-logo{
  width:80px;
  height:80px;
  border-radius:var(--radius-md);
  background:var(--color-gray-100);
  color:var(--color-gray-400);
  border:2px solid var(--color-gray-200);
}
.user-avatar img,
.store-logo img{width:100%;height:100%;object-fit:cover}
.user-name,
.store-name{font-weight:var(--weight-bold);font-size:var(--text-lg);color:var(--color-white)}
.store-name{color:var(--color-navy)}
.user-mobile,
.user-role{font-size:var(--text-sm);color:var(--color-gray-400)}
.dashboard-nav,
.store-nav{display:flex;flex-direction:column;gap:var(--space-1)}
.dashboard-nav a{
  display:flex;
  align-items:center;
  gap:var(--space-3);
  padding:10px var(--space-3);
  border-radius:var(--radius-sm);
  color:var(--color-gray-300);
  transition:var(--transition-fast);
  text-decoration:none;
  font-size:var(--text-sm);
  position:relative;
}
.dashboard-nav a:hover{background:rgba(255,255,255,0.08);color:var(--color-white)}
.dashboard-nav a.active{background:var(--color-primary);color:var(--color-white)}
.dashboard-nav a i{width:20px;text-align:center;font-size:1rem}
.dashboard-nav a .badge{
  margin-right:auto;
  background:var(--color-danger);
  color:var(--color-white);
  padding:1px 8px;
  border-radius:var(--radius-full);
  font-size:var(--text-xs);
}
.dashboard-nav a .badge-warning{background:var(--color-warning)}
.dashboard-nav a:last-child{
  margin-top:var(--space-4);
  border-top:1px solid rgba(255,255,255,0.1);
  padding-top:var(--space-4);
  color:var(--color-gray-400);
}
.dashboard-nav a:last-child:hover{color:var(--color-danger)}
.store-nav a{
  display:flex;
  align-items:center;
  gap:var(--space-3);
  padding:10px var(--space-3);
  border-radius:var(--radius-sm);
  color:var(--color-gray-600);
  transition:var(--transition-fast);
  text-decoration:none;
  font-size:var(--text-sm);
  position:relative;
}
.store-nav a:hover{background:var(--color-gray-50);color:var(--color-navy)}
.store-nav a.active{background:var(--color-primary-light);color:var(--color-primary);font-weight:var(--weight-medium)}
.store-nav a.active i{color:var(--color-primary)}
.store-nav a i{width:20px;text-align:center;font-size:1rem}
.store-nav a .badge{
  margin-right:auto;
  background:var(--color-gray-200);
  color:var(--color-gray-600);
  padding:1px 8px;
  border-radius:var(--radius-full);
  font-size:var(--text-xs);
}
.store-nav a:last-child{
  margin-top:var(--space-4);
  border-top:1px solid var(--color-gray-200);
  padding-top:var(--space-4);
  color:var(--color-gray-400);
}
.store-nav a:last-child:hover{color:var(--color-primary)}
.mobile-menu-toggle,
.store-menu-toggle{
  display:none;
  position:fixed;
  bottom:var(--space-6);
  right:var(--space-6);
  width:52px;
  height:52px;
  border-radius:var(--radius-full);
  background:var(--color-primary);
  color:var(--color-white);
  border:none;
  font-size:1.5rem;
  box-shadow:var(--shadow-lg);
  cursor:pointer;
}
.mobile-menu-toggle:hover,
.store-menu-toggle:hover{background:var(--color-primary-dark)}
.mobile-overlay{
  display:none;
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgba(0,0,0,0.5);
}
.stories-wrapper{
  display:flex;
  gap:var(--space-4);
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.stories-wrapper::-webkit-scrollbar{display:none}
.story-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--space-1);
  cursor:pointer;
  flex-shrink:0;
  min-width:68px;
}
.story-avatar-wrapper{
  width:68px;
  height:68px;
  border-radius:50%;
  padding:3px;
  background:linear-gradient(135deg,var(--color-primary),#fbbf24);
  transition:var(--transition-fast);
}
.story-avatar-wrapper.viewed{background:var(--color-gray-300)}
.story-avatar{
  width:100%;
  height:100%;
  border-radius:50%;
  background:var(--bg-card);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:2rem;
  color:var(--color-primary);
  overflow:hidden;
}
.story-avatar img{width:100%;height:100%;object-fit:cover}
.story-avatar i{font-size:1.8rem}
.story-name{
  font-size:var(--text-xs);
  color:var(--text-muted);
  text-align:center;
  max-width:72px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.story-modal-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.25);
  backdrop-filter:blur(12px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:var(--space-4);
}
.story-modal{
  max-width:420px;
  width:95%;
  background:transparent;
  border-radius:var(--radius-xl);
  overflow:hidden;
  box-shadow:var(--shadow-xl);
  position:relative;
}
.story-modal-close{
  position:absolute;
  top:var(--space-3);
  left:var(--space-3);
  background:rgba(0,0,0,0.5);
  border:none;
  color:var(--color-white);
  width:36px;
  height:36px;
  border-radius:50%;
  font-size:1.2rem;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:var(--transition-fast);
}
.story-modal-close:hover{background:rgba(0,0,0,0.4)}
.story-modal-content{
  position:relative;
  min-height:400px;
  display:flex;
  flex-direction:column;
  border-radius:var(--radius-xl);
  overflow:hidden;
}
.story-modal-body{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  position:relative;
  min-height:400px;
  background:var(--color-navy);
}
.story-modal-body .story-image{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}
.story-modal-body .story-overlay{
  inset:0;
  background:rgba(0,0,0,0.3);
  z-index:998;
}
.story-modal-body .story-content{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:var(--space-6);
  text-align:center;
  width:100%;
  min-height:400px;
  z-index:999;
}
.story-modal-image{
  font-size:4rem;
  color:var(--color-primary);
  margin-bottom:var(--space-4);
}
.story-modal-image img{width:100%;height:100%;object-fit:cover}
.story-modal-text{
  color:#fff;
  font-size:var(--text-xl);
  font-weight:var(--weight-bold);
  line-height:var(--leading-relaxed);
  max-width:320px;
  text-shadow:0 2px 8px rgba(0,0,0,0.5);
}
.story-modal-footer{
  padding:var(--space-4);
  background:rgba(0,0,0,0.3);
  backdrop-filter:blur(4px);
}
.story-modal-footer .btn{width:100%}
.tag{
  background:var(--color-gray-100);
  padding:2px 10px;
  border-radius:var(--radius-full);
  font-size:var(--text-xs);
  font-weight:var(--weight-semibold);
  color:var(--color-navy-light);
  display:inline-flex;
  align-items:center;
  gap:var(--space-1);
}
.tag--hot{background:#ffe8d0;color:#b45309}
.tag--verified{background:var(--color-success-light);color:var(--color-success)}
.tag--danger{background:var(--color-danger-light);color:var(--color-danger)}
.tag--warning{background:var(--color-warning-light);color:var(--color-warning)}
.tag--info{background:var(--color-info-light);color:var(--color-info)}
.badge{
  display:inline-flex;
  align-items:center;
  padding:2px 10px;
  border-radius:var(--radius-full);
  font-size:var(--text-xs);
  font-weight:var(--weight-semibold);
  background:var(--color-gray-100);
  color:var(--color-navy-soft);
}
.badge-primary{background:var(--color-primary-light);color:var(--color-primary-dark)}
.theme-toggle{
  position:fixed;
  bottom:var(--space-6);
  left:var(--space-6);
  background:var(--color-navy);
  color:var(--color-white);
  border:none;
  border-radius:var(--radius-full);
  padding:var(--space-2) var(--space-5);
  font-size:var(--text-sm);
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:var(--space-2);
  box-shadow:var(--shadow-lg);
  transition:all 0.3s ease;
}
.theme-toggle:hover{background:var(--color-primary);transform:translateY(-2px)}
.dark-mode .theme-toggle{background:var(--color-primary)}
.dark-mode .theme-toggle:hover{background:var(--color-primary-dark)}
.kit-main{margin:0;padding:0}
.kit-section{padding:var(--space-8) var(--space-4);border-bottom:1px solid var(--border-color)}
.kit-section:last-child{border-bottom:none}
.kit-title{
  font-size:var(--text-2xl);
  font-weight:var(--weight-extrabold);
  color:var(--text-body);
  margin-bottom:var(--space-6);
  display:flex;
  align-items:center;
  gap:var(--space-3);
}
.kit-title small{font-size:var(--text-sm);font-weight:var(--weight-normal);color:var(--text-muted)}
.kit-grid{display:flex;flex-wrap:wrap;gap:var(--space-4);align-items:center}
.kit-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-6)}
.kit-check-group{display:flex;gap:var(--space-4);margin-top:var(--space-4);flex-wrap:wrap}
.kit-toggle-group{display:flex;align-items:center;gap:var(--space-3);margin-top:var(--space-4)}
.kit-toggle-group .toggle-label{font-size:var(--text-sm);color:var(--text-muted)}
.kit-pagination-demo{display:flex;flex-direction:column;gap:var(--space-4);align-items:center}
.kit-pagination-demo .pagination-label{font-size:var(--text-sm);color:var(--text-muted)}
.kit-hero-wrapper{padding:var(--space-2);background:var(--color-gray-50);border-radius:var(--radius-lg)}
.kit-modal-trigger{margin:var(--space-2) 0}
.services-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  gap:var(--space-4);
}
.service-card{
  background:var(--bg-card);
  border-radius:var(--radius-md);
  padding:var(--space-5);
  text-align:center;
  border:1px solid var(--border-color);
  transition:all 0.2s;
}
.service-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.service-card .service-icon{font-size:2.5rem;color:var(--color-primary);margin-bottom:var(--space-2)}
.service-card h4{font-size:0.95rem;margin:0 0 var(--space-1)}
.service-card p{color:var(--text-muted);font-size:0.8rem;margin:0 0 var(--space-2)}
.shop-profile-demo{
  background:var(--bg-card);
  border-radius:var(--radius-md);
  padding:var(--space-5);
  border:1px solid var(--border-color);
}
.shop-header{display:flex;align-items:center;gap:var(--space-4);flex-wrap:wrap}
.shop-header .shop-avatar{
  width:72px;
  height:72px;
  border-radius:50%;
  background:var(--color-primary);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:2rem;
  flex-shrink:0;
}
.shop-header .shop-info{flex:1}
.shop-header .shop-info h3{margin:0;font-size:1.2rem}
.shop-header .shop-info .shop-meta{
  display:flex;
  gap:var(--space-3);
  flex-wrap:wrap;
  font-size:0.85rem;
  color:var(--text-muted);
  margin-top:var(--space-1);
}
.shop-header .shop-actions{display:flex;gap:var(--space-2)}
.stories-demo{display:flex;gap:var(--space-4);padding:var(--space-2) 0;flex-wrap:wrap}
.story-circle{text-align:center;cursor:pointer}
.story-circle .story-avatar{
  width:72px;
  height:72px;
  border-radius:50%;
  padding:3px;
  background:linear-gradient(135deg,var(--color-primary),#fbbf24);
  margin:0 auto var(--space-1);
}
.story-circle .story-avatar > *{
  width:100%;
  height:100%;
  border-radius:50%;
  background:var(--bg-card);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:2rem;
  color:var(--color-primary);
}
.story-circle span{font-size:0.7rem;color:var(--text-body);display:block}
.banner-grid-2,
.banner-grid-3{display:grid;gap:var(--space-4,16px);margin:var(--space-6,24px) 0}
.banner-grid-2{grid-template-columns:1fr 1fr}
.banner-grid-3{grid-template-columns:1fr 1fr 1fr}
.banner-item{border-radius:var(--radius-lg,16px);overflow:hidden;position:relative}
.banner-item a{display:block;text-decoration:none;width:100%;height:100%}
.banner-img{
  width:100%;
  height:100%;
  aspect-ratio:2000 / 1000;
  object-fit:cover;
  display:block;
  transition:transform 0.3s ease;
}
.banner-item:hover .banner-img{transform:scale(1.02)}
.banner-grid-3.banner-ads .banner-img{aspect-ratio:2000 / 1000 !important;object-fit:contain}
.banner-overlay{
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  padding:12px 16px;
  background:linear-gradient(to top,rgba(0,0,0,0.7) 0%,transparent 100%);
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:2px;
  pointer-events:none;
}
.banner-overlay .banner-label{color:#fff;font-size:14px;font-weight:700}
.banner-overlay .banner-sub{color:rgba(255,255,255,0.8);font-size:11px}
.features-section{margin:48px 0 32px;padding:0}
.features-section .section-header-wrap{text-align:center;margin-bottom:28px}
.features-section .section-header-wrap h3{
  font-size:1.5rem;
  font-weight:800;
  color:var(--text-body);
  margin-bottom:6px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
}
.features-section .section-header-wrap h3 i{color:var(--color-primary);font-size:1.5rem}
.features-section .section-header-wrap p{
  font-size:0.95rem;
  color:var(--text-muted);
  max-width:720px;
  margin:0 auto;
}
.features{display:grid !important;grid-template-columns:repeat(2,1fr);gap:16px;margin:0}
.feature-item{
  background:var(--bg-card);
  border:1px solid var(--border-color);
  border-radius:12px;
  padding:18px 14px 16px;
  text-align:center;
  transition:all 0.3s ease;
  box-shadow:0 1px 3px rgba(0,0,0,0.04);
  display:flex;
  flex-direction:column;
  align-items:center;
}
.feature-item:hover{
  transform:translateY(-3px);
  box-shadow:0 8px 24px rgba(0,0,0,0.07);
  border-color:var(--color-primary);
}
.feature-item i{
  font-size:1.8rem;
  color:var(--color-primary);
  margin-bottom:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  width:52px;
  height:52px;
  background:var(--color-primary-bg);
  border-radius:12px;
  transition:all 0.3s ease;
  flex-shrink:0;
}
.feature-item:hover i{background:var(--color-primary);color:#fff;transform:scale(1.05)}
.feature-item h4{
  font-size:0.9rem;
  font-weight:700;
  color:var(--text-body);
  margin-bottom:4px;
  line-height:1.4;
}
.feature-item p{
  font-size:0.78rem;
  color:var(--text-muted);
  line-height:1.6;
  margin:0;
  max-width:100%;
}
.hero{
  position:static;
  overflow:hidden;
  background:var(--bg-hero);
  border-radius:var(--radius-xl);
  padding-top:var(--space-6);
  text-align:center;
  border:1px solid rgba(249,115,22,0.12);
  margin:var(--space-4) 0;
}
.hero-background{
  position:absolute;
  top:0;
  right:0;
  width:100%;
  height:100%;
  background:url('/staticfiles/img/hero-background.webp') no-repeat center center;
  background-size:cover;
  opacity:0.4;
  pointer-events:none;
  z-index:0;
}
.hero-content{position:relative;z-index:1}
.hero-badge{
  display:inline-flex;
  align-items:center;
  gap:var(--space-2);
  background:var(--color-primary);
  color:#fff;
  padding:var(--space-1) var(--space-5);
  border-radius:var(--radius-full);
  font-size:var(--text-sm);
  font-weight:var(--weight-semibold);
  margin-bottom:var(--space-6);
}
.hero h1{
  font-size:var(--text-4xl);
  font-weight:var(--weight-black);
  line-height:var(--leading-tight);
  color:var(--text-body);
  margin-bottom:var(--space-3);
}
.hero h1 span{
  background:linear-gradient(135deg,var(--color-primary),var(--color-warning));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}
.hero-subtitle{
  font-size:18px;
  color:var(--text-muted);
  max-width:700px;
  margin:0 auto var(--space-4);
  line-height:var(--leading-relaxed);
}
.search-master{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--space-4);
  padding:var(--space-2) 0;
  max-width:1200px;
  margin:0 auto;
  width:100%;
}
.search-row{
  display:flex;
  flex-direction:column;
  align-items:center;
  width:100%;
  max-width:800px;
  margin:0 auto;
  gap:var(--space-3);
}
.search-box-wrapper{
  width:100%;
  cursor:text;
  background:var(--bg-card);
  border-radius:var(--radius-md);
  border:2px solid var(--border-color);
  padding:2px 16px;
  transition:all 0.3s ease;
}
.search-box-wrapper:focus-within{
  border-color:var(--color-primary);
  box-shadow:0 0 0 5px rgba(249,115,22,0.08),var(--shadow-md);
}
.search-box{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-height:72px;
  direction:ltr;
  background:transparent;
  padding:4px 0;
}
.prefix-fixed{
  font-size:2.4rem;
  font-weight:var(--weight-black);
  color:var(--color-primary);
  user-select:none;
  line-height:1.2;
  flex-shrink:0;
  letter-spacing:1px;
  padding:0;
  margin-left:10px;
}
.btn-phonetic-inline{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  height:46px;
  border:2px solid var(--border-color);
  border-radius:var(--radius-sm);
  background:var(--bg-card);
  color:var(--text-muted);
  cursor:pointer;
  font-family:var(--font-family);
  font-size:14px;
  font-weight:600;
  white-space:nowrap;
  flex-shrink:0;
  width:100%;
}
.btn-phonetic-inline:hover{
  border-color:var(--color-primary);
  color:var(--color-primary);
  background:var(--color-primary-light);
}
.btn-phonetic-inline.active{
  border-color:var(--color-primary);
  background:var(--color-primary-bg);
  color:var(--color-primary);
  box-shadow:0 0 0 3px rgba(249,115,22,0.12);
}
.btn-phonetic-inline .phonetic-label{font-size:13px;opacity:0.7}
.btn-phonetic-inline .phonetic-label-mobile{display:none;font-size:13px;opacity:0.7}
.btn-phonetic-inline i{font-size:16px}
.digit-input{
  min-width:48px;
  height:58px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:2.2rem;
  font-weight:var(--weight-bold);
  color:var(--text-body);
  cursor:text;
  transition:all 0.2s;
  line-height:1;
  flex-shrink:0;
  border:none !important;
  border-radius:var(--radius-sm);
  background:var(--bg-input) !important;
  padding:0 4px;
  margin:0 4px;
  text-align:center;
  width:48px;
  outline:none;
  caret-color:red;
  -webkit-appearance:none;
  appearance:none;
  box-shadow:inset 0 1px 3px rgba(0,0,0,0.04);
}
.digit-input:focus{
  color:var(--text-body);
  background:var(--bg-card) !important;
  box-shadow:0 0 0 3px rgba(249,115,22,0.12),inset 0 1px 3px rgba(0,0,0,0.04);
  outline:none;
}
.digit-input.prefix-slot{color:var(--color-primary);background:var(--color-primary-light) !important}
.digit-input::placeholder{color:var(--color-gray-300);font-weight:400}
.digit-input.filled{
  color:var(--text-body);
  background:var(--bg-card) !important;
  box-shadow:0 0 0 1.5px var(--color-primary);
}
.digit-input.prefix-slot.filled{
  color:var(--color-primary);
  background:var(--color-primary-light) !important;
  box-shadow:0 0 0 1.5px var(--color-primary);
}
.search-error{
  color:var(--color-danger);
  font-size:0.9rem;
  margin-top:8px;
  display:none;
  text-align:center;
}
.search-error.show{display:block}
.search-hint{
  text-align:center;
  font-size:0.75rem;
  color:var(--text-muted);
  margin-top:4px;
  padding:0 8px;
}
.suggested-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
  margin:20px auto;
  padding:0 4px;
}
.suggested-title{
  font-size:1rem;
  font-weight:700;
  color:var(--text-body);
  display:flex;
  align-items:center;
  gap:6px;
}
.suggested-title i{color:var(--color-primary)}
.suggested-badge{
  font-size:0.7rem;
  padding:4px 16px;
  background:var(--color-primary);
  color:#fff;
  border-radius:var(--radius-full);
  font-weight:600;
  transition:all 0.3s ease;
  text-decoration:none;
  border:none;
  cursor:pointer;
}
.suggested-badge:hover{
  background:var(--color-primary-dark);
  transform:translateY(-2px);
  box-shadow:0 4px 16px rgba(249,115,22,0.3);
}
.suggested-numbers{width:100%}
.suggested-numbers-scroll{
  display:flex;
  gap:12px;
  padding:8px 0;
  overflow-x:auto;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  min-height:220px;
}
.suggested-numbers-scroll::-webkit-scrollbar{display:none;width:0;height:0}
.hero-listing-wrapper{
  perspective:800px;
  flex:0 0 220px;
  width:220px;
  height:260px;
  min-width:200px;
}
.hero-listing-card{
  background:#fff;
  border-radius:16px;
  padding:18px 14px;
  border:1.5px solid #e5e7eb;
  transition:all 1s cubic-bezier(0.4,0,0.2,1);
  box-shadow:0 2px 8px rgba(0,0,0,0.04);
  position:relative;
  height:100%;
  width:100%;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:6px;
  transform-style:preserve-3d;
  cursor:pointer;
}
.hero-listing-card:hover{
  border-color:#f97316;
  transform:translateY(-4px);
  box-shadow:0 8px 24px rgba(249,115,22,0.10);
}
.hero-listing-card.flipped{transform:rotateY(180deg)}
.hero-listing-card .hero-card-front,
.hero-listing-card .hero-card-back{
  position:relative;
  width:100%;
  height:100%;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
.hero-listing-card .hero-card-back{
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  transform:rotateY(180deg);
  background:linear-gradient(145deg,#f97316,#ea580c);
  border-radius:14px;
  padding:18px 16px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  color:#fff;
  border:none;
  box-shadow:inset 0 2px 20px rgba(255,255,255,0.05);
}
.hero-listing-card .hero-card-back .hero-card-back-number{
  font-size:1.1rem;
  font-weight:700;
  direction:ltr;
  margin-bottom:8px;
  color:#fff;
  background:rgba(255,255,255,0.15);
  padding:6px 16px;
  border-radius:8px;
  display:inline-block;
}
.hero-listing-card .hero-card-back .hero-card-back-actions{
  display:flex;
  flex-direction:column;
  gap:8px;
  width:100%;
  max-width:160px;
}
.hero-listing-card .hero-card-back .hero-btn-back{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:8px 14px;
  border-radius:8px;
  font-size:0.75rem;
  font-weight:700;
  text-decoration:none;
  transition:all 0.3s ease;
  cursor:pointer;
  border:none;
  width:100%;
}
.hero-listing-card .hero-card-back .hero-btn-estimate{
  background:rgba(255,255,255,0.12);
  color:#fff;
  border:1.5px solid rgba(255,255,255,0.2);
  backdrop-filter:blur(4px);
}
.hero-listing-card .hero-card-back .hero-btn-estimate:hover{
  background:rgba(255,255,255,0.25);
  transform:scale(1.03);
  box-shadow:0 4px 20px rgba(255,255,255,0.1);
}
.hero-listing-card .hero-card-back .hero-btn-view{
  background:#fff;
  color:#ea580c;
  border:1.5px solid transparent;
}
.hero-listing-card .hero-card-back .hero-btn-view:hover{
  background:#fff7ed;
  transform:scale(1.03);
  box-shadow:0 4px 20px rgba(0,0,0,0.1);
}
.hero-type-badge{
  position:absolute;
  top:-8px;
  right:12px;
  padding:2px 12px;
  border-radius:30px;
  font-size:0.65rem;
  font-weight:600;
  box-shadow:0 2px 6px rgba(0,0,0,0.15);
}
.hero-personal-badge{background:#3b82f6;color:#fff}
.hero-platform-badge{background:#f97316;color:#fff}
.hero-shop-badge{background:#8b5cf6;color:#fff}
.hero-card-header{display:flex;align-items:center;gap:10px}
.hero-card-image{
  width:42px;
  height:42px;
  border-radius:10px;
  background:#fff7ed;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.2rem;
  color:#f97316;
  flex-shrink:0;
  overflow:hidden;
}
.hero-card-image img{width:100%;height:100%;object-fit:cover}
.hero-card-number-info{flex:1;min-width:0}
.hero-card-number{font-size:1.3rem;font-weight:700;color:#0f1a2e;direction:ltr}
.hero-card-operator{font-size:0.7rem;color:#6b7280}
.hero-card-tags{display:flex;flex-wrap:wrap;gap:4px}
.hero-tag{
  background:#f1f5f9;
  padding:2px 10px;
  border-radius:20px;
  font-size:0.55rem;
  color:#4b5563;
}
.hero-card-footer{
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-top:1px solid #f1f5f9;
  padding-top:8px;
}
.hero-card-price .hero-new-price{font-weight:700;color:#0f1a2e;font-size:1.1rem}
.hero-card-price .hero-new-price .hero-currency{font-size:0.55rem;color:#6b7280;font-weight:400}
.hero-card-arrow{
  background:#f97316;
  color:#fff;
  border:none;
  border-radius:8px;
  width:32px;
  height:32px;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:all 0.3s;
  flex-shrink:0;
  font-size:0.8rem;
  text-decoration:none;
  cursor:pointer;
}
.hero-card-arrow:hover{
  transform:translateX(-4px) scale(1.05);
  box-shadow:0 4px 12px rgba(249,115,22,0.3);
}
.hero-listing-card:hover .hero-card-arrow{transform:translateX(-4px)}
.hero-listing-card.hero-personal{border-color:#3b82f6}
.hero-listing-card.hero-personal:hover{border-color:#3b82f6;box-shadow:0 8px 24px rgba(59,130,246,0.12)}
.hero-listing-card.hero-personal .hero-card-number{color:#3b82f6}
.hero-listing-card.hero-personal .hero-card-arrow{background:#3b82f6}
.hero-listing-card.hero-personal .hero-card-arrow:hover{box-shadow:0 4px 12px rgba(59,130,246,0.3)}
.hero-listing-card.hero-personal .hero-card-back{background:linear-gradient(145deg,#3b82f6,#2563eb)}
.hero-listing-card.hero-personal .hero-card-back .hero-btn-view{background:#fff;color:#3b82f6}
.hero-listing-card.hero-personal .hero-card-back .hero-btn-view:hover{background:#eff6ff}
.hero-listing-card.hero-platform{border-color:#e5e7eb}
.hero-listing-card.hero-platform:hover{border-color:#f97316;box-shadow:0 8px 24px rgba(249,115,22,0.12)}
.hero-listing-card.hero-platform .hero-card-number{color:#f97316}
.hero-listing-card.hero-platform .hero-card-arrow{background:#f97316}
.hero-listing-card.hero-shop{border-color:#8b5cf6}
.hero-listing-card.hero-shop:hover{border-color:#8b5cf6;box-shadow:0 8px 24px rgba(139,92,246,0.12)}
.hero-listing-card.hero-shop .hero-card-number{color:#7c3aed}
.hero-listing-card.hero-shop .hero-card-arrow{background:#8b5cf6}
.hero-listing-card.hero-shop .hero-card-arrow:hover{box-shadow:0 4px 12px rgba(139,92,246,0.3)}
.hero-listing-card.hero-shop .hero-card-back{background:linear-gradient(145deg,#8b5cf6,#6d28d9)}
.hero-listing-card.hero-shop .hero-card-back .hero-btn-view{background:#fff;color:#8b5cf6}
.hero-listing-card.hero-shop .hero-card-back .hero-btn-view:hover{background:#f5f3ff}
.search-actions{
  display:flex;
  gap:var(--space-2);
  align-items:center;
  justify-content:center;
  width:100%;
  max-width:800px;
  margin:0 auto;
  flex-wrap:wrap;
}
.learn-more-btn{
  padding:6px 14px;
  background:var(--bg-card);
  border:2px solid var(--border-color);
  border-radius:var(--radius-md);
  font-size:var(--text-sm);
  font-weight:var(--weight-medium);
  color:var(--text-muted);
  cursor:pointer;
  transition:all 0.3s ease;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-width:120px;
  font-family:var(--font-family);
}
.learn-more-btn:hover{
  border-color:var(--color-primary);
  color:var(--color-primary);
  background:var(--color-primary-bg);
}
.learn-more-btn i:last-child{transition:transform 0.3s ease}
.learn-more-btn.open i:last-child{transform:rotate(180deg)}
.learn-more-wrapper{width:100%;margin:4px 0}
.learn-more-content{
  display:none;
  margin-top:8px;
  padding:20px 24px;
  background:var(--bg-card);
  border:1px solid var(--border-color);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-md);
  text-align:right;
}
.learn-more-content.open{display:block;animation:slideDown 0.3s ease}
@keyframes slideDown{
  from{opacity:0;transform:translateY(-10px)}
  to{opacity:1;transform:translateY(0)}
}
.learn-more-content .info-content{display:grid;grid-template-columns:1fr;gap:12px}
.learn-more-content .info-section h4{
  font-size:14px;
  font-weight:var(--weight-bold);
  color:var(--text-body);
  margin:0 0 8px 0;
  display:flex;
  align-items:center;
  gap:8px;
}
.learn-more-content .info-section h4 i{color:var(--color-primary);font-size:18px}
.learn-more-content .info-section ul{padding:0;margin:0;list-style:none}
.learn-more-content .info-section ul li{
  font-size:13px;
  color:var(--text-muted);
  line-height:1.8;
  padding:3px 0;
  padding-right:18px;
  position:relative;
}
.learn-more-content .info-section ul li::before{
  content:'•';
  position:absolute;
  right:0;
  color:var(--color-primary);
  font-weight:700;
  font-size:18px;
}
.learn-more-content .info-section ul li strong{
  color:var(--text-body);
  font-weight:var(--weight-bold);
}
.search-results{
  display:none;
  background:var(--bg-card);
  border:1px solid var(--border-color);
  border-radius:var(--radius-md);
  max-height:200px;
  overflow-y:auto;
  position:absolute;
  width:100%;
  box-shadow:var(--shadow-md);
  margin-top:4px;
  left:0;
  top:100%;
  z-index:10;
}
.search-results.is-open{display:block}
.search-result-item{
  padding:8px 12px;
  cursor:pointer;
  border-bottom:1px solid var(--border-color);
  transition:all 0.2s;
}
.search-result-item:last-child{border-bottom:none}
.search-result-item:hover{background:var(--color-primary-light)}
.search-empty{padding:8px 12px;color:var(--text-muted)}
.input-wrapper{position:relative}
.toggle-password{
  position:absolute;
  left:14px;
  top:50%;
  transform:translateY(-50%);
  background:none;
  border:none;
  color:var(--text-muted);
  cursor:pointer;
  font-size:var(--text-base);
}
.password-strength{margin-top:var(--space-2)}
.password-strength .bar{display:flex;gap:4px;height:4px;margin-top:var(--space-1)}
.password-strength .bar span{
  flex:1;
  border-radius:var(--radius-full);
  background:var(--color-gray-200);
  transition:var(--transition-fast);
}
.password-strength .bar span.active.weak{background:var(--color-danger)}
.password-strength .bar span.active.medium{background:var(--color-warning)}
.password-strength .bar span.active.strong{background:var(--color-success)}
.password-strength .label{font-size:var(--text-xs);color:var(--text-muted)}
.otp-mobile{color:var(--color-primary)}
.otp-group{
  display:flex;
  gap:var(--space-2);
  justify-content:center;
  margin:var(--space-6) 0;
  direction:ltr;
}
.otp-input{
  width:50px;
  height:60px;
  text-align:center;
  font-size:24px;
  font-weight:var(--weight-bold);
  font-family:var(--font-mono);
  border:1.5px solid var(--color-gray-200);
  border-radius:var(--radius-md);
  background:var(--bg-card);
  color:var(--text-body);
  transition:border-color var(--transition-fast),box-shadow var(--transition-fast);
  outline:none;
  padding:0;
  caret-color:var(--color-primary);
}
.otp-input:focus{border-color:var(--color-primary);box-shadow:0 0 0 3px rgba(249,115,22,0.12)}
.otp-input.filled{border-color:var(--color-primary);background:var(--color-primary-light)}
.otp-input.input-error{border-color:var(--color-danger);box-shadow:0 0 0 3px rgba(220,38,38,0.12)}
.contact-info-section{
  text-align:center;
  padding:20px 0;
  color:var(--text-muted);
  font-size:0.85rem;
  margin-top:20px;
}
.contact-info-section .contact-info-brand{
  margin-top:4px;
  font-size:0.75rem;
}
.address-line{
  font-size:var(--text-sm);
  color:var(--text-body);
  margin:var(--space-2) 0 var(--space-1);
  line-height:var(--leading-relaxed);
}
.address-meta{
  font-size:var(--text-xs);
  color:var(--text-muted);
  margin:0;
}
.form-error.review-note{
  max-width:240px;
  font-size:11px;
  line-height:1.6;
  text-align:right;
}
.row-hidden{display:none !important}
.notif-item{cursor:pointer;transition:background 0.2s}
.notif-item--unread{background:rgba(249,115,22,0.06)}
.notif-item:hover{background:var(--color-gray-100)}
.notif-msg{color:var(--text-muted)}
.notif-open{margin-right:auto;flex-shrink:0}
.slide-out{opacity:0;transform:translateX(-20px);transition:all 0.3s ease}
.dark-mode .section-divider-hr{
  background:linear-gradient(90deg,transparent,var(--color-primary) 30%,var(--color-primary) 70%,transparent);
}
.dark-mode .alert-success{background:#064e3b;border-color:#065f46;color:#a7f3d0}
.dark-mode .alert-warning{background:#78350f;border-color:#92400e;color:#fde68a}
.dark-mode .alert-danger{background:#7f1d1d;border-color:#991b1b;color:#fecaca}
.dark-mode .alert-info{background:#0c4a6e;border-color:#0c4a6e;color:#bae6fd}
.dark-mode .alert{background:rgba(217,119,6,0.15);color:#fcd34d}
.dark-mode .alert .alert-icon{color:#fcd34d}
.dark-mode .blog-page-header{border-color:var(--border-color)}
.dark-mode .blog-page-header h1{color:var(--text-body)}
.dark-mode .blog-page-header p{color:var(--text-muted)}
.dark-mode .blog-categories .cat-btn{background:var(--bg-card);border-color:var(--border-color);color:var(--text-muted)}
.dark-mode .blog-categories .cat-btn:hover{border-color:var(--color-primary);color:var(--color-primary)}
.dark-mode .blog-categories .cat-btn.active{background:var(--color-primary);color:#fff}
.dark-mode .blog-card{background:var(--bg-card);border-color:var(--border-color)}
.dark-mode .blog-card:hover{border-color:var(--color-primary)}
.dark-mode .blog-card .blog-image-placeholder{background:var(--color-gray-100);color:var(--color-gray-400)}
.dark-mode .blog-card .blog-content .blog-title{color:var(--text-body)}
.dark-mode .blog-card .blog-content .blog-title a{color:var(--text-body)}
.dark-mode .blog-card .blog-content .blog-excerpt{color:var(--text-muted)}
.dark-mode .blog-card .blog-content .blog-meta{border-color:var(--border-color)}
.dark-mode .blog-card .blog-content .blog-meta .blog-date{color:var(--text-muted)}
.dark-mode .scroll-btn{background:var(--bg-card);border-color:var(--border-color);color:var(--text-muted)}
.dark-mode .scroll-btn:hover{background:var(--color-primary);color:#fff;border-color:var(--color-primary)}
.dark-mode .about-header h1{color:var(--text-body)}
.dark-mode .about-header p{color:var(--text-muted)}
.dark-mode .about-section h2{color:var(--text-body)}
.dark-mode .about-section p{color:var(--text-muted)}
.dark-mode .about-section ul li{color:var(--text-muted)}
.dark-mode .about-values .value-card{background:var(--bg-card);border-color:var(--border-color)}
.dark-mode .about-values .value-card:hover{border-color:var(--color-primary)}
.dark-mode .about-values .value-card h4{color:var(--text-body)}
.dark-mode .about-values .value-card p{color:var(--text-muted)}
.dark-mode .about-stats .stat-card{background:var(--bg-card);border-color:var(--border-color)}
.dark-mode .about-stats .stat-label{color:var(--text-muted)}
.dark-mode .about-team .team-card{background:var(--bg-card);border-color:var(--border-color)}
.dark-mode .about-team .team-card h4{color:var(--text-body)}
.dark-mode .about-team .team-card p{color:var(--text-muted)}
.dark-mode .about-team .team-card .team-avatar{background:var(--border-color);color:var(--text-muted)}
.dark-mode .ad-banner{background:var(--bg-card);border:1px solid var(--border-color)}
.dark-mode .ad-close{background:rgba(255,255,255,0.15);color:var(--text-body)}
.dark-mode .ad-close:hover{background:rgba(255,255,255,0.25)}
.dark-mode .ad-label{background:rgba(0,0,0,0.8)}
.dark-mode .ad-card{background:var(--bg-card);border-color:var(--border-color)}
.dark-mode .ad-card h4{color:var(--text-body)}
.dark-mode .ad-card p{color:var(--text-muted)}
.dark-mode .contact-header h1{color:var(--text-body)}
.dark-mode .contact-header p{color:var(--text-muted)}
.dark-mode .contact-info .info-card{background:var(--bg-card);border-color:var(--border-color)}
.dark-mode .contact-info .info-card:hover{border-color:var(--color-primary)}
.dark-mode .contact-info .info-card .info-content h4{color:var(--text-body)}
.dark-mode .contact-info .info-card .info-content p,
.dark-mode .contact-info .info-card .info-content a{color:var(--text-muted)}
.dark-mode .contact-form{background:var(--bg-card);border-color:var(--border-color)}
.dark-mode .contact-form h3{color:var(--text-body)}
.dark-mode .contact-form .form-group label{color:var(--text-body)}
.dark-mode .contact-form .form-group .input{background:var(--bg-input);border-color:var(--border-color);color:var(--text-body)}
.dark-mode .contact-form .form-group .textarea{background:var(--bg-input);border-color:var(--border-color);color:var(--text-body)}
.dark-mode .contact-social h3{color:var(--text-body)}
.dark-mode .contact-social .social-links a{background:var(--bg-card);border-color:var(--border-color);color:var(--text-muted)}
.dark-mode .contact-social .social-links a:hover{background:var(--color-primary);border-color:var(--color-primary);color:#fff}
.dark-mode .login-card{background:var(--bg-card);border-color:var(--border-color)}
.dark-mode .login-title{color:var(--text-body)}
.dark-mode .login-subtitle{color:var(--text-muted)}
.dark-mode .login-icon{background:rgba(249,115,22,0.12)}
.dark-mode .login-footer{border-color:var(--border-color)}
.dark-mode .login-page::before{background:radial-gradient(circle,rgba(249,115,22,0.08) 0%,transparent 70%)}
.dark-mode .login-page::after{background:radial-gradient(circle,rgba(249,115,22,0.06) 0%,transparent 70%)}
.dark-mode .otp-input{background:var(--bg-input);border-color:var(--border-color);color:var(--text-body)}
.dark-mode .otp-input.filled{background:rgba(249,115,22,0.1)}
.dark-mode .modal-overlay{background:rgba(0,0,0,0.8)}
.dark-mode .modal{background:var(--bg-card);border:1px solid var(--border-color)}
.dark-mode .modal-close{background:var(--border-color);color:var(--text-muted)}
.dark-mode .modal-close:hover{background:var(--color-gray-300);color:var(--text-body)}
.dark-mode .modal-header{color:var(--text-body)}
.dark-mode .modal-text{color:var(--text-muted)}
.dark-mode .operator-card{background:var(--bg-card);border-color:var(--border-color)}
.dark-mode .operator-card:hover{border-color:var(--color-primary)}
.dark-mode .operator-card h4{color:var(--text-body)}
.dark-mode .review-card{background:var(--bg-card);border-color:var(--border-color)}
.dark-mode .review-card:hover{border-color:var(--color-primary)}
.dark-mode .review-card .review-avatar{background:var(--border-color);color:var(--text-muted)}
.dark-mode .review-card .review-name{color:var(--text-body)}
.dark-mode .review-card .review-text{color:var(--text-muted)}
.dark-mode .review-card .review-footer{border-color:var(--border-color)}
.dark-mode .review-card .review-shop{color:var(--color-primary)}
.dark-mode .category-card{background:var(--bg-card);border-color:var(--border-color)}
.dark-mode .category-card:hover{border-color:var(--color-primary)}
.dark-mode .sim-card--featured{border-color:#fcd34d;background:#1a1a2e}
.dark-mode .sim-price{color:var(--color-primary)}
.dark-mode .sim-price-row{border-top-color:var(--border-color)}
.dark-mode .stat-card{background:var(--bg-card);border-color:var(--border-color)}
.dark-mode .stat-card .stat-number{color:var(--text-body)}
.dark-mode .stat-card .stat-label{color:var(--text-muted)}
.dark-mode .stat-card-primary .stat-icon{background:rgba(249,115,22,0.15)}
.dark-mode .stat-card-info .stat-icon{background:rgba(2,132,199,0.15)}
.dark-mode .stat-card-success .stat-icon{background:rgba(5,150,105,0.15)}
.dark-mode .stat-card-warning .stat-icon{background:rgba(217,119,6,0.15)}
.dark-mode .stat-card-purple .stat-icon{background:rgba(147,51,234,0.15)}
.dark-mode .stat-icon-primary{background:rgba(249,115,22,0.15)}
.dark-mode .stat-icon-info{background:rgba(2,132,199,0.15)}
.dark-mode .stat-icon-warning{background:rgba(217,119,6,0.15)}
.dark-mode .stat-icon-purple{background:rgba(147,51,234,0.15)}
.dark-mode .tag{background:var(--border-color);color:var(--text-muted)}
.dark-mode .tag--hot{background:#2d1f00;color:#fcd34d}
.dark-mode .tag--verified{background:#064e3b;color:#34d399}
.dark-mode .tag--danger{background:#7f1d1d;color:#f87171}
.dark-mode .tag--warning{background:#78350f;color:#fbbf24}
.dark-mode .tag--info{background:#0c4a6e;color:#7dd3fc}
.dark-mode .badge{background:var(--border-color);color:var(--text-muted)}
.dark-mode .badge-primary{background:#2d1f00;color:var(--color-primary)}
.dark-mode .badge-success{background:#064e3b;color:var(--color-success)}
.dark-mode .badge-danger{background:#7f1d1d;color:var(--color-danger)}
.dark-mode .badge-warning{background:#78350f;color:var(--color-warning)}
.dark-mode .kit-section{border-bottom-color:var(--border-color)}
.dark-mode .kit-title{color:var(--text-body)}
.dark-mode .kit-title small{color:var(--text-muted)}
.dark-mode .kit-toggle-group .toggle-label{color:var(--text-muted)}
.dark-mode .kit-hero-wrapper{background:var(--color-gray-100)}
.dark-mode .service-card{background:var(--bg-card);border-color:var(--border-color)}
.dark-mode .shop-profile-demo{background:var(--bg-card);border-color:var(--border-color)}
.dark-mode .story-circle .story-avatar > *{background:var(--bg-card)}
.dark-mode .feature-item{background:var(--bg-card);border-color:var(--border-color)}
.dark-mode .feature-item:hover{border-color:var(--color-primary);box-shadow:0 8px 30px rgba(0,0,0,0.3)}
.dark-mode .feature-item i{background:rgba(249,115,22,0.12)}
.dark-mode .feature-item:hover i{background:var(--color-primary);color:#fff}
.dark-mode .feature-item h4{color:var(--text-body)}
.dark-mode .feature-item p{color:var(--text-muted)}
.dark-mode .section-header-wrap h3{color:var(--text-body)}
.dark-mode .section-header-wrap p{color:var(--text-muted)}
.dark-mode .hero{background:linear-gradient(145deg,#1e293b,#0f172a,#1e293b);border-color:rgba(249,115,22,0.12)}
.dark-mode .hero-background{opacity:0.08}
.dark-mode .hero h1{color:var(--text-body)}
.dark-mode .hero-subtitle{color:var(--text-muted)}
.dark-mode .search-box-wrapper{background:var(--bg-card);border-color:var(--border-color)}
.dark-mode .search-box-wrapper:focus-within{border-color:var(--color-primary);box-shadow:0 0 0 5px rgba(249,115,22,0.1)}
.dark-mode .btn-phonetic-inline{background:var(--bg-card);border-color:var(--border-color);color:var(--text-muted)}
.dark-mode .btn-phonetic-inline:hover{border-color:var(--color-primary);color:var(--color-primary);background:rgba(249,115,22,0.1)}
.dark-mode .btn-phonetic-inline.active{border-color:var(--color-primary);background:rgba(249,115,22,0.15);color:var(--color-primary)}
.dark-mode .digit-input{background:var(--bg-input) !important;color:var(--text-body)}
.dark-mode .digit-input:focus{background:var(--bg-card) !important}
.dark-mode .digit-input.prefix-slot{background:rgba(249,115,22,0.15) !important;color:#fcd34d}
.dark-mode .digit-input.filled{background:var(--bg-card) !important}
.dark-mode .digit-input.prefix-slot.filled{background:rgba(249,115,22,0.15) !important}
.dark-mode .suggested-header .suggested-title{color:var(--text-body)}
.dark-mode .suggested-badge{background:var(--color-primary);color:#fff}
.dark-mode .suggested-badge:hover{background:var(--color-primary-dark)}
.dark-mode .hero-listing-card{background:var(--bg-card);border-color:var(--border-color)}
.dark-mode .hero-listing-card:hover{border-color:var(--color-primary)}
.dark-mode .hero-listing-card .hero-card-number{color:var(--text-body)}
.dark-mode .hero-listing-card .hero-card-operator{color:var(--text-muted)}
.dark-mode .hero-listing-card .hero-card-price .hero-new-price{color:var(--text-body)}
.dark-mode .hero-listing-card .hero-card-arrow{background:var(--color-primary)}
.dark-mode .hero-listing-card .hero-card-back{background:linear-gradient(145deg,#ea580c,#c2410c)}
.dark-mode .hero-listing-card .hero-card-back .hero-btn-estimate{background:rgba(255,255,255,0.1);border-color:rgba(255,255,255,0.15)}
.dark-mode .hero-listing-card .hero-card-back .hero-btn-estimate:hover{background:rgba(255,255,255,0.2)}
.dark-mode .hero-listing-card .hero-card-back .hero-btn-view{background:#fff;color:#ea580c}
.dark-mode .hero-listing-card .hero-card-back .hero-btn-view:hover{background:#fef3c7}
.dark-mode .hero-listing-card.hero-personal{border-color:#3b82f6}
.dark-mode .hero-listing-card.hero-personal:hover{border-color:#3b82f6}
.dark-mode .hero-listing-card.hero-personal .hero-card-arrow{background:#3b82f6}
.dark-mode .hero-listing-card.hero-platform{border-color:#f97316}
.dark-mode .hero-listing-card.hero-platform:hover{border-color:#f97316}
.dark-mode .hero-listing-card.hero-platform .hero-card-arrow{background:#f97316}
.dark-mode .hero-listing-card.hero-shop{border-color:#8b5cf6}
.dark-mode .hero-listing-card.hero-shop:hover{border-color:#8b5cf6}
.dark-mode .hero-listing-card.hero-shop .hero-card-arrow{background:#8b5cf6}
.dark-mode .hero-type-badge.hero-personal-badge{background:#3b82f6}
.dark-mode .hero-type-badge.hero-platform-badge{background:#f97316}
.dark-mode .hero-type-badge.hero-shop-badge{background:#8b5cf6}
.dark-mode .learn-more-btn{background:var(--bg-card);border-color:var(--border-color);color:var(--text-muted)}
.dark-mode .learn-more-btn:hover{border-color:var(--color-primary);color:var(--color-primary);background:rgba(249,115,22,0.08)}
.dark-mode .learn-more-content{background:var(--bg-card);border-color:var(--border-color)}
.dark-mode .learn-more-content .info-section h4{color:var(--text-body)}
.dark-mode .learn-more-content .info-section ul li{color:var(--text-muted)}
.dark-mode .learn-more-content .info-section ul li strong{color:var(--text-body)}
.dark-mode .dashboard-greeting,
.dark-mode .table-section,
.dark-mode .edit-listing-card,
.dark-mode .preview-card,
.dark-mode .info-card,
.dark-mode .sp-header,
.dark-mode .sp-card,
.dark-mode .sp-section,
.dark-mode .sp-actions,
.dark-mode .sp-tabs{background:var(--bg-card);border-color:var(--border-color)}
.dark-mode .dashboard-greeting .greeting-text h1{color:var(--text-body)}
.dark-mode .table-wrapper{background:var(--bg-card);border-color:var(--border-color)}
.dark-mode .table thead{background:var(--color-gray-100)}
.dark-mode .table th{background:var(--color-gray-100);color:var(--text-body);border-bottom-color:var(--border-color)}
.dark-mode .table td{color:var(--text-body);border-bottom-color:var(--border-color)}
.dark-mode .table tbody tr:hover{background:rgba(249,115,22,0.05)}
.dark-mode .table .status-badge.draft{background:var(--border-color);color:var(--text-muted)}
.dark-mode .status-badge.active{background:rgba(5,150,105,0.15);color:#34d399}
.dark-mode .status-badge.pending,
.dark-mode .status-badge.in_check{background:rgba(217,119,6,0.15);color:#fcd34d}
.dark-mode .status-badge.expired{background:var(--color-gray-100);color:var(--text-muted)}
.dark-mode .status-badge.draft{background:rgba(2,132,199,0.15);color:#7dd3fc}
.dark-mode .status-badge.rejected{background:rgba(220,38,38,0.15);color:#fca5a5}
.dark-mode .pagination .page-item{background:var(--bg-card);border-color:var(--border-color);color:var(--text-body)}
.dark-mode .pagination .page-item:hover{background:rgba(249,115,22,0.1);border-color:var(--color-primary)}
.dark-mode .pagination .page-item.active{background:var(--color-primary);color:#fff}
.dark-mode .pagination-item{background:var(--color-navy-soft);color:var(--text-muted)}
.dark-mode .pagination-item:hover:not(.active):not(.disabled){background:rgba(249,115,22,0.15);color:var(--color-primary);border-color:var(--color-primary)}
.dark-mode .pagination-item.active{background:var(--color-primary);color:#fff}
.dark-mode .message-item{background:var(--bg-card);border-color:var(--border-color)}
.dark-mode .message-item:hover{background:var(--color-gray-200)}
.dark-mode .message-item .message-sender{color:var(--text-body)}
.dark-mode .message-item .message-preview{color:var(--text-muted)}
.dark-mode .message-item .message-date{color:var(--text-muted)}
.dark-mode .message-avatar{background:var(--color-gray-100);color:var(--color-gray-400)}
.dark-mode .quick-action{background:var(--bg-card);border-color:var(--border-color);color:var(--text-body)}
.dark-mode .quick-action i{background:rgba(249,115,22,0.15);border-radius:var(--radius-sm);padding:8px;width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center}
.dark-mode .panel-tabs{background:var(--bg-card);border-color:var(--border-color)}
.dark-mode .panel-tabs a{color:var(--text-muted)}
.dark-mode .panel-tabs a:hover{background:var(--color-gray-100);color:var(--text-body)}
.dark-mode .panel-tabs a.active{background:var(--color-primary);color:#fff}
.dark-mode .panel-tabs a .badge{background:var(--color-gray-100);color:var(--text-muted)}
.dark-mode .panel-tabs a.active .badge{background:rgba(255,255,255,0.25);color:#fff}
.dark-mode .empty-state i{color:var(--color-gray-600)}
.dark-mode .empty-state p{color:var(--text-muted)}
.dark-mode .table-actions .search-box{background:var(--bg-card);border-color:var(--border-color)}
.dark-mode .table-actions .search-box input{color:var(--text-body)}
.dark-mode .filter-bar .filter-input,
.dark-mode .filter-bar .filter-select,
.dark-mode .filter-input,
.dark-mode .filter-select{background:var(--bg-input);color:var(--text-body);border-color:var(--border-color)}
.dark-mode .filter-dropdown .filter-btn{background:var(--bg-card);border-color:var(--border-color);color:var(--text-body)}
.dark-mode .filter-dropdown .filter-menu{background:var(--bg-card);border-color:var(--border-color)}
.dark-mode .filter-dropdown .filter-menu label:hover{background:var(--border-color)}
.dark-mode .grid-view .grid-item{background:var(--bg-card);border-color:var(--border-color)}
.dark-mode .grid-view .grid-item:hover{border-color:var(--color-primary)}
.dark-mode .count-badge{background:var(--color-gray-100);color:var(--text-muted)}
.dark-mode .sp-input,
.dark-mode .sp-select,
.dark-mode .sp-textarea,
.dark-mode .input,
.dark-mode .textarea,
.dark-mode .select{background:var(--bg-input);color:var(--text-body);border-color:var(--border-color)}
.dark-mode .sp-label,
.dark-mode .form-label{color:var(--text-body)}
.dark-mode .sp-header-name,
.dark-mode .sp-card-title,
.dark-mode .sp-section-title,
.dark-mode .sp-timeline-title,
.dark-mode .sp-demo-card h4{color:var(--text-body)}
.dark-mode .sp-progress-ring-bg{stroke:var(--color-gray-100)}
.dark-mode .sp-check{background:var(--color-gray-100);color:var(--text-body)}
.dark-mode .sp-check:hover{background:rgba(249,115,22,0.1);border-color:var(--color-primary)}
.dark-mode .sp-check.done{background:rgba(5,150,105,0.15);color:#6ee7b7}
.dark-mode .sp-check .check-icon{background:var(--color-gray-200)}
.dark-mode .sp-badge{background:var(--color-gray-100);color:var(--color-gray-400)}
.dark-mode .sp-badge.earned{background:rgba(249,115,22,0.15);color:var(--color-primary)}
.dark-mode .sp-tab{color:var(--text-muted)}
.dark-mode .sp-tab:hover{background:var(--color-gray-100);color:var(--text-body)}
.dark-mode .sp-tab.active{background:var(--color-primary);color:#fff}
.dark-mode .sp-map-wrap{background:var(--color-gray-100);border-color:var(--border-color)}
.dark-mode .sp-map-status{background:var(--color-gray-100)}
.dark-mode .sp-map-status.ok{background:rgba(5,150,105,0.15);color:#6ee7b7}
.dark-mode .sp-presets button{background:var(--bg-card);border-color:var(--border-color);color:var(--text-muted)}
.dark-mode .sp-day{background:var(--bg-card);border-color:var(--border-color);color:var(--text-body)}
.dark-mode .sp-day:has(input:checked){background:rgba(249,115,22,0.15);border-color:var(--color-primary);color:var(--color-primary)}
.dark-mode .sp-chip{background:var(--bg-card);border-color:var(--border-color);color:var(--text-body)}
.dark-mode .sp-chip:has(input:checked){background:var(--color-primary);color:#fff;border-color:var(--color-primary)}
.dark-mode .sp-image-upload{background:var(--color-gray-100);border-color:var(--border-color)}
.dark-mode .sp-image-upload .sp-image-placeholder{color:var(--color-gray-400)}
.dark-mode .sp-dropzone{background:var(--color-gray-100);border-color:var(--border-color)}
.dark-mode .sp-gallery-item{border-color:var(--border-color)}
.dark-mode .sp-timeline-icon{background:var(--color-gray-100);color:var(--text-muted)}
.dark-mode .sp-timeline-icon.success{background:rgba(5,150,105,0.15);color:#6ee7b7}
.dark-mode .sp-timeline-icon.warning{background:rgba(217,119,6,0.15);color:#fcd34d}
.dark-mode .sp-timeline-icon.danger{background:rgba(220,38,38,0.15);color:#fca5a5}
.dark-mode .sp-timeline-icon.info{background:rgba(2,132,199,0.15);color:#7dd3fc}
.dark-mode .sp-timeline-content{background:var(--color-gray-100)}
.dark-mode .sp-filters button{background:var(--bg-card);border-color:var(--border-color);color:var(--text-muted)}
.dark-mode .sp-filters button.active{background:var(--color-primary);color:#fff}
.dark-mode .field-status.ok{background:rgba(5,150,105,0.15);color:#34d399}
.dark-mode .field-status.missing{background:rgba(217,119,6,0.15);color:#fcd34d}
.dark-mode .verified-badge{background:rgba(5,150,105,0.15);color:#34d399}
.dark-mode .verified-badge.featured-badge{background:rgba(217,119,6,0.15);color:#fcd34d}
.dark-mode .verified-badge.verified-badge--pending{background:rgba(217,119,6,0.15);color:#fcd34d}
.dark-mode .verified-badge.verified-badge--info{background:rgba(2,132,199,0.15);color:#7dd3fc}
.dark-mode .verified-badge.verified-badge--danger{background:rgba(220,38,38,0.15);color:#fca5a5}
.dark-mode .section-status.ok{background:rgba(5,150,105,0.15);color:#34d399}
.dark-mode .section-status.missing{background:rgba(217,119,6,0.15);color:#fcd34d}
.dark-mode .sp-btn-outline{background:var(--bg-card);color:var(--text-body);border-color:var(--border-color)}
.dark-mode .sp-btn-outline:hover{border-color:var(--color-primary);color:var(--color-primary)}
.dark-mode .sp-back:hover{background:var(--color-gray-100)}
.dark-mode .info-card h3{color:var(--text-body)}
.dark-mode .info-card p{color:var(--text-muted)}
.dark-mode .exposure-meter{color:var(--text-body)}
.dark-mode .exposure-meter .bar{background:var(--color-gray-100)}
.dark-mode .bulk-bar{background:var(--color-gray-100)}
.dark-mode .audit-list li{background:var(--color-gray-100)}
.dark-mode .check-list li{background:var(--color-gray-100)}
.dark-mode .check-list li.danger{background:rgba(220,38,38,0.15);color:#fca5a5}
.dark-mode .check-list li.warn{background:rgba(217,119,6,0.15);color:#fcd34d}
.dark-mode .check-list li.ok{background:rgba(5,150,105,0.15);color:#34d399}
.dark-mode .big-number{background:rgba(249,115,22,0.12)}
.dark-mode .thread-msg{background:var(--color-gray-100)}
.dark-mode .thread-msg.user{background:rgba(2,132,199,0.15);border-color:rgba(2,132,199,0.3)}
.dark-mode .thread-msg.staff{background:rgba(249,115,22,0.12);border-color:rgba(249,115,22,0.35)}
.dark-mode .thread-msg.internal{background:rgba(217,119,6,0.15);border-color:rgba(217,119,6,0.35)}
.dark-mode .prio{background:var(--color-gray-100)}
.dark-mode .prio.high{background:rgba(220,38,38,0.15);color:#fca5a5}
.dark-mode .prio.medium{background:rgba(217,119,6,0.15);color:#fcd34d}
.dark-mode .prio.low{background:rgba(2,132,199,0.15);color:#7dd3fc}
.dark-mode .edit-listing-section{border-color:var(--border-color)}
.dark-mode .edit-listing-section-title,
.dark-mode .edit-listing-page-title h1{color:var(--text-body)}
.dark-mode .edit-listing-alert{background:rgba(217,119,6,0.12);border-color:rgba(217,119,6,0.35);border-right-color:#f59e0b;color:#fcd34d}
.dark-mode .edit-listing-alert i{color:#f59e0b}
.dark-mode .edit-listing-alert strong{color:#fde68a}
.dark-mode .price-block{background:var(--color-gray-100)}
.dark-mode .price-hint{background:rgba(5,150,105,0.15);border-color:rgba(5,150,105,0.3);color:#6ee7b7}
.dark-mode .preview-sim{background:linear-gradient(135deg,rgba(249,115,22,0.08),var(--bg-card))}
.dark-mode .preview-sim .sim-number{color:var(--text-body)}
.dark-mode .preview-sim .sim-image{background:var(--color-gray-100);border-color:var(--border-color)}
.dark-mode .verification-box.need_verify{background:var(--color-gray-100)}
.dark-mode .listing-meta .chip{background:var(--color-gray-100)}
.dark-mode .listing-meta .chip.success{background:rgba(5,150,105,0.15);color:#6ee7b7}
.dark-mode .listing-meta .chip.warning{background:rgba(217,119,6,0.15);color:#fcd34d}
.dark-mode .listing-meta .chip.danger{background:rgba(220,38,38,0.15);color:#fca5a5}
.dark-mode .listing-meta .chip.info{background:rgba(2,132,199,0.15);color:#7dd3fc}
.dark-mode .notif-item--unread{background:rgba(249,115,22,0.1)}
.dark-mode .notif-item:hover{background:var(--color-gray-100)}
.dark-mode .search-result-item:hover{background:rgba(249,115,22,0.1)}
.dark-mode *:focus-visible{border-color:var(--color-primary)}
.wallet-box{
  background:var(--bg-card);
  border:1px solid var(--border-color);
  border-radius:var(--radius-lg);
  padding:var(--space-5);
  box-shadow:var(--shadow-sm);
  margin-bottom:var(--space-5);
}
.wallet-box h3{
  font-size:var(--text-lg);
  font-weight:var(--weight-bold);
  color:var(--text-body);
  margin:0 0 var(--space-2);
}
.wallet-sub{
  font-size:var(--text-sm);
  color:var(--text-muted);
  margin:0 0 var(--space-4);
  line-height:var(--leading-relaxed);
}
.wallet-box .amounts{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:var(--space-2);
  margin-bottom:var(--space-4);
}
.wallet-box .amt{
  padding:var(--space-3) var(--space-2);
  background:var(--color-gray-50);
  border:1.5px solid var(--border-color);
  border-radius:var(--radius-md);
  font-size:var(--text-sm);
  font-weight:var(--weight-bold);
  color:var(--text-body);
  cursor:pointer;
  font-family:var(--font-family);
  transition:var(--transition-fast);
  direction:rtl;
}
.wallet-box .amt:hover{border-color:var(--color-primary);color:var(--color-primary);background:var(--color-primary-light)}
.wallet-box .amt.active{
  background:var(--color-primary);
  border-color:var(--color-primary);
  color:#fff;
  box-shadow:0 4px 12px rgba(249,115,22,.25);
}
.wallet-box .amount-input{
  width:100%;
  padding:var(--space-4);
  background:var(--bg-input);
  border:1.5px solid var(--border-color);
  border-radius:var(--radius-md);
  font-size:var(--text-xl);
  font-weight:var(--weight-bold);
  color:var(--text-body);
  text-align:center;
  font-family:var(--font-family);
  margin-bottom:var(--space-4);
  direction:ltr;
}
.wallet-box .amount-input::placeholder{
  font-size:var(--text-sm);
  font-weight:var(--weight-normal);
  color:var(--text-muted);
}
.wallet-box .amount-input:focus{
  border-color:var(--color-primary);
  outline:none;
  box-shadow:0 0 0 3px rgba(249,115,22,.12);
}
.wallet-box .pay-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--space-3);
  margin-bottom:var(--space-4);
}
.wallet-box .pay-opt{
  display:flex;
  align-items:center;
  gap:var(--space-2);
  padding:var(--space-3) var(--space-4);
  background:var(--bg-card);
  border:1.5px solid var(--border-color);
  border-radius:var(--radius-md);
  font-size:var(--text-sm);
  font-weight:var(--weight-medium);
  color:var(--text-body);
  cursor:pointer;
  transition:var(--transition-fast);
}
.wallet-box .pay-opt:hover{border-color:var(--color-primary)}
.wallet-box .pay-opt.active{
  border-color:var(--color-primary);
  background:var(--color-primary-light);
  color:var(--color-primary);
}
.wallet-box .pay-opt input{accent-color:var(--color-primary)}
.wallet-box .pay-opt i{color:var(--color-primary)}
.wallet-box .submit-btn{
  width:100%;
  padding:var(--space-4);
  font-size:var(--text-md);
  font-weight:var(--weight-bold);
  border-radius:var(--radius-md);
  background:var(--color-primary);
  color:#fff;
  border:none;
  cursor:pointer;
  font-family:var(--font-family);
  transition:var(--transition-fast);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--space-2);
}
.wallet-box .submit-btn:hover:not(:disabled){background:var(--color-primary-dark);transform:translateY(-1px)}
.wallet-box .submit-btn:disabled{opacity:.5;pointer-events:none}
.dark-mode .wallet-box{background:var(--bg-card);border-color:var(--border-color)}
.dark-mode .wallet-box h3{color:var(--text-body)}
.dark-mode .wallet-box .amt{background:var(--color-gray-100);border-color:var(--border-color);color:var(--text-body)}
.dark-mode .wallet-box .amt:hover{border-color:var(--color-primary);color:var(--color-primary);background:rgba(249,115,22,.08)}
.dark-mode .wallet-box .amt.active{background:var(--color-primary);color:#fff}
.dark-mode .wallet-box .amount-input{background:var(--bg-input);border-color:var(--border-color);color:var(--text-body)}
.dark-mode .wallet-box .pay-opt{background:var(--bg-card);border-color:var(--border-color);color:var(--text-body)}
.dark-mode .wallet-box .pay-opt.active{background:rgba(249,115,22,.12);color:var(--color-primary)}
.sidebar{
  width:260px;
  padding:var(--space-6) var(--space-4);
  position:sticky;
  top:16px;
  max-height:calc(100vh - 32px);
  overflow-y:auto;
  flex-shrink:0;
  align-self:flex-start;
  transition:var(--transition-normal);
  background:var(--bg-card);
  color:var(--text-body);
  border:1px solid var(--border-color);
  border-radius:var(--radius-lg);
}
.sidebar::-webkit-scrollbar{width:4px}
.sidebar::-webkit-scrollbar-thumb{
  background:var(--color-primary);
  border-radius:var(--radius-full);
}
.sidebar .sidebar-header{
  text-align:center;
  padding-bottom:var(--space-6);
  border-bottom:1px solid var(--border-color);
  margin-bottom:var(--space-6);
}
.sidebar .sidebar-avatar{
  width:72px;
  height:72px;
  border-radius:var(--radius-full);
  background:var(--color-primary);
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto var(--space-3);
  font-size:2rem;
  color:var(--color-white);
  overflow:hidden;
  flex-shrink:0;
}
.sidebar .sidebar-avatar img{width:100%;height:100%;object-fit:cover}
.sidebar .sidebar-user{text-align:center}
.sidebar .sidebar-user .name{
  font-weight:var(--weight-bold);
  font-size:var(--text-lg);
  color:var(--text-body);
}
.sidebar .sidebar-user .member-since{
  font-size:var(--text-sm);
  color:var(--text-muted);
}
.sidebar .sidebar-user .role{margin-top:var(--space-1)}
.sidebar .badge-role{
  display:inline-block;
  padding:2px 12px;
  border-radius:var(--radius-full);
  font-size:var(--text-xs);
  font-weight:var(--weight-medium);
  background:var(--color-primary);
  color:var(--color-white);
}
.sidebar .sidebar-nav{
  display:flex;
  flex-direction:column;
  gap:var(--space-3);
}
.sidebar .nav-section{
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:0.5px;
  color:var(--text-muted);
  padding:12px 0;
  font-weight:var(--weight-bold);
  opacity:0.5;
}
.sidebar .sidebar-nav a{
  display:flex;
  align-items:center;
  gap:var(--space-3);
  padding:12px;
  border-radius:var(--radius-sm);
  transition:var(--transition-fast);
  text-decoration:none;
  font-size:14px;
  color:var(--text-muted);
  position:relative;
  cursor:pointer;
}
.sidebar .sidebar-nav a:hover{
  background:var(--color-gray-100);
  color:var(--text-body);
}
.sidebar .sidebar-nav a.active{
  background:var(--color-primary);
  color:#fff;
}
.sidebar .sidebar-nav a.active:hover{background:var(--color-primary-dark)}
.sidebar .sidebar-nav a i{
  width:20px;
  text-align:center;
  font-size:1rem;
  color:var(--text-muted);
  flex-shrink:0;
}
.sidebar .sidebar-nav a:hover i{color:var(--text-body)}
.sidebar .sidebar-nav a.active i{color:#fff}
.sidebar .sidebar-nav a .badge{
  margin-right:auto;
  color:#fff;
  background:var(--color-danger);
  padding:1px 8px;
  border-radius:var(--radius-full);
  font-size:var(--text-xs);
  font-weight:var(--weight-medium);
}
.sidebar .nav-divider{
  height:1px;
  margin:8px 0;
  background:var(--border-color);
}
.sidebar .sidebar-nav a.logout-link{padding-top:var(--space-3);color:var(--text-muted)}
.sidebar .sidebar-nav a.logout-link:hover,
.sidebar .sidebar-nav a.logout-link:hover i{color:var(--color-danger)}
.sidebar .sidebar-nav .has-submenu>.submenu-toggle{position:relative}
.sidebar .sidebar-nav .has-submenu>.submenu-toggle::after{
  content:'\f078';
  font-family:'Font Awesome 6 Free';
  font-weight:900;
  font-size:0.5rem;
  margin-right:auto;
  color:var(--text-muted);
  transition:var(--transition-fast);
}
.sidebar .sidebar-nav .has-submenu.open>.submenu-toggle::after{transform:rotate(180deg)}
.sidebar .sidebar-nav .submenu{
  max-height:0;
  overflow:hidden;
  transition:max-height 0.3s ease;
  padding-right:var(--space-2);
}
.sidebar .sidebar-nav .has-submenu.open .submenu{max-height:500px;margin:6px 0}
.sidebar .sidebar-nav .submenu a{
  padding:10px 0 10px 12px;
  font-size:13px;
  color:var(--text-muted);
  border-radius:var(--radius-sm);
}
.sidebar .sidebar-nav .submenu a:hover{
  color:var(--text-body);
  background:var(--color-gray-100);
}
.sidebar .sidebar-nav .submenu a i{font-size:0.75rem;width:18px}
.dark-mode .sidebar{
  background:var(--bg-card);
  border-color:var(--border-color);
}
.dark-mode .sidebar .sidebar-header{border-bottom-color:var(--border-color)}
.dark-mode .sidebar .sidebar-user .name{color:var(--text-body)}
.dark-mode .sidebar .sidebar-user .member-since{color:var(--text-muted)}
.dark-mode .sidebar .sidebar-nav a{color:var(--text-muted)}
.dark-mode .sidebar .sidebar-nav a:hover{
  background:var(--color-gray-100);
  color:var(--text-body);
}
.dark-mode .sidebar .sidebar-nav a.active{
  background:var(--color-primary);
  color:#fff;
}
.dark-mode .sidebar .sidebar-nav a i{color:var(--text-muted)}
.dark-mode .sidebar .sidebar-nav a:hover i{color:var(--text-body)}
.dark-mode .sidebar .sidebar-nav a.active i{color:#fff}
.dark-mode .sidebar .nav-divider{background:var(--border-color)}
.dark-mode .sidebar .sidebar-nav .submenu a:hover{
  background:var(--color-gray-100);
  color:var(--text-body);
}
.shop-reviews-page{padding-top:var(--space-6);padding-bottom:var(--space-8)}
.shop-reviews-layout{display:grid;grid-template-columns:1fr;gap:var(--space-6);align-items:start}
.shop-reviews-avg{font-size:var(--text-2xl);font-weight:800;color:var(--color-primary)}
.shop-reviews-count{margin-bottom:var(--space-4)}
.shop-rating-row{display:flex;align-items:center;gap:var(--space-2);font-size:var(--text-xs);margin-top:6px}
.shop-rating-bar{flex:1;display:block;height:6px;border-radius:6px;background:var(--color-gray-200);overflow:hidden}
.shop-rating-bar > span{display:block;height:100%;background:var(--color-primary);border-radius:6px}
.shop-review-stars{color:#f59e0b;letter-spacing:2px}
.shop-review-text{margin:8px 0 0;font-size:var(--text-sm);line-height:1.8}
.shop-review-meta{margin-top:var(--space-2);font-size:var(--text-xs);color:var(--text-muted)}
.shop-review-reply{margin-top:var(--space-4);margin-bottom:0}
.shop-review-empty{margin:0}
.review-card{border-right:3px solid transparent;transition:all 0.2s ease}
.review-card:hover{border-right-color:var(--color-primary);box-shadow:var(--shadow-md)}
.shop-review-reply-form{margin-top:var(--space-4)}
.filter-group-label{
  font-size:var(--text-xs);
  font-weight:var(--weight-bold);
  color:var(--text-muted);
  margin-bottom:var(--space-2);
}
.sp-filters{
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-2);
}
.sp-filters .filter-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 16px;
  border-radius:var(--radius-full);
  border:1.5px solid var(--border-color);
  background:var(--bg-card);
  color:var(--text-muted);
  font-size:var(--text-xs);
  font-weight:var(--weight-semibold);
  text-decoration:none;
  transition:all 0.2s ease;
  cursor:pointer;
  white-space:nowrap;
}
.sp-filters .filter-btn:hover{
  border-color:var(--color-primary);
  color:var(--color-primary);
  background:var(--color-primary-light);
}
.sp-filters .filter-btn.active{
  background:var(--color-primary);
  border-color:var(--color-primary);
  color:#fff;
  box-shadow:0 4px 12px rgba(249,115,22,0.25);
}
.dark-mode .sp-filters .filter-btn{
  background:var(--bg-card);
  border-color:var(--border-color);
  color:var(--text-muted);
}
.dark-mode .sp-filters .filter-btn:hover{
  border-color:var(--color-primary);
  color:var(--color-primary);
  background:rgba(249,115,22,0.1);
}
.dark-mode .sp-filters .filter-btn.active{
  background:var(--color-primary);
  color:#fff;
}
.share-actions{display:flex;gap:8px;flex-shrink:0}
.share-actions button{
  width:40px;height:40px;border-radius:50%;
  border:1.5px solid #e5e7eb;background:#fff;color:#6b7280;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:all 0.2s;font-size:1rem;
}
.share-actions button:hover{
  border-color:#f97316;color:#f97316;background:#fff7ed;transform:translateY(-2px);
}
.shop-reviews-actions-bar{
  display:flex;
  align-items:center;
  gap:var(--space-4);
  padding:var(--space-4) var(--space-5);
  flex-wrap:wrap;
}
.shop-reviews-actions-text{
  flex:1;
  min-width:200px;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.shop-reviews-actions-text strong{
  font-size:var(--text-sm);
  font-weight:var(--weight-bold);
  color:var(--text-body);
}
.shop-reviews-actions-text span{
  font-size:var(--text-xs);
  color:var(--text-muted);
  line-height:1.8;
}
.share-status{
  position:fixed;bottom:24px;left:50%;transform:translateX(-50%);
  background:#0f172a;color:#fff;padding:10px 22px;border-radius:30px;
  font-size:0.85rem;z-index:9999;opacity:0;pointer-events:none;
  transition:opacity 0.3s ease;
}
.share-status.show{opacity:1}
.dark-mode .share-actions button{
  background:var(--bg-card);
  border-color:var(--border-color);
  color:var(--text-muted);
}
.dark-mode .share-actions button:hover{
  border-color:var(--color-primary);
  color:var(--color-primary);
  background:rgba(249,115,22,0.1);
}
.nav-section.nav-section-toggle{
    display:flex;
    align-items:center;
    justify-content:space-between;
    width:100%;
    background:transparent;
    border:none;
    cursor:pointer;
    font-family:var(--font-family);
    text-align:right;
    color:var(--text-muted);
    padding:12px 0;
    transition:color var(--transition-fast);
    font-size:9px;
    text-transform:uppercase;
    letter-spacing:0.5px;
    font-weight:var(--weight-bold);
    opacity:0.5;
}
.nav-section.nav-section-toggle:hover{
    color:var(--text-body);
    opacity:0.85;
}
.nav-section.nav-section-toggle .nav-section-chevron{
    font-size:0.7rem;
    transition:transform 0.25s ease;
    opacity:0.8;
    margin-right:auto;
    margin-left:6px;
    transform:rotate(180deg);
}
.nav-group.collapsed .nav-section-toggle .nav-section-chevron{
    transform:rotate(0deg);
}
.nav-group-body{
    max-height:2000px;
    overflow:hidden;
    transition:max-height 0.35s ease,opacity 0.25s ease;
    opacity:1;
}
.nav-group.collapsed .nav-group-body{
    max-height:0;
    opacity:0;
    pointer-events:none;
}
.dark-mode .nav-section.nav-section-toggle{
    color:var(--text-muted);
}
.dark-mode .nav-section.nav-section-toggle:hover{
    color:var(--text-body);
}
.login-page .login-card .input,
.login-page .login-card .otp-input{
  font-family:var(--font-family);
  border:1.5px solid var(--color-gray-200);
  background:var(--bg-input);
  color:var(--text-body);
  transition:border-color var(--transition-fast),box-shadow var(--transition-fast),background var(--transition-fast);
}
.login-page .login-card .input{
  padding:16px 18px;
  border-radius:var(--radius-md);
  font-size:var(--text-base);
  font-weight:var(--weight-semibold);
  text-align:center;
  direction:ltr;
  letter-spacing:1px;
  box-shadow:inset 0 1px 3px rgba(0,0,0,0.03);
}
.login-page .login-card .input:focus{
  border-color:var(--color-primary);
  box-shadow:0 0 0 4px rgba(249,115,22,0.12);
  outline:none;
}
.login-page .login-card .input.input-error{
  border-color:var(--color-danger);
  box-shadow:0 0 0 4px rgba(220,38,38,0.12);
}
.login-page .login-card .input::placeholder{
  color:var(--color-gray-400);
  font-weight:var(--weight-normal);
  letter-spacing:0;
}
.login-page .login-card .otp-group{
  display:flex;
  gap:10px;
  justify-content:center;
  margin:var(--space-6) 0;
  direction:ltr;
}
.login-page .login-card .otp-input{
  width:52px;
  height:60px;
  padding:0;
  border-radius:var(--radius-md);
  font-size:22px;
  font-weight:var(--weight-bold);
  text-align:center;
  direction:ltr;
  caret-color:var(--color-primary);
  box-shadow:inset 0 1px 3px rgba(0,0,0,0.03);
}
.login-page .login-card .otp-input:focus{
  border-color:var(--color-primary);
  background:var(--bg-input);
  box-shadow:0 0 0 4px rgba(249,115,22,0.12);
  outline:none;
}
.login-page .login-card .otp-input.filled{
  border-color:var(--color-primary);
  background:var(--color-primary-light);
  color:var(--color-primary);
}
.login-page .login-card .otp-input.input-error{
  border-color:var(--color-danger);
  background:var(--color-danger-light);
  box-shadow:0 0 0 4px rgba(220,38,38,0.12);
}
.login-page .login-card .form-error{
  min-height:20px;
  font-size:var(--text-sm);
  color:var(--color-danger);
  text-align:center;
  margin-bottom:var(--space-3);
}
.login-page .login-card .btn-block{
  padding:16px 24px;
  border-radius:var(--radius-md);
  font-size:var(--text-base);
  font-weight:var(--weight-bold);
  background:var(--color-primary);
  color:#fff;
  box-shadow:0 6px 18px rgba(249,115,22,0.28);
  transition:background var(--transition-fast),box-shadow var(--transition-fast),transform var(--transition-fast);
}
.login-page .login-card .btn-block:hover:not(:disabled){
  background:var(--color-primary-dark);
  box-shadow:0 8px 22px rgba(249,115,22,0.35);
}
.login-page .login-card .btn-block:disabled{
  opacity:0.7;
  pointer-events:none;
}
.login-page .login-card .login-footer{
  margin-top:var(--space-5);
  padding-top:var(--space-4);
  border-top:1px solid var(--border-color);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:6px;
}
.login-page .login-card .login-footer-link,
.login-page .login-card .login-footer-link--btn{
  color:var(--color-primary);
  font-size:var(--text-sm);
  font-weight:var(--weight-semibold);
  transition:color var(--transition-fast);
}
.login-page .login-card .login-footer-link:hover,
.login-page .login-card .login-footer-link--btn:hover{
  color:var(--color-primary-dark);
}
.dark-mode .login-page .login-card .input,
.dark-mode .login-page .login-card .otp-input{
  background:var(--bg-input);
  border-color:var(--border-color);
  color:var(--text-body);
}
.dark-mode .login-page .login-card .otp-input.filled{
  background:rgba(249,115,22,0.12);
  border-color:var(--color-primary);
  color:#fcd34d;
}
.dark-mode .login-page .login-card .otp-input.input-error{
  background:rgba(220,38,38,0.12);
}
.profile-card{
  background:var(--bg-card);
  border:1px solid var(--border-color);
  border-radius:var(--radius-lg);
  padding:var(--space-5);
  margin-bottom:var(--space-4);
  box-shadow:var(--shadow-sm);
}
.profile-card .card-title{
  font-size:var(--text-base);
  font-weight:var(--weight-bold);
  color:var(--text-body);
  margin:0 0 var(--space-4);
  padding-bottom:var(--space-3);
  border-bottom:1px solid var(--border-color);
  display:flex;
  align-items:center;
  gap:var(--space-2);
}
.profile-card .card-title i{
  color:var(--color-primary);
  width:32px;
  height:32px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--color-primary-light);
  border-radius:var(--radius-md);
  font-size:0.85rem;
}
.profile-card .info-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:var(--space-3);
}
.profile-card .info-item{
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:var(--space-3);
  background:var(--color-gray-50);
  border-radius:var(--radius-md);
  border:1px solid var(--border-color);
}
.profile-card .info-item .label{
  font-size:var(--text-xs);
  color:var(--text-muted);
  font-weight:var(--weight-medium);
}
.profile-card .info-item .value{
  font-size:var(--text-sm);
  color:var(--text-body);
  font-weight:var(--weight-semibold);
  display:flex;
  align-items:center;
  gap:var(--space-2);
  flex-wrap:wrap;
}
.profile-card .profile-actions{
  margin-top:var(--space-4);
  padding-top:var(--space-4);
  border-top:1px solid var(--border-color);
  display:flex;
  gap:var(--space-2);
  flex-wrap:wrap;
}
.tag-success{background:var(--color-success-light);color:var(--color-success)}
.tag-danger{background:var(--color-danger-light);color:var(--color-danger)}
.tag-warning{background:var(--color-warning-light);color:var(--color-warning)}
.tag-info{background:var(--color-info-light);color:var(--color-info)}
.shop-card{
  background:var(--bg-card);
  border:1px solid var(--border-color);
  border-radius:var(--radius-lg);
  padding:var(--space-5);
  margin-bottom:var(--space-4);
  box-shadow:var(--shadow-sm);
  display:flex;
  align-items:center;
  gap:var(--space-4);
  flex-wrap:wrap;
}
.shop-card .shop-logo{
  width:72px;
  height:72px;
  border-radius:var(--radius-md);
  background:var(--color-primary-light);
  color:var(--color-primary);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:2rem;
  overflow:hidden;
  flex-shrink:0;
  border:2px solid var(--color-primary);
}
.shop-card .shop-logo img{width:100%;height:100%;object-fit:cover}
.shop-card .shop-info{flex:1;min-width:0}
.shop-card .shop-name{
  font-size:var(--text-lg);
  font-weight:var(--weight-bold);
  color:var(--text-body);
  margin-bottom:var(--space-1);
}
.shop-card .shop-meta{
  display:flex;
  align-items:center;
  gap:var(--space-2);
  font-size:var(--text-xs);
  color:var(--text-muted);
  flex-wrap:wrap;
}
.shop-status{
  padding:2px 10px;
  border-radius:var(--radius-full);
  font-size:var(--text-xs);
  font-weight:var(--weight-bold);
}
.shop-status.accepted{background:var(--color-success-light);color:var(--color-success)}
.shop-status.pending{background:var(--color-warning-light);color:var(--color-warning)}
.shop-status.rejected{background:var(--color-danger-light);color:var(--color-danger)}
.shop-status.need_verify{background:var(--color-gray-100);color:var(--text-muted)}
.docs-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  gap:var(--space-3);
}
.doc-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--space-2);
  padding:var(--space-4);
  background:var(--color-gray-50);
  border-radius:var(--radius-md);
  border:1px solid var(--border-color);
  text-align:center;
}
.doc-item .doc-icon{
  width:52px;
  height:52px;
  border-radius:50%;
  background:var(--color-primary-light);
  color:var(--color-primary);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.4rem;
}
.doc-item .doc-name{
  font-size:var(--text-sm);
  font-weight:var(--weight-bold);
  color:var(--text-body);
}
.doc-item .doc-status{
  font-size:var(--text-xs);
  font-weight:var(--weight-semibold);
  padding:2px 12px;
  border-radius:var(--radius-full);
  display:inline-flex;
  align-items:center;
  gap:4px;
}
.doc-item .doc-status.verified{background:var(--color-success-light);color:var(--color-success)}
.doc-item .doc-status.pending{background:var(--color-warning-light);color:var(--color-warning)}
.dark-mode .profile-card,
.dark-mode .shop-card{background:var(--bg-card);border-color:var(--border-color)}
.dark-mode .profile-card .card-title{color:var(--text-body);border-color:var(--border-color)}
.dark-mode .profile-card .info-item{background:var(--color-gray-100);border-color:var(--border-color)}
.dark-mode .profile-card .info-item .value{color:var(--text-body)}
.dark-mode .shop-card .shop-logo{background:rgba(249,115,22,0.12)}
.dark-mode .shop-card .shop-name{color:var(--text-body)}
.dark-mode .doc-item{background:var(--color-gray-100);border-color:var(--border-color)}
.dark-mode .doc-item .doc-name{color:var(--text-body)}
@media(max-width:1400px){
  .main-container{padding:0 var(--space-2)}
}
@media(max-width:1200px){
  .sticky-cta{max-width:100%;border-radius:0}
  .stats-grid-5{grid-template-columns:repeat(3,1fr)}
  .shop-stats-grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:1024px){
  .hero{padding-top:20px}
  .hero h1{font-size:2.25rem}
  .hero-subtitle{max-width:600px}
  .search-row,
  .search-actions{max-width:700px}
  .search-box{min-height:64px}
  .prefix-fixed{font-size:2rem}
  .digit-input{min-width:44px;height:54px;font-size:2rem;width:44px}
  .btn-phonetic-inline{height:54px}
  .hero-listing-wrapper{flex:0 0 200px;width:200px;height:240px;min-width:180px}
  .suggested-numbers-scroll{min-height:200px}
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .grid-4{grid-template-columns:repeat(3,1fr)}
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .quick-actions-grid{grid-template-columns:repeat(2,1fr)}
  .shop-stats-grid{grid-template-columns:repeat(2,1fr)}
  .dashboard-body{flex-direction:column}
  .dashboard-sidebar-wrapper{width:100%}
  .dashboard-main{padding:var(--space-2)}
  .dashboard-content{padding:0 var(--space-2)}
  .dashboard-greeting{flex-direction:column;align-items:flex-start;padding:var(--space-3)}
  .dashboard-greeting .greeting-text h1{font-size:var(--text-lg)}
  .stats-grid{grid-template-columns:1fr}
  .table-actions{flex-direction:column;align-items:stretch}
  .table-actions .search-box{min-width:auto}
  .table-wrapper{overflow-x:auto}
  .table th,
  .table td{padding:var(--space-2) var(--space-2);font-size:var(--text-xs)}
  .filter-bar{flex-direction:column;align-items:stretch}
  .filter-bar .filter-input,
  .filter-bar .filter-select,
  .filter-input,
  .filter-select{width:100%;min-width:auto}
  .sidebar-toggle{display:flex;align-items:center;justify-content:center}
  .sidebar-overlay.active{display:block}
  .grid-view{grid-template-columns:1fr}
  .products-filters{flex:0 0 240px}
  .categories-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
  .sim-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
  .features{grid-template-columns:repeat(2,1fr);gap:14px}
  .feature-item{padding:16px 12px 14px}
  .feature-item i{width:46px;height:46px;font-size:1.5rem}
  .feature-item h4{font-size:0.85rem}
  .feature-item p{font-size:0.75rem}
}
@media(max-width:992px){
  .dashboard-sidebar-wrapper{
    position:fixed;
    top:0;
    right:0;
    bottom:0;
    transform:translateX(100%);
    box-shadow:var(--shadow-xl);
    z-index:100;
  }
  .dashboard-sidebar-wrapper.active{transform:translateX(0)}
  .sidebar-overlay.active{display:block}
  .sidebar-toggle{display:flex}
  .dashboard-content{padding:var(--space-4)}
  .side-ads{display:none !important}
  .page-layout{padding:0}
  .sidebar-nav a{cursor:pointer}
  .mobile-menu-toggle,
  .store-menu-toggle{display:flex;align-items:center;justify-content:center}
  .admin-stats-grid{grid-template-columns:repeat(2,1fr)}
  .quick-actions-grid{grid-template-columns:repeat(2,1fr)}
  .shop-stats-grid{grid-template-columns:repeat(2,1fr)}
  .dashboard-main{padding:var(--space-4)}
  .edit-listing-layout{grid-template-columns:1fr}
  .edit-listing-sidebar{position:relative;top:0;order:2}
  .edit-listing-main-column{order:1}
  .sp-layout{grid-template-columns:1fr}
  .sp-side{position:relative;top:0}
  .sp-header-logo{width:56px;height:56px;font-size:1.5rem}
  .sp-header-name{font-size:var(--text-base)}
  .sidebar,
  .dashboard-sidebar,
  .store-sidebar,
  .profile-sidebar,
  .admin-sidebar,
  .business-sidebar,
  .customer-sidebar{
    position:fixed;
    top:0;
    right:-280px;
    width:280px;
    height:100vh;
    padding-top:var(--space-8);
    border-radius:0;
    margin-top:0;
    border:none;
    z-index:9999;
    background:var(--bg-card);
    box-shadow:-4px 0 30px rgba(0,0,0,0.15);
    transition:right 0.3s ease;
    display:block;
  }
  .sidebar.open,
  .dashboard-sidebar.open,
  .store-sidebar.open,
  .profile-sidebar.open,
  .admin-sidebar.open,
  .business-sidebar.open,
  .customer-sidebar.open{right:0}
  .sidebar{
    position:fixed;
    top:0;
    right:0;
    bottom:0;
    width:280px;
    height:100vh;
    max-height:none;
    padding-top:var(--space-8);
    border-radius:0;
    border:none;
    transform:translateX(100%);
    box-shadow:var(--shadow-xl);
    z-index:9999;
    display:block;
    transition:transform 0.3s ease;
  }
  .sidebar.open{transform:translateX(0)}
  .shop-reviews-layout{grid-template-columns:300px 1fr}
}
@media(max-width:900px){
  :root{--text-4xl:2rem;--text-3xl:1.75rem}
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .why-grid{grid-template-columns:1fr}
}
@media(max-width:768px){
  .hero h1{font-size:2.2rem}
  .hero-subtitle{font-size:1.1rem;margin-bottom:var(--space-4)}
  .hero-badge{font-size:var(--text-xs);padding:var(--space-1) var(--space-4);margin-bottom:var(--space-4)}
  .search-box-wrapper{padding:4px 12px}
  .search-box{min-height:58px;flex-wrap:nowrap;justify-content:center}
  .prefix-fixed{font-size:1.6rem;margin-left:6px;flex-shrink:0}
  .digit-input{min-width:38px;height:48px;font-size:1.8rem;width:38px;margin:0 3px;flex-shrink:0}
  .btn-phonetic-inline{height:48px;font-size:12px;min-width:70px}
  .btn-phonetic-inline .phonetic-label{display:none}
  .btn-phonetic-inline .phonetic-label-mobile{display:inline;font-size:11px}
  .btn-phonetic-inline i{font-size:14px}
  .suggested-header{max-width:90%;padding:0 4px}
  .suggested-title{font-size:1rem}
  .suggested-badge{font-size:0.7rem;padding:5px 10px}
  .suggested-numbers{max-width:90%}
  .hero-listing-wrapper{flex:0 0 200px;width:200px;height:240px;min-width:180px}
  .suggested-numbers-scroll{min-height:190px}
  .hero-listing-card{padding:14px 12px 12px}
  .hero-listing-card .hero-card-number{font-size:1.1rem}
  .hero-listing-card .hero-card-price .hero-new-price{font-size:1rem}
  .hero-listing-card .hero-card-back .hero-btn-back{font-size:0.7rem;padding:6px 10px}
  .hero-listing-card .hero-card-back .hero-card-back-number{font-size:1rem}
  .learn-more-btn{font-size:var(--text-xs);padding:4px 12px;min-width:80px}
  .learn-more-content{padding:16px}
  .learn-more-content .info-section h4{font-size:13px}
  .learn-more-content .info-section ul li{font-size:12px}
  .search-hint .hint-text{font-size:0.65rem}
  .stats-grid-5{grid-template-columns:repeat(2,1fr)}
  .shop-stats-grid{grid-template-columns:repeat(2,1fr)}
  .banner-row{grid-template-columns:1fr}
  .view-toggle{border-radius:50px;height:40px}
  .view-toggle button{width:36px;height:40px;min-width:36px;border-radius:8px}
  .view-toggle button i{font-size:0.95rem}
  .sp-tabs{padding:var(--space-1);gap:2px}
  .sp-tab{padding:8px 12px;font-size:var(--text-xs)}
  .sp-tab i{font-size:0.75rem}
  .sp-page{padding:0 var(--space-2)}
  .sp-section{padding:var(--space-4)}
  .sp-header{flex-direction:column;align-items:flex-start}
  .sp-grid-2,.sp-grid-3{grid-template-columns:1fr}
  .sp-image-grid{grid-template-columns:repeat(2,1fr)}
  .sp-link-row{grid-template-columns:1fr auto}
  .sp-link-row .sp-input:nth-child(1){grid-column:1/-1}
  .sp-service-row{grid-template-columns:1fr auto}
  .sp-service-row .sp-input{grid-column:1/-1}
  .sp-badges{grid-template-columns:repeat(3,1fr)}
  .sp-days-grid{grid-template-columns:repeat(2,1fr)}
  .sp-map-wrap{height:240px}
  .input,.textarea,.select{
    font-size:var(--text-sm);
    padding:var(--space-2) var(--space-3);
    border-radius:var(--radius-sm);
  }
  .textarea{min-height:80px}
  .select{background-position:left 12px center;padding-right:var(--space-3);padding-left:var(--space-8);background-size:10px}
  .prefix-input{font-size:16px;min-width:80px;padding:var(--space-1) var(--space-3);margin-right:6px;border-radius:var(--radius-md)}
  .digits-wrapper{gap:4px;justify-content:center}
  .digit-cell{width:40px !important;height:40px !important;font-size:20px;border-width:1.5px;border-radius:var(--radius-xs)}
  .checkbox,.radio{width:20px;height:20px}
  .checkbox-label,.radio-label{font-size:var(--text-xs);gap:var(--space-1)}
  .form-group{gap:0;margin-bottom:var(--space-3)}
  .form-label{font-size:var(--text-xs)}
  .form-hint,.form-error{font-size:10px}
  .input-group{flex-wrap:wrap;gap:4px}
  .input-group .input{border-radius:var(--radius-sm) !important;flex:1 1 100%}
  .input-group-addon{font-size:var(--text-xs);padding:var(--space-2) var(--space-3);border-radius:var(--radius-sm) !important;border:1.5px solid var(--color-gray-200);flex:1 1 auto}
  .input-group-addon:first-child{border-radius:var(--radius-sm) !important;border-left:1.5px solid var(--color-gray-200)}
  .input-group-addon:last-child{border-radius:var(--radius-sm) !important;border-right:1.5px solid var(--color-gray-200)}
  .toggle{width:40px;height:24px}
  .toggle-slider::before{height:18px;width:18px;left:3px;bottom:3px}
  .toggle input:checked+.toggle-slider::before{transform:translateX(16px)}
  .wallet-box .amounts{grid-template-columns:repeat(3,1fr)}
  .shop-reviews-stats{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:700px){
  :root{--text-3xl:1.5rem}
  .sim-grid{grid-template-columns:1fr}
  .digit-cell{width:40px;height:40px;font-size:20px}
  .sticky-cta{flex-direction:column;gap:var(--space-3);text-align:center;padding:var(--space-3) var(--space-4)}
  .btn{padding:var(--space-4);font-size:var(--text-xs)}
  .btn-glow{font-size:var(--text-sm);padding:var(--space-3) var(--space-5)}
  .modal{padding:var(--space-4)}
  .table th,
  .table td{padding:var(--space-2) var(--space-3);font-size:var(--text-xs)}
  .blog-grid{grid-template-columns:1fr;gap:var(--space-3)}
  .blog-image{height:200px}
  .blog-content{padding:var(--space-3) var(--space-4)}
  .blog-title{font-size:var(--text-sm)}
  .search-row{flex-direction:column;width:100%}
  .search-row .prefix-input{width:100%}
  .search-row .input{width:100%}
  .search-row .btn{width:100%}
  .login-card{padding:var(--space-6) var(--space-4)}
  .login-icon{font-size:40px}
  .login-title{font-size:var(--text-xl)}
  .about-stats{grid-template-columns:repeat(2,1fr)}
  .about-values{grid-template-columns:1fr 1fr}
  .about-team{grid-template-columns:1fr 1fr}
  .ads-grid{grid-template-columns:1fr}
  .ad-card{flex-direction:column;text-align:center;padding:var(--space-3)}
  .ad-card .ad-icon{width:40px;height:40px;font-size:1rem}
  .blog-card .blog-image{height:180px}
  .blog-page-header h1{font-size:var(--text-xl)}
  .blog-page-header p{font-size:var(--text-base)}
  .blog-categories .cat-btn{font-size:var(--text-xs);padding:var(--space-1) var(--space-3)}
  .why-grid{grid-template-columns:1fr}
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .contact-grid{grid-template-columns:1fr}
  .contact-info{order:2}
  .contact-form{order:1}
  .dashboard-main{padding:var(--space-3)}
  .admin-stats-grid{grid-template-columns:1fr}
  .quick-actions-grid{grid-template-columns:1fr}
  .shop-stats-grid{grid-template-columns:1fr}
  .dashboard-greeting{padding:var(--space-4)}
  .dashboard-greeting h1{font-size:var(--text-xl)}
  .message-item{flex-wrap:wrap;gap:var(--space-2)}
  .message-date{width:100%;text-align:left;padding-right:48px}
  .faq-page-header h1{font-size:var(--text-2xl)}
  .faq-page-header p{font-size:var(--text-base)}
  .faq-item{padding:var(--space-3)}
  .faq-item .faq-question{font-size:var(--text-sm)}
  .faq-categories .cat-btn{font-size:var(--text-xs);padding:var(--space-1) var(--space-3)}
  .faq-item .faq-question .icon{width:28px;height:28px;font-size:1rem}
  .faq-grid{grid-template-columns:1fr}
  .theme-toggle{bottom:var(--space-3);left:var(--space-3);padding:var(--space-1) var(--space-3);font-size:var(--text-xs);gap:var(--space-1)}
  .theme-toggle i{font-size:12px}
  .theme-toggle span{font-size:10px}
  .kit-section{padding:var(--space-4) var(--space-2)}
  .kit-form-grid{grid-template-columns:1fr}
  .kit-check-group{flex-direction:column;gap:var(--space-2)}
  .shop-header{flex-direction:column;text-align:center}
  .shop-header .shop-actions{width:100%;justify-content:center}
  .banner-grid-2,
  .banner-grid-3{grid-template-columns:1fr;gap:var(--space-3)}
  .banner-grid-3,
  .banner-grid-2 {
    display: flex !important;
    grid-template-columns: none !important;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    gap: var(--space-3);
    padding-bottom: var(--space-2);
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .banner-grid-3::-webkit-scrollbar,
  .banner-grid-2::-webkit-scrollbar {
    display: none;
  }
  .banner-grid-3 .banner-item,
  .banner-grid-2 .banner-item {
    flex: 0 0 85%;
    max-width: 85%;
    scroll-snap-align: start;
    border-radius: var(--radius-lg);
  }
  .banner-grid-3 .banner-img,
  .banner-grid-2 .banner-img {
    width: 100%;
    height: auto;
    aspect-ratio: 2000 / 1000;
    object-fit: cover;
  }
}
@media(max-width:576px){
  :root{
    --container-padding:var(--space-3);
    --text-base:1rem;
    --text-lg:1rem;
    --text-xl:1.25rem;
    --text-2xl:1.4rem;
    --text-3xl:1.6rem;
    --space-4:12px;
    --space-6:16px;
    --space-8:20px;
    --space-10:28px;
  }
  .main-container{margin:10px 2%}
  .page-layout{padding:0 var(--container-padding);gap:var(--space-3)}
  .main-content{padding:var(--space-4) var(--container-padding) 100px}
  .grid-2{grid-template-columns:1fr}
  .grid-3{grid-template-columns:1fr}
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .about-header h1{font-size:var(--text-2xl)}
  .about-header p{font-size:var(--text-base)}
  .about-stats{grid-template-columns:repeat(2,1fr)}
  .about-values{grid-template-columns:1fr 1fr}
  .about-team{grid-template-columns:1fr 1fr}
  .blog-grid{grid-template-columns:1fr;gap:var(--space-3)}
  .blog-card .blog-image{height:180px}
  .blog-page-header h1{font-size:var(--text-xl)}
  .blog-page-header p{font-size:var(--text-base)}
  .blog-categories .cat-btn{font-size:var(--text-xs);padding:var(--space-1) var(--space-3)}
  .blog-card{flex:0 0 260px;min-width:180px}
  .blog-scroll-container{gap:var(--space-3);padding:var(--space-2) var(--space-1) var(--space-3)}
  .blog-card .blog-image{height:160px}
  .blog-card .blog-content{padding:var(--space-3) var(--space-4)}
  .blog-card .blog-content .blog-title{font-size:var(--text-sm);-webkit-line-clamp:2;margin-bottom:var(--space-1)}
  .blog-card .blog-content .blog-excerpt{display:-webkit-box;-webkit-line-clamp:2;font-size:var(--text-xs);margin-bottom:var(--space-2);color:var(--text-muted);line-height:var(--leading-relaxed)}
  .blog-card .blog-content .blog-meta{flex-direction:row;align-items:center;justify-content:space-between;gap:var(--space-2);padding-top:var(--space-2)}
  .blog-card .blog-content .blog-meta .blog-date{font-size:9px}
  .blog-card .blog-content .blog-meta .blog-read-more{font-size:10px}
  .blog-badge{font-size:8px;padding:1px 8px;top:var(--space-1);left:var(--space-1)}
  .blog-card .blog-image .blog-category{font-size:8px;padding:2px var(--space-2);bottom:var(--space-2);right:var(--space-2)}
  .scroll-buttons{display:none}
  .contact-header h1{font-size:var(--text-2xl)}
  .contact-header p{font-size:var(--text-base)}
  .contact-form{padding:var(--space-4)}
  .contact-info .info-card{padding:var(--space-3)}
  .admin-stats-grid{grid-template-columns:1fr}
  .quick-actions-grid{grid-template-columns:1fr}
  .shop-stats-grid{grid-template-columns:1fr}
  .message-item{flex-wrap:wrap;gap:var(--space-2)}
  .message-date{width:100%;text-align:left;padding-right:48px}
  .faq-page-header h1{font-size:var(--text-2xl)}
  .faq-page-header p{font-size:var(--text-base)}
  .faq-item{padding:var(--space-3)}
  .faq-item .faq-question{font-size:var(--text-sm)}
  .faq-categories .cat-btn{font-size:var(--text-xs);padding:var(--space-1) var(--space-3)}
  .faq-item .faq-question .icon{width:28px;height:28px;font-size:1rem}
  .faq-grid{grid-template-columns:1fr}
  .login-card{padding:var(--space-6) var(--space-4)}
  .login-icon{font-size:40px}
  .login-title{font-size:var(--text-xl)}
  .pagination{gap:var(--space-1)}
  .pagination-item{min-width:30px;height:30px;font-size:10px;padding:0 6px}
  .pagination-item i{font-size:10px}
  .products-page{padding:12px}
  .products-header{flex-direction:column;align-items:flex-start;gap:8px}
  .products-header h1{font-size:1.2rem}
  .products-layout{flex-direction:column}
  .products-filters{flex:0 0 auto;position:relative;top:0;width:100%;padding:16px}
  .products-grid .grid{grid-template-columns:1fr 1fr;gap:10px}
  .product-card{padding:12px}
  .product-card .card-icon{width:36px;height:36px;font-size:1rem}
  .product-card .card-number{font-size:0.7rem}
  .product-card .card-tags .tag{font-size:0.55rem;padding:1px 6px}
  .product-card .card-footer .price{font-size:0.8rem}
  .product-card .card-footer .btn-sm{padding:2px 10px;font-size:0.65rem}
  .reviews-grid{grid-template-columns:1fr}
  .review-card{padding:var(--space-3)}
  .categories-grid{grid-template-columns:repeat(2,1fr)}
  .category-card{padding:var(--space-3)}
  .category-card .category-icon{width:44px;height:44px;font-size:1.2rem}
  .dashboard-sidebar-wrapper.active{transform:translateX(0)}
  .sidebar-toggle{display:flex;top:14px;right:14px;width:40px;height:40px;font-size:1.05rem}
  .dashboard-content{padding:var(--space-3)}
  .dashboard-greeting{padding:var(--space-3) var(--space-4);flex-direction:column;align-items:flex-start}
  .greeting-text h1{font-size:var(--text-xl)}
  .greeting-actions{width:100%}
  .greeting-actions .btn{flex:1;justify-content:center}
  .alert-flex{flex-direction:column;align-items:stretch}
  .alert{flex-direction:column;align-items:stretch}
  .alert .btn{width:100%;justify-content:center}
  .stats-grid-5,.shop-stats-grid{grid-template-columns:1fr}
  .stat-card{min-height:130px;padding:var(--space-3)}
  .stat-card .stat-icon{width:44px;height:44px;font-size:1.15rem}
  .stat-card .stat-number{font-size:var(--text-xl)}
  .table-header{flex-direction:column;align-items:stretch}
  .table-actions,.filter-bar{width:100%}
  .filter-input,.filter-select{width:100%;min-width:0}
  .table-title{font-size:var(--text-sm)}
  .table-title i{font-size:0.85rem}
  .count-badge{font-size:10px;padding:1px 8px}
  .table{min-width:640px;font-size:var(--text-xs)}
  .table th,.table td{padding:var(--space-2)}
  .row-actions{gap:4px}
  .empty-state{padding:var(--space-5) var(--space-3)}
  .empty-state i{font-size:2.2rem}
  .message-item{flex-wrap:wrap;gap:var(--space-2)}
  .message-date{width:100%;text-align:left;padding-right:52px}
  .message-avatar{width:34px;height:34px;font-size:0.85rem}
  .message-sender{font-size:var(--text-xs)}
  .message-preview{font-size:10px}
  .quick-actions-grid,.quick-actions-grid-2{grid-template-columns:1fr}
  .panel-tabs{padding:var(--space-1);gap:2px}
  .panel-tabs a{padding:8px 12px;font-size:var(--text-xs)}
  .panel-tabs a .badge{font-size:9px;padding:1px 6px}
  .panel-form{padding:var(--space-4)}
  .edit-listing-alert .alert-body{flex-direction:column;align-items:stretch;gap:var(--space-3)}
  .edit-listing-alert .alert-body .btn{width:100%;justify-content:center}
  .edit-listing-topbar{flex-direction:column-reverse;align-items:flex-start}
  .edit-listing-page-title h1{font-size:var(--text-xl)}
  .edit-listing-card,.preview-card,.info-card{padding:var(--space-4)}
  .sp-actions{flex-direction:column}
  .sp-actions .sp-btn,.sp-actions .sp-actions-group{width:100%}
  .sp-actions .sp-actions-group{flex-direction:column}
  .sp-actions .sp-btn{width:100%;justify-content:center}
  .exposure-meter .bar{width:44px}
  .sp-progress-wrap{width:100px;height:100px}
  .sp-progress-wrap svg{width:100px;height:100px}
  .sp-progress-percent{font-size:var(--text-xl)}
  .sp-header{padding:var(--space-3) var(--space-4)}
  .sp-image-grid{grid-template-columns:1fr}
  .sp-badges{grid-template-columns:repeat(2,1fr)}
  .wallet-box .amounts{grid-template-columns:repeat(2,1fr)}
  .wallet-box .pay-row{grid-template-columns:1fr}
  .wallet-box .amount-input{font-size:var(--text-lg);padding:var(--space-3)}
  .login-page .login-card .otp-group{gap:6px}
  .login-page .login-card .otp-input{
    width:44px;
    height:52px;
    font-size:18px;
    border-radius:var(--radius-sm);
  }
  .profile-card,
  .shop-card{padding:var(--space-4)}
  .profile-card .info-grid{grid-template-columns:1fr}
  .docs-grid{grid-template-columns:1fr}
  .shop-card{flex-direction:column;text-align:center}
  .shop-card .shop-info{width:100%}
  .shop-card .shop-meta{justify-content:center}
}
@media(max-width:480px){
  .about-values{grid-template-columns:1fr}
  .about-team{grid-template-columns:1fr}
  .about-stats{grid-template-columns:1fr 1fr}
  .operators-grid{grid-template-columns:1fr 1fr}
  .blog-grid{grid-template-columns:1fr}
  .blog-card .blog-image{height:180px}
  .blog-page-header h1{font-size:var(--text-xl)}
  .blog-page-header p{font-size:var(--text-base)}
  .blog-categories .cat-btn{font-size:var(--text-xs);padding:var(--space-1) var(--space-3)}
  .categories-grid{grid-template-columns:repeat(2,1fr)}
  .category-card{padding:var(--space-3)}
  .category-card .category-icon{width:44px;height:44px;font-size:1.2rem}
  .stats-grid-5,.shop-stats-grid{grid-template-columns:1fr}
  .stat-card{min-height:130px;padding:var(--space-3)}
  .stat-card .stat-icon{width:44px;height:44px;font-size:1.15rem}
  .stat-card .stat-number{font-size:var(--text-xl)}
  .otp-input{width:42px;height:52px;font-size:20px}
  .otp-group{gap:var(--space-1)}
  .auth-card{padding:var(--space-6) var(--space-4)}
  .auth-icon{font-size:40px}
  .auth-title{font-size:var(--text-xl)}
  .input,.textarea,.select{font-size:14px;padding:var(--space-2) var(--space-2)}
  .select{background-position:left 8px center;padding-left:var(--space-7);background-size:9px}
  .prefix-input{font-size:14px;min-width:60px;padding:var(--space-1) var(--space-2);margin-right:4px}
  .digit-cell{width:34px !important;height:34px !important;font-size:16px;border-width:1.5px}
  .digits-wrapper{gap:3px}
  .form-group{margin-bottom:var(--space-2)}
  .toggle{width:36px;height:20px}
  .toggle-slider::before{height:14px;width:14px;left:3px;bottom:3px}
  .toggle input:checked+.toggle-slider::before{transform:translateX(16px)}
}
@media(max-width:450px){
  .hero h1{font-size:1.4rem;line-height:1.8}
  .hero-subtitle{font-size:0.7rem}
  .hero-badge{font-size:0.75rem;padding:4px 10px}
  .search-box{min-height:46px;flex-wrap:nowrap}
  .prefix-fixed{font-size:1.2rem;margin-left:2px}
  .digit-input{min-width:26px;height:36px;font-size:1.2rem;width:26px;margin:0 1.5px}
  .hero-listing-wrapper{flex:0 0 160px;width:160px;height:180px;min-width:140px}
  .suggested-numbers-scroll{min-height:160px;gap:4px;padding:4px 0}
  .hero-listing-card{padding:8px 8px 8px;border-radius:12px}
  .hero-listing-card .hero-card-number{font-size:0.85rem}
  .hero-listing-card .hero-card-operator{font-size:0.45rem}
  .hero-listing-card .hero-card-price .hero-new-price{font-size:0.75rem}
  .hero-listing-card .hero-card-arrow{width:24px;height:24px;font-size:0.6rem}
  .hero-listing-card .hero-card-back .hero-card-back-number{font-size:0.75rem;padding:3px 10px}
  .hero-listing-card .hero-card-back .hero-btn-back{font-size:0.55rem;padding:4px 6px}
  .hero-listing-card .hero-card-back .hero-card-back-actions{max-width:100px;gap:4px}
  .btn-phonetic-inline .phonetic-label-mobile{font-size:9px}
  .btn-phonetic-inline{min-width:50px;padding:0 6px;height:36px}
  .btn-phonetic-inline i{font-size:12px}
  .learn-more-btn{font-size:0.75rem;padding:2px 8px;min-width:50px;margin-top:12px;gap:3px}
  .learn-more-content{padding:10px 12px}
  .learn-more-content .info-section h4{font-size:11px}
  .learn-more-content .info-section ul li{font-size:10px;padding:2px 0;padding-right:12px}
  .search-hint .hint-text{font-size:0.5rem}
}
@media(max-width:400px){
  .theme-toggle{bottom:var(--space-2);left:var(--space-2);padding:var(--space-1) var(--space-2);font-size:10px;border-radius:var(--radius-sm)}
  .theme-toggle i{font-size:10px}
  .theme-toggle span{display:none}
}
@media(max-width:360px){
  .search-box{min-height:44px}
  .features{gap:6px}
  .feature-item{padding:8px 6px 6px}
  .feature-item i{width:28px;height:28px;font-size:0.85rem;border-radius:6px}
  .feature-item h4{font-size:0.6rem}
  .feature-item p{font-size:0.55rem}
}
@media(min-width:1400px){
  .hero h1{font-size:2.6rem}
  .hero-subtitle{max-width:760px}
}
@media(hover:none) and(pointer:coarse){
  .input,.textarea,.select,.checkbox,.radio,.toggle-slider,.digit-cell,.prefix-input{cursor:default}
  .digit-cell{min-height:44px;min-width:44px}
  .checkbox,.radio{min-width:22px;min-height:22px}
}
@media(prefers-reduced-motion:reduce){
  .banner-item:hover .banner-img{transform:none}
  .banner-grid-2,
  .banner-grid-3{scroll-behavior:auto}
  .feature-item,
  .feature-item i,
  .feature-item::before{transition:none}
  .feature-item:hover{transform:none}
  .feature-item:hover i{transform:none}
  .wave{animation:none}
  .dashboard-sidebar-wrapper,
  .stat-card,
  .quick-action,
  .banner-card,
  .panel-tabs a,
  .sp-tab,
  .sp-check,
  .sp-btn,
  .alert{transition:none}
  .stat-card:hover,
  .quick-action:hover,
  .banner-card:hover{transform:none}
  .sp-tab .tab-dot{animation:none}
  .sp-panel.active{animation:none}
}
@media print{
  .banner-grid-2,
  .banner-grid-3{display:none !important}
  .features-section{margin:20px 0}
  .feature-item{border:1px solid #ddd;box-shadow:none;page-break-inside:avoid}
  .feature-item:hover{transform:none;box-shadow:none}
}