:root{
            --ink:#14110c; --ink-2:#241f16; --gold-deep:#8a6a28; --gold:#c9a44c; --gold-light:#f2dda0;
            --cream:#fdf9f0; --cream-2:#f6efe0; --text:#2a2318;
        }
        *{ box-sizing:border-box; }
        html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

        @keyframes fadeInUp{ from{opacity:0; transform:translateY(26px);} to{opacity:1; transform:translateY(0);} }
        @keyframes floatLogo{ 0%,100%{transform:translateY(0);} 50%{transform:translateY(-8px);} }
        @keyframes shine{ to{ background-position:-200% center; } }
        @keyframes shake{ 10%,90%{transform:translateX(-1px);} 20%,80%{transform:translateX(2px);} 30%,50%,70%{transform:translateX(-3px);} 40%,60%{transform:translateX(3px);} }
        @keyframes floatParticle{
            0%{ transform:translate3d(0,0,0) scale(.8); opacity:0; }
            8%{ opacity:.7; }
            55%{ opacity:.9; }
            92%{ opacity:0; }
            100%{ transform:translate3d(var(--dx,30px),-115vh,0) scale(1.05); opacity:0; }
        }

        body {
            font-family:'Cairo', sans-serif; margin:0; position:relative; min-height:100vh; overflow-x:hidden;
            color:var(--text);
            background:
                radial-gradient(circle at 18% -8%, rgba(201,164,76,.28), transparent 42%),
                radial-gradient(circle at 105% 12%, rgba(138,106,40,.22), transparent 38%),
                linear-gradient(165deg, #1d170f 0%, #100d09 55%, #0a0806 100%);
            background-attachment:fixed;
            padding: calc(20px + env(safe-area-inset-top)) calc(20px + env(safe-area-inset-right)) calc(32px + env(safe-area-inset-bottom)) calc(20px + env(safe-area-inset-left));
            display:flex; flex-direction:column; align-items:center;
        }

        /* خلفية متحركة — جسيمات ذهبية */
        .bg-decor{ position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden; }
        .bg-decor .particle{
            position:absolute; bottom:-60px; left:var(--l); width:var(--s); height:var(--s); border-radius:50%;
            background:radial-gradient(circle, var(--gold-light) 0%, var(--gold) 55%, transparent 76%);
            filter:blur(0.5px); animation:floatParticle var(--dur) linear infinite; animation-delay:var(--del);
        }

        /* شريط التنقل */
        .top-nav { width: 100%; max-width: 1000px; display: flex; gap: 10px; margin-bottom: 20px; animation:fadeInUp .7s cubic-bezier(.2,.8,.2,1) both; animation-delay:.05s; }
        .nav-btn { position:relative; overflow:hidden; background-color: var(--ink-2); color: white; border: none; padding: 12px 15px; border-radius: 8px; cursor: pointer; font-family: 'Cairo', sans-serif; font-weight: 700; transition: transform .25s ease, background-color .25s ease, box-shadow .25s ease; flex: 1; text-align: center; text-decoration: none; }
        .nav-btn:hover { background-color: #322a1c; transform:translateY(-2px); box-shadow:0 8px 20px rgba(0,0,0,.35); }
        .nav-btn.primary-nav { background:linear-gradient(135deg, var(--gold-deep), var(--gold)); color:var(--ink); }
        .nav-btn.primary-nav:hover { background:linear-gradient(135deg, var(--gold), var(--gold-light)); }

        .main-wrapper { display: flex; gap: 20px; width: 100%; max-width: 1000px; align-items: flex-start; margin-bottom: 40px; }
        .form-section { position:relative; background-color: var(--cream); padding: 40px; border-radius: 14px; box-shadow: 0 16px 40px rgba(0,0,0,.45), 0 0 0 1px rgba(201,164,76,.18); flex: 2; box-sizing: border-box; animation:fadeInUp .7s cubic-bezier(.2,.8,.2,1) both; animation-delay:.15s; overflow:hidden; }
        .summary-section { position:relative; background-color: var(--cream); padding: 30px; border-radius: 14px; box-shadow: 0 16px 40px rgba(0,0,0,.45), 0 0 0 1px rgba(201,164,76,.18); flex: 1; position: sticky; top: 20px; border: 1px solid var(--gold); box-sizing: border-box; animation:fadeInUp .7s cubic-bezier(.2,.8,.2,1) both; animation-delay:.25s; overflow:hidden; }
        .form-section::before, .summary-section::before, .history-section::before{ content:''; position:absolute; top:0; right:0; left:0; height:4px; background:linear-gradient(90deg, var(--gold-deep), var(--gold-light), var(--gold-deep)); }

        .brand-header, .print-brand-header { display: flex; flex-direction: column; align-items: center; justify-content: center; margin-bottom: 30px; padding: 22px 20px 26px; background-color: var(--cream); border: 1px solid var(--gold); border-radius: 14px; text-align: center; font-family: 'Cairo', serif; box-shadow: 0 0 0 1px rgba(201,164,76,.15), 0 10px 30px rgba(201,164,76,.12); }
        .brand-logo{ width:76px; height:auto; margin-bottom:10px; filter:drop-shadow(0 6px 14px rgba(201,164,76,.4)); animation:floatLogo 4.5s ease-in-out infinite; }
        .print-logo{ width:52px; height:auto; margin-bottom:8px; }
        .brand-single-line { display: flex; justify-content: center; align-items: center; gap: 15px; font-size: clamp(1.5rem, 6.5vw, 2.8rem); font-weight: 900; letter-spacing: 0.08em; direction: ltr; flex-wrap: wrap; }
        .perfume-color { background:linear-gradient(90deg, var(--gold-deep), var(--gold-light), var(--gold-deep)); background-size:200% auto; -webkit-background-clip:text; background-clip:text; color:transparent; animation:shine 6s linear infinite; }
        .oclock-color { color: var(--ink); }
        h2.summary-title { color: var(--gold-deep); margin-top: 0; border-bottom: 1px solid #eee; padding-bottom: 10px; font-weight:700; }

        .form-group { margin-bottom: 20px; }
        label { display: block; margin-bottom: 8px; font-weight: 700; color: var(--ink-2); }
        input[type="text"], input[type="tel"], input[type="number"], select { width: 100%; padding: 12px; border: 1px solid #ddd2b8; border-radius: 8px; box-sizing: border-box; font-family: 'Cairo', sans-serif; font-size: 16px; transition: border-color .25s ease, box-shadow .25s ease; background:#fff; }
        input:focus, select:focus { outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(201,164,76,.22); }
        input:disabled, select:disabled { background-color: #f0f0f0; color: #777; cursor: not-allowed; }
        input[type="tel"] { text-align: right; direction: rtl; }

        .perfume-row { display: flex; gap: 15px; margin-bottom: 15px; background-color: var(--cream-2); padding: 15px; border: 1px solid #eee0c0; border-radius: 8px; align-items: flex-end;}
        .perfume-row > div { flex: 1; } .perfume-row-size { flex: 1.2 !important; } .perfume-row-name { flex: 2 !important; }
        .delete-row-btn { background: #d32f2f; color: white; border: none; border-radius: 8px; padding: 0 15px; cursor: pointer; height: 44px; font-size: 1.2em; transition: background .25s ease; flex: 0.2 !important;}
        .delete-row-btn:hover { background: #b71c1c; animation:shake .5s; }

        .btn { position:relative; overflow:hidden; color: white; border: none; padding: 13px 20px; border-radius: 8px; cursor: pointer; font-weight: 700; font-family: 'Cairo', sans-serif; font-size: 1em; margin-top: 10px; width: 100%; transition: transform .25s ease, box-shadow .25s ease; }
        .btn:active{ transform:scale(.97); }
        .btn::after, .nav-btn::after, .card-print-btn::after{ content:''; position:absolute; inset:0; background:linear-gradient(120deg, transparent, rgba(255,255,255,.35), transparent); transform:translateX(-120%); transition:transform .6s ease; }
        .btn:hover::after, .nav-btn:hover::after, .card-print-btn:hover::after{ transform:translateX(120%); }
        .add-btn { background:linear-gradient(135deg, var(--gold-deep), var(--gold)); color:var(--ink); } .add-btn:hover { background:linear-gradient(135deg, var(--gold), var(--gold-light)); box-shadow:0 10px 24px rgba(201,164,76,.35); transform:translateY(-2px); } .add-btn:disabled { background: #ccc; cursor: not-allowed; }
        .close-btn { background-color: var(--ink); margin-top: 20px; } .close-btn:hover { background-color: var(--ink-2); box-shadow:0 10px 24px rgba(0,0,0,.35); transform:translateY(-2px); }
        .print-btn { background-color: #1976d2; margin-top: 10px; display: none; } .print-btn:hover { background-color: #115293; transform:translateY(-2px); }
        .reset-btn { background:linear-gradient(135deg, var(--gold-deep), var(--gold)); color:var(--ink); margin-top: 10px; display: none; } .reset-btn:hover { background:linear-gradient(135deg, var(--gold), var(--gold-light)); transform:translateY(-2px); }

        hr { border: 0; border-top: 2px dashed #eee0c0; margin: 30px 0; }
        .summary-text { font-size: 1.1em; margin-bottom: 10px; color: var(--text); }
        .summary-list { list-style-type: none; padding: 0; }
        .summary-list li { background: var(--cream-2); margin-bottom: 5px; padding: 8px; border-radius: 6px; font-size: 0.9em; display: flex; justify-content: space-between; border: 1px solid #eee0c0; }
        .total-price { font-size: clamp(1.2rem,4vw,1.5rem); font-weight: bold; color: var(--gold-deep); text-align: left; margin-top: 20px; }

        .history-section { position:relative; background-color: var(--cream); padding: 30px; border-radius: 14px; box-shadow: 0 16px 40px rgba(0,0,0,.45), 0 0 0 1px rgba(201,164,76,.18); width: 100%; max-width: 1000px; box-sizing: border-box; animation:fadeInUp .7s cubic-bezier(.2,.8,.2,1) both; animation-delay:.35s; overflow:hidden; }
        .history-card { background-color: var(--cream-2); border-right: 4px solid var(--gold); padding: 15px; margin-bottom: 15px; border-radius: 8px; display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 10px; animation:fadeInUp .5s ease both; transition: transform .25s ease, box-shadow .25s ease; }
        .history-card:hover{ transform:translateY(-3px); box-shadow:0 10px 24px rgba(0,0,0,.15); }
        .history-card:nth-child(1){animation-delay:.04s}.history-card:nth-child(2){animation-delay:.09s}.history-card:nth-child(3){animation-delay:.14s}.history-card:nth-child(4){animation-delay:.19s}.history-card:nth-child(5){animation-delay:.24s}.history-card:nth-child(6){animation-delay:.29s}.history-card:nth-child(7){animation-delay:.34s}.history-card:nth-child(n+8){animation-delay:.38s}
        .empty-msg { text-align: center; color: #777; font-style: italic; }

        .action-buttons { display: flex; gap: 10px; margin-top: 20px; flex-wrap: wrap; }
        .clear-btn { background-color: #d32f2f; width: auto; padding: 10px 15px; margin: 0; } .clear-btn:hover { background-color: #b71c1c; transform:translateY(-2px); }
        .print-all-btn { background-color: #2e7d32; width: auto; padding: 10px 15px; margin: 0; } .print-all-btn:hover { background-color: #1b5e20; transform:translateY(-2px); }

        .shipping-calculator { background-color: var(--cream-2); border: 1px solid #eee0c0; border-radius: 10px; padding: 20px; margin-top: 20px; }
        .grand-total-display { font-size: clamp(1.2rem,4.5vw,1.6rem); font-weight: bold; color: var(--ink); margin-top: 15px; padding-top: 15px; border-top: 2px dashed #ddd2b8; text-align: left; }
        .grand-total-display span { color: #d32f2f; }

        .card-print-btn { position:relative; overflow:hidden; background-color: #1976d2; color: white; border: none; padding: 8px 15px; border-radius: 6px; cursor: pointer; font-family: 'Cairo', sans-serif; font-weight: 700; transition: transform .25s ease; margin-top: 10px;}
        .card-print-btn:hover { background-color: #115293; transform:translateY(-2px); }
        .card-items-list { margin: 10px 0 0 0; padding-right: 20px; font-size: 0.9em; color: #444; }
        .print-invoice-container, .print-manifest-container { display: none; }

        @media (max-width: 768px) {
            body { padding: 15px 10px; } .top-nav { flex-direction: column; } .main-wrapper { flex-direction: column; } .summary-section { position: static; width: 100%; border-width: 1px; } .form-section { padding: 20px; width: 100%; } .perfume-row { flex-direction: column; align-items: stretch; } .perfume-row > div { width: 100%; } .delete-row-btn { margin-top: 0; width: 100%; } .history-card { flex-direction: column; } .history-card > div { border-right: none !important; border-bottom: 1px dashed #ddd2b8; padding-bottom: 10px; margin-bottom: 10px; width: 100%; } .action-buttons { flex-direction: column; } .action-buttons .btn { width: 100%; } .shipping-calculator .form-group div { flex-direction: column; }
        }
        @media (max-width: 430px) {
            .brand-logo{ width:60px; } .form-section{ padding:18px; } .summary-section{ padding:20px; } .history-section{ padding:20px; } .nav-btn{ font-size:.92em; }
        }
        @media (prefers-reduced-motion: reduce) {
            *, *::before, *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
        }

        @media print {
            @page { size: A4 portrait; margin: 15mm; }
            * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; animation: none !important; }
            body { background: white; padding: 0; margin: 0; font-size: 12pt; color: #000; }
            .top-nav, .main-wrapper, .history-section, .bg-decor { display: none !important; }
            body[data-print-mode="single"] .print-invoice-container { display: block; width: 100%; max-width: none; margin: 0; }
            body[data-print-mode="manifest"] .print-manifest-container { display: block; width: 100%; max-width: none; margin: 0; }
            .invoice-header { text-align: center; border-bottom: 2px solid var(--gold) !important; padding-bottom: 20px; margin-bottom: 20px; }
            .print-brand-header { box-shadow: none; border: 2px solid var(--gold) !important; padding: 15px; margin-bottom: 15px; background-color: #fff !important; }
            .print-brand-header .brand-single-line { font-size: 2.5em; } .print-brand-header .perfume-color { background:none !important; -webkit-text-fill-color:initial !important; color: var(--gold-deep) !important; } .print-brand-header .oclock-color { color: var(--ink) !important; }
            .invoice-details { display: flex; justify-content: space-between; margin-bottom: 30px; font-size: 1.1em; }
            .invoice-table { width: 100%; border-collapse: collapse; margin-bottom: 30px; font-size: 1em; } .invoice-table th, .invoice-table td { border: 1px solid #ccc !important; padding: 12px; text-align: center; } .invoice-table th { background-color: #f0f0f0 !important; color: #333 !important;}
            .invoice-total-print { text-align: left; font-size: 1.5em; font-weight: bold; margin-top: 20px; color: var(--gold-deep) !important;} .invoice-footer { text-align: center; margin-top: 50px; font-size: 1.2em; font-style: italic; } .manifest-items-list { list-style: none; padding: 0; margin: 0; text-align: right; }
        }
/* ============ إضافات: عناصر جديدة بنفس هوية الثيم ============ */

/* عمود الكمية بصف العطر (ميزة جديدة) */
.perfume-row-qty { flex: 0.7 !important; }
.custom-size-label { color: var(--ink-2) !important; }

/* بطاقة قسم عامة (تستخدم بصفحات الإحصائيات/الإعدادات) */
.section-card { position:relative; background-color: var(--cream); padding: 30px; border-radius: 14px; box-shadow: 0 16px 40px rgba(0,0,0,.45), 0 0 0 1px rgba(201,164,76,.18); width: 100%; box-sizing: border-box; animation:fadeInUp .7s cubic-bezier(.2,.8,.2,1) both; overflow:hidden; }
.section-card::before { content:''; position:absolute; top:0; right:0; left:0; height:4px; background:linear-gradient(90deg, var(--gold-deep), var(--gold-light), var(--gold-deep)); }
.main-wrapper.stacked { flex-direction: column; }
h2.section-title { color: var(--gold-deep); margin-top: 0; border-bottom: 1px solid #eee0c0; padding-bottom: 10px; font-weight:700; }
.section-desc { color:#6b6152; font-size:.9em; margin-bottom:20px; }

/* جدول العملاء */
.customers-table { width: 100%; border-collapse: collapse; margin-top: 20px; }
.customers-table th, .customers-table td { border: 1px solid #eee0c0; padding: 12px; text-align: right; }
.customers-table th { background-color: var(--cream-2); color: var(--ink-2); font-weight: 700; }
.list-section { position:relative; background-color: var(--cream); padding: 30px; border-radius: 14px; box-shadow: 0 16px 40px rgba(0,0,0,.45), 0 0 0 1px rgba(201,164,76,.18); flex: 1.5; border: 1px solid var(--gold); box-sizing: border-box; animation:fadeInUp .7s cubic-bezier(.2,.8,.2,1) both; animation-delay:.2s; overflow:hidden; }
.list-section::before { content:''; position:absolute; top:0; right:0; left:0; height:4px; background:linear-gradient(90deg, var(--gold-deep), var(--gold-light), var(--gold-deep)); }
.delete-btn { background: #d32f2f; color: white; border: none; border-radius: 6px; padding: 6px 12px; cursor: pointer; font-size: 0.9em; font-family:'Cairo', sans-serif; font-weight:700; transition: background .2s ease; }
.delete-btn:hover { background: #b71c1c; }

/* صناديق إحصائيات سريعة */
.stats-summary { display: flex; gap: 15px; margin-bottom: 20px; flex-wrap: wrap; }
.stat-box { flex: 1; background: var(--cream); border: 1px solid var(--gold); border-radius: 10px; padding: 15px; text-align: center; min-width: 150px; box-shadow: 0 6px 16px rgba(0,0,0,.25); }
.stat-box h3 { margin: 0; color: var(--ink-2); font-size: 1em; }
.stat-box p { margin: 10px 0 0 0; font-size: 1.5em; font-weight: bold; color: var(--gold-deep); }

/* أكورديون الشحنات */
.shipment-accordion { border: 1px solid #eee0c0; border-radius: 10px; margin-bottom: 15px; overflow: hidden; background:var(--cream); }
.shipment-header { background-color: var(--cream-2); padding: 15px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; font-weight: bold; transition: background .25s ease; flex-wrap: wrap; gap: 10px; }
.shipment-header:hover { background-color: #efe4c8; }
.shipment-details { display: none; padding: 15px; background-color: var(--cream); border-top: 1px dashed #ddd2b8; }
.shipment-details.active { display: block; }
.shipment-inner-order { border-bottom: 1px solid #eee0c0; padding-bottom: 10px; margin-bottom: 10px; }
.shipment-inner-order:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.shipment-actions { display: flex; gap: 5px; }
.btn-small { padding: 6px 12px; font-size: 0.9em; margin: 0; width:auto; }
.btn-print { background-color: #1976d2; } .btn-print:hover { background-color: #115293; }
.btn-delete { background-color: #d32f2f; } .btn-delete:hover { background-color: #b71c1c; }
.archive-btn { background:linear-gradient(135deg, #b06a1a, #d98f3c); width: auto; margin-bottom: 20px; color:#fff; } .archive-btn:hover { filter:brightness(1.08); }

/* شارات الحالة */
.badge { padding: 3px 10px; border-radius: 20px; font-size: 0.75em; margin-right: 10px; display: inline-block; font-weight:700; }
.badge-current { background: linear-gradient(135deg, var(--gold-deep), var(--gold)); color: var(--ink); }
.badge-archived { background-color: #e7e0cf; color: var(--ink-2); border: 1px solid #ddd2b8; }

/* زر رفع ملف بمظهر موحّد */
.file-input-wrapper { position: relative; overflow: hidden; display: inline-block; width: 100%; }
.file-input-wrapper input[type=file] { font-size: 100px; position: absolute; left: 0; top: 0; opacity: 0; cursor: pointer; height: 100%; }
.import-btn { background-color: #1976d2; } .import-btn:hover { background-color: #115293; }
.export-btn { background-color: #2e7d32; } .export-btn:hover { background-color: #1b5e20; }
.csv-btn { background:linear-gradient(135deg, #3d6b3d, #5c9a5c); }
.csv-btn:hover { filter:brightness(1.08); }

/* صفحة الإعدادات */
.settings-group { margin-bottom: 10px; }
.settings-group .btn { margin-top: 10px; }
.pin-row { display:flex; gap:10px; }
.pin-row input { flex:1; }
.msg-inline { font-size:.85em; margin-top:8px; min-height:1.2em; }
.msg-ok { color:#1b5e20; font-weight:700; }
.msg-err { color:#b71c1c; font-weight:700; }

/* بوابة الرمز السري (PIN Gate) */
.auth-gate { position:fixed; inset:0; z-index:9999; display:flex; align-items:center; justify-content:center; padding:20px;
    background:
        radial-gradient(circle at 18% -8%, rgba(201,164,76,.28), transparent 42%),
        radial-gradient(circle at 105% 12%, rgba(138,106,40,.22), transparent 38%),
        linear-gradient(165deg, #1d170f 0%, #100d09 55%, #0a0806 100%); }
.auth-box { position:relative; background:var(--cream); border-radius:16px; padding:36px 30px; width:100%; max-width:360px; text-align:center; box-shadow:0 20px 50px rgba(0,0,0,.5), 0 0 0 1px rgba(201,164,76,.25); animation:fadeInUp .5s ease both; }
.auth-box .brand-single-line { font-size: clamp(1.3rem, 6vw, 2rem); margin-bottom:6px; }
.auth-sub { color:#6b6152; font-size:.9em; margin-bottom:22px; }
.auth-input { text-align:center; letter-spacing:.5em; font-size:1.4em; font-weight:700; }
.auth-error { color:#b71c1c; font-weight:700; font-size:.9em; min-height:1.3em; margin-top:10px; }
.auth-shake { animation: shake .4s; }
body.locked > *:not(.auth-gate) { display:none !important; }
.lock-btn { position:relative; overflow:hidden; background-color: var(--ink-2); color:#fff; border:none; border-radius:8px; cursor:pointer; font-family:'Cairo',sans-serif; font-weight:700; padding:12px 15px; width:auto; }
.lock-btn:hover { background-color:#322a1c; }

@media (max-width: 768px) {
    .main-wrapper.stacked { gap: 15px; }
}

/* طباعة: شحنة مؤرشفة */
@media print {
    body[data-print-mode="archived"] .print-manifest-container { display: block; width: 100%; max-width: none; margin: 0; }
}