:root{--base:#f8faf6;--white:#fff;--text:#29483e;--green:#426f60;--green2:#2f584b;--mint:#e8f0e9;--border:#e1e9e0;--muted:#73887a;--sand:#efe4d3;--display:'Outfit','Tajawal',sans-serif;--font:'DM Sans','Tajawal',sans-serif;--shadow:0 20px 55px #3a664516}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--base);font-family:var(--font);color:var(--text);-webkit-font-smoothing:antialiased}button,input,textarea,select{font:inherit}button{cursor:pointer}a{color:inherit;text-decoration:none}img{max-width:100%;display:block}button:focus-visible,input:focus-visible,a:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid #c58b49;outline-offset:3px}[hidden]{display:none!important}.skip:not(:focus){position:absolute;clip:rect(0,0,0,0);height:1px;width:1px;overflow:hidden}.skip:focus{position:fixed;z-index:100;top:8px;left:8px;background:white;padding:12px}.caps{font-size:10px;letter-spacing:.14em;font-weight:800;color:#769486}.muted{color:var(--muted);line-height:1.75}.btn{border:1px solid transparent;padding:12px 18px;border-radius:13px;font-weight:800;font-size:12px;display:inline-flex;align-items:center;justify-content:center;gap:18px;transition:transform .2s,background .2s;min-height:45px}.btn:hover{transform:translateY(-2px)}.btn.primary{background:var(--green);color:white}.btn.primary:hover{background:var(--green2)}.btn.pale{background:#eaf1e9;color:var(--green)}.btn.ghost{background:white;border-color:var(--border);color:var(--green)}.btn.danger{background:#fbeae5;color:#ab4e3c}.btn.small{min-height:35px;padding:9px 12px;font-size:11px;border-radius:10px}.btn.wide{width:100%;justify-content:space-between}.icon-button{width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--border);border-radius:11px;background:white;color:var(--green);font-size:18px}.auth-page{min-height:100vh;display:grid;grid-template-columns:1fr 1fr;background:white}.auth-side{padding:46px clamp(30px,5vw,95px);display:flex;flex-direction:column;justify-content:space-between;background:radial-gradient(circle at 15% 65%,#e9efe8 0,transparent 50%),linear-gradient(140deg,#d5e6d9,#f3ecde);min-height:100vh}.auth-brand{display:flex;align-items:center;gap:16px;font:800 18px var(--display);letter-spacing:.09em}.auth-brand img{width:65px;border-radius:50%}.auth-quote{max-width:560px;padding:40px 0}.auth-quote h1{font:800 clamp(48px,5.2vw,90px)/1.03 var(--display);letter-spacing:-.055em;margin:18px 0 26px}.auth-quote p{line-height:1.85;color:#60766b;max-width:390px}.auth-foot{color:#718b7b;font-size:10px;letter-spacing:.17em;font-weight:800}.auth-form-side{display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;padding:100px 30px}.return-link{position:absolute;top:55px;right:65px;color:var(--green);font-size:12px;font-weight:800}.login-card{width:min(100%,420px)}.sign-in-mark{width:60px;height:60px;background:var(--mint);display:grid;place-items:center;border-radius:17px;color:var(--green);font:800 26px var(--display);margin-bottom:30px}.login-card h2{font:800 48px var(--display);letter-spacing:-.06em;margin:6px 0}.login-card>p.muted{margin-bottom:35px}.login-card label{display:block;font-size:12px;font-weight:800;margin-bottom:20px}.login-card label input{display:block;width:100%;padding:15px;border-radius:12px;border:1px solid var(--border);margin-top:9px;background:#fbfcfa}.form-message{padding:12px 14px;background:#fff0ec;border-radius:10px;color:#a64737;font-size:12px}.security-note{font-size:11px;color:#9cac9d;margin-top:27px!important}.app{display:grid;grid-template-columns:250px minmax(0,1fr);min-height:100vh}.sidebar{position:sticky;top:0;height:100vh;background:#fff;border-right:1px solid var(--border);padding:30px 17px;display:flex;flex-direction:column;z-index:25}.studio-brand{display:flex;align-items:center;gap:12px;padding:0 8px 35px}.studio-brand img{height:51px;width:51px;border-radius:50%;object-fit:cover}.studio-brand strong{display:block;font:800 17px var(--display);letter-spacing:.08em}.studio-brand small{display:block;font-size:9px;letter-spacing:.12em;color:#83a28d;font-weight:800;margin-top:3px}.nav-caption{font-size:9px;letter-spacing:.16em;font-weight:800;color:#a0b0a2;margin:3px 16px 12px}.nav-bottom{margin-top:30px}.sidebar nav{display:grid;gap:5px}.sidebar nav button{border:0;background:transparent;color:#667f70;padding:13px 13px;text-align:left;border-radius:11px;display:flex;align-items:center;gap:12px;font-weight:750;font-size:12px}.sidebar nav button.selected,.sidebar nav button:hover{background:#eaf1e9;color:var(--green)}.nav-icon{font-size:20px;width:25px;text-align:center;font-family:Arial,sans-serif}.sidebar-bottom{margin-top:auto;border:1px solid var(--border);padding:14px 10px;border-radius:13px;display:flex;gap:12px;align-items:center;background:#fbfcfa}.online-dot{height:9px;width:9px;background:#62b489;border-radius:50%;box-shadow:0 0 0 5px #ddf1e3}.sidebar-bottom b{display:block;font-size:11px}.sidebar-bottom small{display:block;font-size:9px;color:var(--muted);margin-top:4px}.work-area{min-width:0}.topbar{height:82px;background:#fff;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;padding:0 clamp(20px,4.5vw,66px);gap:15px}.top-left,.top-actions{display:flex;align-items:center;gap:13px}.breadcrumb{font-size:10px;letter-spacing:.05em;font-weight:700;color:#8ba28f}.breadcrumb span{padding:0 13px;color:#b6c4b7}.breadcrumb b{font-size:12px;color:var(--text)}.live-pill{font-size:9px;color:#519572;font-weight:800;letter-spacing:.07em;background:#eff8f0;padding:8px 11px;border-radius:99px}.topbar #sidebarToggle{display:none}main{max-width:1320px;margin:auto;padding:47px clamp(20px,4.5vw,66px) 90px}.view-head{display:flex;justify-content:space-between;align-items:end;gap:18px;margin-bottom:28px}.view-head h1{font:800 clamp(34px,3.8vw,49px)/1.1 var(--display);letter-spacing:-.055em;margin:9px 0}.view-head p{font-size:13px;color:var(--muted);line-height:1.7;margin:8px 0 0}.stats-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px;margin:25px 0}.stat{border:1px solid var(--border);background:#fff;border-radius:20px;padding:25px;position:relative;min-height:142px}.stat i{display:block;font-style:normal;font-size:21px;margin-bottom:13px}.stat b{display:block;font:800 32px var(--display);line-height:1}.stat span{display:block;color:var(--muted);font-size:11px;font-weight:700;margin-top:10px}.welcome{display:grid;grid-template-columns:1.4fr .7fr;gap:22px;margin:24px 0}.welcome-card{background:linear-gradient(120deg,#376758,#648e78);color:#fff;border-radius:24px;padding:36px;overflow:hidden;position:relative}.welcome-card::after{content:'77';position:absolute;right:-9px;bottom:-78px;font:800 240px var(--display);opacity:.08;pointer-events:none}.welcome-card h2{font:800 34px var(--display);letter-spacing:-.04em;max-width:470px;margin:0 0 12px}.welcome-card p{max-width:480px;line-height:1.8;font-size:13px;color:#ebf5ed}.welcome-card .btn{margin-top:12px}.quick-card{background:#f0e8db;padding:27px;border-radius:24px}.quick-card h3{font:800 22px var(--display);margin:0 0 14px}.quick-card p{line-height:1.7;font-size:12px;color:#698074}.quick-card .quick-steps{font-size:12px;line-height:2.3;font-weight:700}.sheet{background:white;border:1px solid var(--border);border-radius:21px;overflow:hidden;box-shadow:0 10px 35px #416c6108}.sheet-head{padding:19px 23px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px;justify-content:space-between}.sheet-head h3{font:800 17px var(--display);margin:0}.search-field{border:1px solid var(--border);background:#fff;border-radius:11px;padding:12px 14px;font-size:12px;min-width:220px}.rows{display:grid}.item-row{padding:13px 22px;border-bottom:1px solid #edf0ea;display:grid;grid-template-columns:minmax(0,1.8fr) minmax(0,1fr) 95px 85px 114px;align-items:center;gap:12px;min-height:86px}.item-row:last-child{border-bottom:0}.item-row.table-head{min-height:45px;background:#fbfcfa;color:#9aa99e;text-transform:uppercase;letter-spacing:.09em;font-size:9px;font-weight:800}.item-ident{display:flex;gap:12px;align-items:center;min-width:0}.item-thumb{width:61px;height:61px;border-radius:11px;object-fit:cover;background:var(--mint);flex-shrink:0}.item-fallback{width:61px;height:61px;border-radius:11px;display:grid;place-items:center;background:var(--mint);font:800 22px var(--display);color:var(--green);flex-shrink:0}.item-name{font-weight:800;font-size:13px;overflow-wrap:anywhere}.item-sub{font-size:11px;color:#95a99a;margin-top:5px;line-height:1.5;overflow-wrap:anywhere}.item-meta{font-size:12px;color:#6d8374;overflow-wrap:anywhere}.item-price{font-weight:800;font-size:12px;white-space:nowrap}.status{display:inline-block;border-radius:99px;background:#e7f4e9;padding:7px 11px;color:#4b8c66;font-size:10px;font-weight:800}.status.off{background:#f2f1eb;color:#999b8c}.row-actions{display:flex;gap:6px;justify-content:flex-end}.row-actions .btn{padding:8px 10px}.empty{padding:70px 28px;text-align:center;color:var(--muted);font-size:13px;line-height:1.9}.empty strong{font:800 23px var(--display);color:var(--text);display:block;margin-bottom:6px}.content-panel{padding:27px}.content-panel h3{font:800 21px var(--display);margin:0 0 8px}.content-panel p{color:var(--muted);font-size:12px;line-height:1.8}.two-cols{display:grid;grid-template-columns:1fr 1fr;gap:28px}.field{display:block;min-width:0}.field>span:first-child{display:block;font-size:11px;font-weight:800;margin-bottom:8px;color:#4e6e5d}.field input:not([type=checkbox]):not([type=file]),.field textarea,.field select{width:100%;border:1px solid #dce5dd;border-radius:12px;padding:13px 14px;background:#fbfcfa;color:var(--text);outline:0;transition:border-color .2s,box-shadow .2s;font-size:13px}.field input:focus,.field textarea:focus,.field select:focus{border-color:#6da384;box-shadow:0 0 0 4px #68a28221}.field textarea{resize:vertical;min-height:105px;line-height:1.7}.field .hint{display:block;font-size:10px;color:#9aada0;margin-top:7px}.field.wide-field{grid-column:1/-1}.toggle{display:flex;align-items:center;gap:11px;padding:12px 13px;background:#f5f8f3;border:1px solid var(--border);border-radius:11px;font-size:12px;font-weight:800}.toggle input{width:18px;height:18px;accent-color:var(--green)}.photo-preview{margin-top:12px;max-height:160px;max-width:240px;object-fit:cover;border-radius:13px}.photo-upload{background:#f7faf6;border:1px dashed #bed2bf;border-radius:14px;padding:14px}.photo-upload input{max-width:100%;font-size:11px}.photo-upload .upload-note{color:var(--muted);font-size:10px;margin-top:7px}.section-line{font-size:11px;letter-spacing:.1em;color:#62816e;font-weight:800;margin:28px 0 16px;padding-bottom:10px;border-bottom:1px solid var(--border)}.site-actions{display:flex;justify-content:flex-end;margin-top:25px}.overlay{position:fixed;inset:0;z-index:90;display:flex;justify-content:flex-end}.editor-shade{position:absolute;inset:0;background:#19382d8a;backdrop-filter:blur(5px)}.editor-panel{position:relative;width:min(100%,640px);height:100vh;background:#fff;box-shadow:-24px 0 65px #26433529;display:flex;flex-direction:column;animation:slideIn .25s ease}@keyframes slideIn{from{transform:translateX(35px);opacity:.5}to{transform:translateX(0);opacity:1}}.editor-head{padding:28px 32px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center}.editor-head h2{font:800 28px var(--display);letter-spacing:-.04em;margin:7px 0 0}.editor-scroll{overflow:auto;padding:25px 32px;flex:1}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:19px}.editor-actions{display:flex;justify-content:flex-end;gap:10px;margin:30px 0}.toast{position:fixed;bottom:22px;right:22px;z-index:110;background:#355d4e;color:#fff;padding:16px 21px;box-shadow:var(--shadow);border-radius:13px;opacity:0;transform:translateY(15px);transition:.25s;pointer-events:none;font-size:13px}.toast.show{opacity:1;transform:none}.toast.error{background:#a64d3d}.gallery-management{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.gallery-card{border:1px solid var(--border);background:white;border-radius:17px;overflow:hidden}.gallery-card img{width:100%;height:205px;object-fit:cover;background:var(--mint)}.gallery-card-info{padding:16px}.gallery-card-info p{color:var(--muted);font-size:12px;margin:0 0 14px}.gallery-actions{display:flex;gap:7px}.security-box{max-width:660px}.description-notice{padding:18px 20px;border-radius:14px;background:#f0f5ed;color:#577862;font-size:12px;line-height:1.8;margin-bottom:20px}
@media(max-width:1200px){.stats-grid{grid-template-columns:repeat(2,1fr)}.welcome{grid-template-columns:1fr}.item-row{grid-template-columns:minmax(0,1.5fr) minmax(0,.9fr) 95px 70px 110px;gap:7px}}
@media(max-width:880px){.app{grid-template-columns:1fr}.sidebar{position:fixed;left:0;top:0;transform:translateX(-102%);transition:transform .25s;box-shadow:var(--shadow);width:250px}.sidebar.open{transform:none}.topbar #sidebarToggle{display:grid}.live-pill{display:none}.auth-page{grid-template-columns:1fr}.auth-side{min-height:auto;padding:22px 25px}.auth-brand img{width:47px}.auth-quote,.auth-foot{display:none}.auth-form-side{min-height:calc(100vh - 90px);padding:90px 25px}.return-link{top:30px;right:28px}.item-row{grid-template-columns:minmax(0,1.3fr) minmax(0,.9fr) 85px 110px}.item-row .status-col{display:none}.item-row.table-head span:nth-child(4){display:none}.topbar{height:72px}}
@media(max-width:620px){main{padding:28px 16px 65px}.view-head{align-items:start;flex-direction:column}.topbar{padding:0 14px}.top-actions .btn{padding:9px;font-size:10px}.breadcrumb{font-size:9px}.breadcrumb span{padding:0 5px}.stats-grid{gap:9px}.stat{padding:16px;min-height:125px}.stat b{font-size:27px}.welcome-card{padding:25px}.welcome-card h2{font-size:28px}.sheet-head{padding:17px;flex-wrap:wrap}.search-field{width:100%}.item-row{grid-template-columns:minmax(0,1fr) 110px;gap:10px;padding:14px}.item-row .category-col,.item-row .price-col{display:none}.item-row.table-head span:nth-child(2),.item-row.table-head span:nth-child(3),.item-row.table-head span:nth-child(4){display:none}.item-thumb,.item-fallback{height:52px;width:52px}.gallery-management{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.gallery-card img{height:145px}.two-cols,.form-grid{grid-template-columns:1fr}.editor-panel{width:100%}.editor-head{padding:18px}.editor-scroll{padding:18px}.content-panel{padding:18px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
/* Order page selection UI */
.order-admin-products{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;max-height:560px;overflow:auto;padding:5px}
.order-admin-item{display:flex;align-items:center;gap:11px;border:1px solid #e2e9e0;border-radius:14px;background:#fafbf8;padding:10px;min-width:0}
.order-admin-item>input{flex:0 0 18px;width:18px;height:18px;accent-color:#356959}
.order-admin-item img{flex:0 0 62px;width:62px;height:62px;border-radius:11px;object-fit:cover}
.order-admin-name{min-width:0;flex:1}.order-admin-name strong{display:block;font-size:12px;line-height:1.4;overflow-wrap:anywhere}.order-admin-name small{display:block;color:#7f9885;font-size:11px;margin-top:4px}.order-admin-move{display:flex;gap:2px}
.order-admin-move .btn{padding:8px 10px;min-width:31px}
@media(max-width:1200px){.order-admin-products{grid-template-columns:1fr}}

/* V4.2: convenient in-place product creation, placement and editing. */
.order-admin-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:18px 0 8px}
.order-admin-toolbar .btn{min-height:40px}
.order-help{padding:14px 16px;background:#eff6ef;border-left:3px solid #6b9b7d;border-radius:9px;color:#557566!important}
.editor-hint{grid-column:1/-1;margin:0;background:#f4f8f3;border-radius:12px;padding:14px 16px;color:#557263;font-size:12px;line-height:1.7}
.price-optional>span:first-child::after{content:' · optional for Order-only';color:#829c88;font-weight:500}
.order-admin-move{align-items:center;flex-shrink:0;flex-wrap:wrap;justify-content:flex-end}
.order-admin-name small{max-width:25ch;overflow-wrap:anywhere}
@media(max-width:660px){.order-admin-products{grid-template-columns:minmax(0,1fr);max-height:none}.order-admin-item{flex-wrap:wrap}.order-admin-move{width:100%;margin-left:28px;justify-content:flex-start}.order-admin-toolbar .btn{flex:1 1 150px}.site-actions{flex-wrap:wrap;gap:10px}.site-actions .btn{flex:1}}

/* V4.4 — tablet/mobile admin ergonomics, landscape, iOS keyboard, safe areas. */
body{overflow-x:clip}
.app,.work-area,main,.view,.sheet,.content-panel,.form-grid{min-width:0}
input,textarea,select{max-width:100%}
.editor-panel{height:100vh;height:100dvh}
.editor-scroll{min-height:0;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.editor-actions{position:sticky;bottom:0;z-index:2;padding:12px 0 max(12px,env(safe-area-inset-bottom));background:linear-gradient(to bottom,rgba(255,255,255,.94),#fff 50%);margin-bottom:0}
.sidebar{max-height:100vh;max-height:100dvh;overflow-y:auto;overscroll-behavior:contain}
.item-ident,.item-name,.item-sub{min-width:0;overflow-wrap:anywhere}
.field :is(input,textarea,select){min-width:0}
@media(max-width:880px){.sidebar{z-index:80}.sidebar.open{visibility:visible}.app{min-width:0}}
@media(max-width:620px){
 .topbar{gap:8px}
 .top-left,.top-actions{min-width:0}
 .topbar .top-actions .btn{min-height:42px}
 .topbar .breadcrumb{white-space:normal;overflow-wrap:anywhere}
 .editor-head{padding:16px}
 .editor-scroll{padding:16px}
 .editor-actions .btn{min-height:44px}
 .gallery-management{grid-template-columns:repeat(2,minmax(0,1fr))}
 .auth-form-side{min-height:calc(100dvh - 90px)}
 .field :is(input,textarea,select){font-size:16px} /* prevents unwanted iOS form zoom */
}
@media(max-width:390px){
 .gallery-management{grid-template-columns:minmax(0,1fr)}
 .stats-grid{grid-template-columns:minmax(0,1fr)}
 .item-row{grid-template-columns:minmax(0,1fr)}
 .item-row .actions{justify-content:flex-start}
 .top-actions .btn{font-size:10px;padding:7px 9px}
 .topbar{height:auto;min-height:68px;padding-block:7px}
 .editor-actions{gap:6px}
 .editor-actions .btn{flex:1}
}
@media(prefers-reduced-motion:reduce){.editor-panel{animation:none!important}}