/* Shared visual system. Existing data, routes and component handlers are unchanged. */
:root {
  --green:#17664f; --deep:#133e32; --mint:#edf4ee; --ink:#20372e;
  --muted:#63736b; --line:#e1e6df; --bg:#f7f7f2; --white:#fff;
  --orange:#986d2a; --red:#ad4343; --blue:#37647f;
  --gold:#b38a46; --cream:#f5f1e7;
  --radius-sm:8px; --radius:14px; --radius-lg:20px;
  --shadow:0 3px 14px #19382c06;
}
body { font-family:'DM Sans','Noto Naskh Arabic','Segoe UI',sans-serif; line-height:1.55; -webkit-font-smoothing:antialiased; }
button,input,select,textarea { font-family:inherit; }
button,a,input,select,textarea { -webkit-tap-highlight-color:transparent; }
button:focus-visible,a:focus-visible { outline:2px solid var(--green); outline-offset:3px; }
button { transition:background-color .16s,border-color .16s,color .16s; }
button:disabled { opacity:.55; cursor:wait; }
.mn-ui-icon { width:20px; height:20px; flex:none; vertical-align:middle; }
.content { padding:30px 32px 80px; }
.heading { gap:16px; margin-bottom:24px; align-items:center; }
.heading h1 { font-family:'DM Sans','Noto Naskh Arabic',sans-serif; font-size:28px; line-height:1.3; font-weight:700; letter-spacing:-.7px; margin:0 0 6px; }
.heading p,.sub { color:var(--muted); font-size:13px; margin:0; }
.eyebrow { font-size:10px; letter-spacing:1.7px; color:var(--green); }
.btn { border-radius:var(--radius-sm); font-size:13px; font-weight:600; min-height:42px; padding:9px 15px; text-decoration:none; }
.btn:hover { background:#f4f7f2; border-color:#acbdb0; }
.btn.primary { background:var(--green); border-color:var(--green); color:white; }
.btn.primary:hover { background:var(--deep); border-color:var(--deep); }
.btn.soft { background:var(--mint); border-color:#dbe8dd; color:var(--deep); }
.btn.danger { background:#fff8f7; border-color:#ecd6d3; }
.btn.small { min-height:36px; padding:6px 11px; font-size:12px; }
.badge { font-size:10px; font-weight:600; line-height:1.5; padding:4px 9px; border:1px solid #dde5df; white-space:normal; }
.badge.green { background:#ecf5ef; color:#276444; border-color:#d9e9dc; }
.badge.orange { background:#fcf5e7; color:#8c651f; border-color:#eddfc0; }
.badge.red { background:#fcf0ee; color:#9a4440; border-color:#efdcd8; }
.badge.blue { background:#eef4f7; color:#345e75; border-color:#dce7ee; }
.panel,.card,.stat { border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); }
.panel { padding:22px; }
.panelhead h2 { font-size:15px; font-weight:700; }
.panelhead { padding-bottom:14px; border-bottom:1px solid var(--line); }
.empty,.no-data { border:1px dashed #d1dbd1; border-radius:var(--radius); background:#fafbf8; padding:32px 20px; font-size:14px; }
.book-title { font-family:'Noto Naskh Arabic','DM Sans','Segoe UI',serif; line-height:1.7; }
.search input,.select,.field input,.field select,.field textarea { border:1px solid #d5ded5; border-radius:var(--radius-sm); background:#fff; color:var(--ink); min-height:44px; font-size:14px; }
.field input:focus,.field select:focus,.field textarea:focus,.select:focus,.search input:focus { outline:none; border-color:var(--green); box-shadow:0 0 0 3px #17664f12; }
.field label { font-size:12px; font-weight:600; color:#344e41; }
.field { gap:7px; min-width:0; }
.field small { font-size:11px; color:var(--muted); line-height:1.5; }
.field input[type=file] { padding:8px; font-size:12px; }
.field input::file-selector-button { border:0; background:var(--mint); color:var(--deep); border-radius:5px; padding:7px 10px; margin-right:10px; }
.field input::placeholder { color:#7c887f; opacity:1; font-size:12px; }
.formgrid { gap:18px 20px; }
.field textarea { min-height:96px; }
.modalback { background:#142d2466; backdrop-filter:blur(3px); padding:20px; }
.modal { width:min(700px,100%); max-height:calc(100dvh - 40px); padding:26px; border:1px solid #e2e9df; border-radius:18px; box-shadow:0 18px 55px #10291d26; }
.modalhead { padding-bottom:17px; border-bottom:1px solid var(--line); gap:12px; }
.modalhead h2 { font:700 21px/1.35 'DM Sans','Noto Naskh Arabic',sans-serif; color:var(--deep); }
.modal .eyebrow { border-bottom:1px solid var(--line); padding-bottom:9px; }
.modalactions { position:sticky; bottom:-26px; background:#fff; border-top:1px solid var(--line); padding:16px 0 2px; margin-top:24px; z-index:3; }
.xbtn { flex:none; width:40px; height:40px; background:#f0f4ee; color:var(--deep); }
.notice { border:1px solid #e7dfc7; background:#fcf9ef; color:#735c2a; }
.toast { font-size:13px; max-width:calc(100vw - 32px); bottom:24px; border:1px solid #ffffff26; }

/* Public shop: a compact bookstore masthead instead of a business sidebar. */
body:not(.owner-entry) .shell { display:block; max-width:none; }
body:not(.owner-entry) .sidebar { display:none; }
body:not(.owner-entry) .topbar { height:86px; padding:0 max(24px,calc((100% - 1200px)/2)); background:#fffffff5; border-bottom:1px solid #e1e5da; backdrop-filter:blur(12px); }
body:not(.owner-entry) .topbar>.crumb,body:not(.owner-entry) .topbar>.topright { display:none; }
.mn-shop-header { display:flex; gap:28px; align-items:center; width:100%; min-width:0; }
.mn-shop-brand { display:flex; align-items:center; gap:11px; border:0; background:none; padding:0; color:var(--deep); text-align:left; flex:none; }
.mn-shop-brand .brandmark { width:42px; height:42px; border:1px solid #c4d0bb; border-radius:10px; background:var(--deep); color:#dec994; font-size:28px; }
.mn-shop-brand strong { display:block; font-size:13px; letter-spacing:1.15px; line-height:1.3; }
.mn-shop-brand small { display:block; margin-top:3px; color:var(--muted); font-size:11px; letter-spacing:.6px; }
.mn-desktop-nav { display:flex; gap:4px; }
.mn-desktop-nav button { min-height:42px; padding:8px 12px; border:0; background:none; color:var(--muted); font-size:13px; font-weight:600; border-radius:8px; }
.mn-desktop-nav button.active { color:var(--deep); background:var(--mint); }
.mn-header-search { display:flex; align-items:center; flex:1; min-width:100px; max-width:350px; margin-left:auto; direction:rtl; border:1px solid var(--line); border-radius:9px; background:#f7f8f3; }
.mn-header-search input { width:100%; min-width:0; height:42px; border:0; outline:none; padding:6px 10px; background:none; font-family:'Noto Naskh Arabic',serif; text-align:right; }
.mn-header-search:focus-within { border-color:var(--green); box-shadow:0 0 0 3px #17664f12; }
.mn-header-search button,.mn-header-cart,.mn-header-search-link { display:grid; place-items:center; flex:none; min-width:44px; height:44px; padding:8px; color:var(--deep); border:0; background:none; border-radius:9px; }
.mn-header-cart { position:relative; background:var(--mint); }
.mn-cart-count { position:absolute; right:-4px; top:-4px; min-width:17px; height:17px; border-radius:50%; background:var(--deep); color:white; font:600 10px/17px 'DM Sans',sans-serif; text-align:center; }
.mn-header-search-link { display:none; }
body:not(.owner-entry) .content { max-width:1200px; padding:30px 24px 90px; }
body:not(.owner-entry) .heading h1 { font-family:'Playfair Display','Noto Naskh Arabic',serif; font-size:34px; letter-spacing:-.4px; }
.secttitle { margin:34px 0 16px; gap:12px; align-items:center; }
.secttitle h2 { font:600 25px/1.3 'Playfair Display','Noto Naskh Arabic',serif; color:var(--deep); letter-spacing:-.3px; }
.secttitle h2::before { content:''; display:inline-block; width:4px; height:19px; margin-right:11px; background:var(--gold); border-radius:2px; vertical-align:-1px; }
.secttitle .btn { border:0; background:transparent; color:var(--green); padding-right:0; white-space:nowrap; }
.category-nav { gap:9px; padding:2px 0 12px; scrollbar-width:thin; }
.category-nav .btn { min-height:44px; flex:none; border-radius:999px; padding:9px 20px; font-size:13px; background:#fff; border-color:#dce3d7; font-weight:500; }
.category-nav .btn.active { background:var(--deep); color:white; border-color:var(--deep); box-shadow:0 3px 8px #143d3210; }
.mn-home-search { background:#fff; border:1px solid #cedacc; border-radius:12px; box-shadow:0 3px 12px #1d483008; }
.mn-home-search input { min-height:54px; font-family:'Noto Naskh Arabic',sans-serif; font-size:17px; padding-inline:6px 18px; }
.mn-home-search button { flex-basis:54px; min-height:54px; }
.bookgrid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:22px; }
.bookcard { border-radius:13px; border-color:#e1e5db; box-shadow:0 2px 8px #173c2605; transition:box-shadow .18s,border-color .18s; }
.bookcard:hover { border-color:#bdcdb9; box-shadow:0 7px 20px #193b2b0b; }
.bookcard .cover { width:100%; height:auto; aspect-ratio:4/5; border:0; border-bottom:1px solid #eceee6; border-radius:0; background:#f0f0e8; }
.bookcard .cover img { padding:18px!important; background:#f2f1e9!important; object-fit:contain!important; }
.bookcard .cover:after { inset:18px 27%; background:var(--deep); transform:none; box-shadow:3px 4px 6px #17392b15; }
.bookcard .covertext { width:60%; font-family:'Noto Naskh Arabic','Playfair Display',serif; line-height:1.8; font-size:14px; }
.bookinfo { padding:17px; gap:4px; }
.bookinfo strong { font-weight:600; font-size:17px; min-height:0; line-height:1.7; }
.bookinfo small { font-size:12px; line-height:1.6; margin:3px 0 8px; }
.bookinfo small:empty { display:none; }
.bookfoot { flex-wrap:wrap; gap:7px; margin-top:auto; padding:8px 0 12px; align-items:center; }
.price { font-size:16px; font-weight:700; font-variant-numeric:tabular-nums; }
.bookcard .btn { min-height:42px; margin-top:0; width:100%; font-size:12px; }
.mn-book-title-button { border:0; padding:0; text-align:start; background:none; color:inherit; cursor:pointer; }
.mn-book-title-button:hover { color:var(--green); }
body:not(.owner-entry) .bookcard .mn-book-title-button { width:100%; direction:rtl; text-align:right; }
body:not(.owner-entry) .bookcard .mn-book-title-button strong { display:block; text-align:right; }
.bookcard .mn-book-price-row { display:flex; flex-direction:row; justify-content:space-between; align-items:center; gap:6px; direction:ltr; width:100%; flex:0 0 100%; }
.bookcard .mn-book-price-row .price { white-space:nowrap; }
.bookcard .mn-book-price-label { font-family:'Noto Naskh Arabic',serif; text-align:right; }

/* Hero treatment keeps the existing geometry, interactions and four CMS themes. */
.mn-hero { border-radius:18px; margin-bottom:20px; }
.mn-hero-track { border:1px solid #ffffff25; box-shadow:0 5px 18px #12352c0a; }
.mn-hero-art { background:#ffffff07; border:1px solid #ffffff20; border-radius:12px; }
.mn-hero-art span { filter:saturate(.65); }
.mn-hero-slide .mn-hero-eyebrow { background:#ffffff08; border-color:#ffffff35; }
.mn-hero-arrow { border-radius:50%; border-color:#cdd8c9; width:38px; height:38px; }
.mn-hero-dot { min-width:38px; }
.mn-hero .mn-hero-cta { border-radius:7px; }

/* Business workspace: quiet, dense and consistent. */
.owner-entry { background:#f4f6f2; }
.owner-entry .shell { max-width:1600px; }
.owner-entry .sidebar { width:238px; position:sticky; top:0; height:100dvh; overflow:auto; border-color:var(--line); padding:24px 15px; }
.owner-entry .brand { padding:0 5px 23px; border-bottom:1px solid var(--line); margin-bottom:15px; }
.owner-entry .brandmark { background:var(--deep); color:#dec994; border-radius:10px; }
.owner-entry .brand strong { font-size:13px; }
.owner-entry .navlabel { font-size:9px; letter-spacing:1.8px; padding:9px 12px; }
.owner-entry .nav button { padding:9px 12px; gap:11px; border-radius:8px; min-height:41px; margin:2px 0; font-size:12px; font-weight:500; }
.owner-entry .nav button.active { background:var(--deep); color:#fff; font-weight:600; }
.owner-entry .nav .ico { display:inline-flex; }
.owner-entry .topbar { height:62px; background:#fff; border-color:var(--line); }
.owner-entry .crumb { color:var(--ink); font-size:12px; font-weight:500; }
.owner-entry .main>.notice { margin:16px 32px 0!important; background:#eef4ed; border:1px solid #dce8d9; border-radius:9px; font-size:11px; padding:9px 12px; color:#426247; gap:8px!important; }
.owner-entry .main>.notice .btn { min-height:32px; font-size:11px; padding:4px 10px; }
.owner-entry .stats { gap:16px; margin-bottom:24px; }
.owner-entry .stat { padding:20px; border-top:2px solid #c3d5bd; }
.owner-entry .stat strong { font-size:27px; line-height:1.25; font-weight:700; margin:15px 0 5px; letter-spacing:-.8px; font-variant-numeric:tabular-nums; }
.owner-entry .stat-top { color:#586c5e; }
.owner-entry .stat-ico { background:#eff4eb; border-radius:8px; }
.owner-entry th { background:#f5f7f2; color:#506750; font-size:10px; font-weight:600; padding:12px 10px; }
.owner-entry td { padding:13px 10px; font-size:12px; line-height:1.6; vertical-align:middle; }
.owner-entry tbody tr:hover { background:#fbfcf9; }
.owner-entry td .btn { padding:5px 9px; min-height:32px; }
.owner-entry td small { display:block; }
.owner-entry .tablewrap { border-radius:9px; }
.owner-entry .panel>.tablewrap { margin-top:4px; }
.owner-entry .listitem { padding:15px 0; }
.owner-entry .searchrow { gap:12px; }
.owner-entry .settingsection { padding:22px 0; }
.owner-entry .settingsection h3 { color:var(--deep); font-size:14px; }
.owner-entry .bookgrid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.owner-entry .bookgrid .panel h3 { margin:0 0 10px; font-size:17px; }
.owner-entry .bookgrid .panel p { color:var(--muted); font-size:13px; }
.picker-search { border-radius:var(--radius-sm); }
.picker-selected { background:var(--mint); border-color:#d3dfcf; color:var(--deep); }
.picker-results button { min-height:44px; font-size:13px; }
.more-menu { gap:9px; }
.more-menu .btn { min-height:46px; font-size:13px; text-align:left; }

@media(min-width:1100px) { .owner-entry .grid2 { grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); } }
@media(max-width:1100px) {
  .mn-shop-header { gap:16px; }
  .mn-desktop-nav button { padding:8px; }
  .bookgrid { gap:18px; }
  .owner-entry .sidebar { width:205px; padding-inline:12px; }
  .owner-entry .bookgrid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:900px) {
  .bookgrid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
  .owner-entry .content { padding-inline:22px; }
  .owner-entry .stats { gap:12px; }
  .owner-entry .stat { padding:16px; }
}
@media(max-width:720px) {
  .mn-desktop-nav { display:none; }
  .owner-entry .sidebar { display:none; }
  .owner-entry .content { padding:20px 14px 94px; }
  .owner-entry .main>.notice { margin:12px 14px 0!important; }
  .owner-entry .main>.notice>span { flex-basis:100%!important; }
  .owner-entry .topbar { height:54px; padding-inline:16px; }
  .owner-entry .heading h1 { font-size:24px; }
  .owner-entry .bookgrid { grid-template-columns:minmax(0,1fr); }
  .owner-entry .tablewrap tr { background:#fff; padding:14px 0; gap:12px; }
  .owner-entry .tablewrap td { padding:0; font-size:12px; }
  .owner-entry .tablewrap td:before { color:#667a68; font-size:9px; }
  .panel { padding:17px; }
  .heading { margin-bottom:20px; }
  .heading h1 { font-size:27px; }
  .modalback { padding:10px; }
  .modal { padding:20px 16px; border-radius:15px; max-height:calc(100dvh - 20px); }
  .modalhead h2 { font-size:19px; }
  .modalactions { bottom:-20px; padding:13px 0 0; }
  .modalactions .btn { flex:1; min-height:44px; }
  .formgrid { gap:15px; }
  .field label { font-size:12px; }
  .field input,.field textarea,.field select { font-size:16px; }
  .mobile-nav { height:calc(64px + env(safe-area-inset-bottom)); background:#fffffffa; box-shadow:0 -3px 18px #183c2307; border-color:#dde5d9; backdrop-filter:blur(10px); }
  .mobile-nav button { min-height:60px; gap:3px; font-size:10px; color:#6a7b6e; font-weight:500; padding:4px 0; }
  .mobile-nav button>span { display:grid; place-items:center; width:43px; height:28px; border-radius:9px; }
  .mobile-nav button.active { color:var(--deep); font-weight:700; }
  .mobile-nav button.active>span { background:#e8f0e4; }
  .mobile-nav .mn-ui-icon { width:20px; height:20px; }
  .toast { bottom:calc(78px + env(safe-area-inset-bottom)); }
}
@media(max-width:600px) {
  body:not(.owner-entry) .topbar { height:68px; padding:0 15px; }
  .mn-shop-header { gap:8px; }
  .mn-shop-brand { gap:8px; margin-right:auto; }
  .mn-shop-brand .brandmark { width:36px; height:36px; font-size:25px; }
  .mn-shop-brand strong { font-size:10px; letter-spacing:.9px; }
  .mn-shop-brand small { font-size:10px; letter-spacing:.3px; }
  .mn-header-search { display:none; }
  .mn-header-search-link { display:grid; min-width:36px; padding:5px; }
  .mn-header-cart { min-width:39px; height:39px; }
  body:not(.owner-entry) .content { padding:16px 14px 90px; }
  body:not(.owner-entry) .heading h1 { font-size:28px; }
  .bookgrid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
  .bookcard { border-radius:11px; }
  .bookcard .cover { aspect-ratio:4/5; }
  .bookcard .cover img { padding:11px!important; }
  .bookinfo { padding:11px; gap:3px; }
  .bookinfo strong { font-size:15px; line-height:1.7; }
  .bookinfo small { font-size:11px; margin:0 0 5px; }
  .bookfoot { padding:5px 0 9px; gap:5px; align-items:flex-start; flex-direction:column; }
  .price { font-size:14px; }
  .bookfoot .badge { font-size:9px; padding:2px 6px; }
  .bookcard .btn { font-size:11px; padding:7px 5px; min-height:40px; }
  .secttitle { margin:26px 0 13px; gap:8px; }
  .secttitle h2 { font-size:22px; }
  .secttitle h2::before { height:16px; width:3px; margin-right:8px; }
  .secttitle .btn { font-size:11px; min-height:40px; }
  .category-nav { gap:7px; }
  .category-nav .btn { padding:8px 16px; font-size:12px; min-height:42px; }
  .mn-home-search { border-radius:10px; }
  .mn-home-search input { min-height:50px; }
  .mn-home-search button { min-height:50px; flex-basis:48px; }
  .mn-hero { margin:0 0 14px; border-radius:14px; }
  .mn-hero-track { aspect-ratio:2.2; border-radius:14px; }
  .mn-hero-art { border-radius:8px; }
  .mn-hero-controls { padding-top:3px; }
  .mn-hero .mn-hero-cta { min-height:32px; }
  .mn-hero .mn-hero-cta.mn-hero-link-only { min-height:0; }
}
@media(prefers-reduced-motion:reduce) { button,.bookcard { transition:none; } }