:root{--bg:#000;--panel:#000;--panel2:#000;--line:#2a3442;--ink:#f2f2f0;--muted:#a0a9b5;--gold:#d5b477;--gold2:#f0d39a;--danger:#f18f89;--green:#81d5b4;--radius:17px;--shadow:0 18px 70px rgba(0,0,0,.2)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#000;color:var(--ink);font-family:Tajawal,'DM Sans',system-ui,sans-serif;font-size:15px;line-height:1.5}button,input,select{font:inherit}button{cursor:pointer}button:disabled{opacity:.5;cursor:not-allowed}a{color:inherit;text-decoration:none}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--gold);outline-offset:2px}h1,h2,h3,p{margin-top:0}.muted{color:var(--muted)}.gold{color:var(--gold)}.hidden{display:none!important}.app{display:grid;grid-template-columns:246px minmax(0,1fr);min-height:100vh}.sidebar{background:#000;border-left:1px solid var(--line);padding:29px 18px;display:flex;flex-direction:column;gap:38px;position:sticky;top:0;height:100vh}.brand{display:flex;align-items:center;gap:11px;padding:4px 10px}.mark{width:44px;height:44px;display:grid;place-items:center;border:1px solid #92784b;background:#000;color:var(--gold2);border-radius:12px;font-family:Georgia,serif;font-size:28px}.brandname{font-family:'DM Sans',sans-serif;letter-spacing:1.5px;font-weight:700;font-size:15px}.brand small{display:block;color:#a3a6ab;font-size:10px;letter-spacing:1.2px;font-family:'DM Sans',sans-serif}.nav{display:grid;gap:7px}.nav button{width:100%;border:0;background:transparent;color:#a7b0bd;padding:13px 14px;border-radius:11px;text-align:right;display:flex;align-items:center;gap:12px;font-weight:700;font-size:15px}.nav button:hover,.nav button.active{background:#000;color:#f4e6c9}.nav svg,.icon{width:20px;height:20px;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round;flex:none}.sidebar-bottom{margin-top:auto;border-top:1px solid var(--line);padding-top:18px}.server-tag{border:1px solid #735d34;background:#000;color:#f0cd86;border-radius:9px;padding:10px 12px;font-size:12px;line-height:1.65}.main{min-width:0;padding:30px clamp(20px,4.3vw,62px) 60px;max-width:1680px;width:100%;margin:auto}.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:31px}.topbar .path{color:var(--muted);font-size:13px}.topbar .path b{color:var(--gold)}.top-actions{display:flex;align-items:center;gap:10px}.pill{border:1px solid var(--line);border-radius:99px;padding:7px 12px;color:var(--muted);font-size:12px;display:flex;align-items:center;gap:7px}.dot{width:7px;height:7px;border-radius:50%;background:var(--green)}.avatar{height:37px;width:37px;border:1px solid #8c754f;border-radius:50%;display:grid;place-items:center;background:#000;color:#e6c995;font-weight:800}.hero{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:28px}.eyebrow{color:var(--gold);letter-spacing:2px;font-size:11px;font-family:'DM Sans',sans-serif;font-weight:700}.hero h1{font-size:clamp(28px,3vw,42px);line-height:1.1;letter-spacing:-.5px;margin:10px 0 8px;font-weight:800}.hero p{color:var(--muted);margin:0;font-size:15px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:42px;border-radius:10px;padding:10px 17px;border:1px solid var(--line);color:var(--ink);background:#000;font-weight:700;transition:background .15s,transform .15s;white-space:nowrap}.btn:hover{background:#000;transform:translateY(-1px)}.btn.gold-btn{background:#000;color:#201a12;border-color:#e2c28c}.btn.gold-btn:hover{background:#000}.btn.danger{color:#ffaaa2;border-color:#70423e;background:#000}.btn.small{padding:6px 10px;min-height:32px;font-size:12px}.btn.icon-btn{width:40px;padding:9px}.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px;margin-bottom:28px}.stat{background:#000;border:1px solid var(--line);border-radius:var(--radius);padding:20px;min-width:0;box-shadow:var(--shadow)}.stat .row{display:flex;justify-content:space-between;align-items:center;gap:8px}.stat .mini-icon{width:39px;height:39px;display:grid;place-items:center;border-radius:10px;background:#000;color:var(--gold)}.stat small{font-size:13px;color:var(--muted)}.stat strong{display:block;font-family:'DM Sans',sans-serif;font-size:32px;line-height:1.15;margin-top:10px;letter-spacing:-1px}.section-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:30px 0 16px}.section-head h2{font-size:21px;margin:0}.section-head small{color:var(--muted)}.panel{background:#000;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}.toolbar{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:16px;border-bottom:1px solid var(--line);flex-wrap:wrap}.search{display:flex;align-items:center;gap:10px;border:1px solid var(--line);background:#000;padding:0 13px;border-radius:9px;min-width:min(100%,280px)}.search svg{width:17px;height:17px;color:#a5adbb}.search input{border:0;outline:0;background:transparent;color:var(--ink);width:100%;padding:12px 0}.table-wrap{overflow-x:auto}table{width:100%;border-collapse:collapse;min-width:700px}th{text-align:right;color:#9da8b6;font-weight:500;font-size:12px;background:#000}th,td{padding:15px 18px;border-bottom:1px solid #28323f;vertical-align:middle}tbody tr:hover{background:#000}tbody tr:last-child td{border-bottom:0}.file-name{font-weight:700;max-width:320px;overflow-wrap:anywhere}.file-line{display:flex;align-items:center;gap:11px}.file-icon{width:42px;height:44px;border-radius:9px;background:#000;display:grid;place-items:center;color:#edbdb5;overflow:hidden}.file-icon img{width:100%;height:100%;object-fit:cover}.file-icon.pdf{background:#000}.sub{font-size:12px;color:var(--muted)}.status{display:inline-flex;align-items:center;gap:6px;font-size:12px;border-radius:99px;padding:5px 10px;background:#000;color:#8be0bb}.status.expired{background:#000;color:#e0bd8a}.status.revoked,.status.blocked{background:#000;color:#f3aaa2}.action-group{display:flex;gap:6px;flex-wrap:wrap}.empty{text-align:center;padding:48px 20px;color:var(--muted)}.empty svg{width:38px;height:38px;color:var(--gold);margin-bottom:8px}.empty h3{color:var(--ink);margin-bottom:4px}.notice{display:flex;align-items:start;gap:10px;border:1px solid #6d5432;background:#000;color:#edcc8c;padding:12px 14px;border-radius:11px;font-size:13px;margin-bottom:20px}.notice svg{flex:none;width:19px;height:19px}.view{display:none}.view.active{display:block}.dropzone{border:1.5px dashed #706449;border-radius:17px;background:#000;padding:55px 22px;text-align:center;cursor:pointer;transition:.15s}.dropzone.drag{border-color:var(--gold);background:#000}.dropzone svg{height:42px;width:42px;color:var(--gold)}.dropzone h3{margin:12px 0 5px;font-size:20px}.dropzone p{color:var(--muted);font-size:13px}.upload-row{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-top:15px;flex-wrap:wrap}.progress{height:8px;border-radius:99px;background:#000;overflow:hidden;margin-top:14px}.progress span{display:block;background:linear-gradient(90deg,#a9844c,#efd098);height:100%;width:0;transition:width .15s}.input{width:100%;border:1px solid #3b4655;background:#000;color:#f7f5f0;border-radius:10px;padding:12px 13px;outline:0}.input:focus{border-color:var(--gold)}.field{display:grid;gap:7px}.field label{font-size:13px;color:#c2c8d0;font-weight:700}.formgrid{display:grid;grid-template-columns:1fr 1fr;gap:15px}.dialog{position:fixed;inset:0;background:#000;z-index:10;display:grid;place-items:center;padding:18px;backdrop-filter:blur(5px)}.modal{width:min(100%,530px);background:#000;border:1px solid #4c5053;border-radius:19px;padding:26px;box-shadow:0 30px 100px #0009}.modal h2{font-size:24px;margin-bottom:8px}.modal p{color:var(--muted);font-size:13px}.modal-head{display:flex;justify-content:space-between;gap:10px;align-items:start;margin-bottom:18px}.close{background:none;border:0;color:#aab3c1;font-size:27px;line-height:1}.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:20px;flex-wrap:wrap}.share-link{direction:ltr;text-align:left;display:block;background:#000;border:1px solid #394554;border-radius:9px;padding:12px;font:12px 'DM Sans',monospace;color:#e8c48a;overflow-wrap:anywhere}.activity{display:grid;gap:10px;padding:15px}.activity-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px;background:#000;border-radius:10px}.activity-row .left{display:flex;align-items:center;gap:11px}.activity-row .left svg{color:var(--gold)}.activity-row strong{font-size:14px}.activity-row small{display:block;color:var(--muted);font-size:11px}.activity-row .when{color:#9da7b4;font-size:12px;white-space:nowrap}.notification-dot{width:8px;height:8px;border-radius:50%;background:#ffaf79;display:inline-block}.toast{position:fixed;bottom:24px;left:24px;z-index:40;background:#000;border:1px solid #668e7b;color:#dcf4e9;padding:13px 18px;border-radius:11px;box-shadow:var(--shadow);max-width:360px}.toast.error{background:#000;border-color:#89535a;color:#ffd2d2}.login-page{min-height:100vh;display:grid;place-items:center;padding:22px;background:#000}.login-card{width:min(100%,430px);border:1px solid #4b4336;border-radius:23px;background:#000;padding:40px;box-shadow:0 30px 100px #0008}.login-card .mark{margin:0 auto 20px;width:61px;height:61px;font-size:36px}.login-card h1{text-align:center;font:700 24px 'DM Sans',sans-serif;letter-spacing:1px;margin:0 0 4px}.login-card .subtitle{text-align:center;color:#b7b6ae;font-size:13px;margin-bottom:32px}.login-card .field{margin-bottom:16px}.password-wrap{display:flex;align-items:center;border:1px solid #3b4655;border-radius:10px;background:#000}.password-wrap input{flex:1;border:0;background:transparent;color:white;padding:12px;min-width:0;outline:0}.password-wrap button{border:0;background:transparent;color:var(--gold);padding:10px 12px}.login-card .btn{width:100%}.login-foot{text-align:center;color:#697584;font-size:11px;margin-top:27px}.viewer-body{background:#000;min-height:100vh}.viewer-head{background:#000;border-bottom:1px solid #303943;display:flex;align-items:center;justify-content:space-between;padding:14px clamp(16px,4vw,48px);gap:16px}.viewer-brand{font-family:'DM Sans',sans-serif;color:var(--gold);font-weight:700;letter-spacing:1px}.viewer-head .sub{margin-top:3px}.viewer-stage{max-width:1120px;margin:25px auto;padding:0 15px 55px;text-align:center}.viewer-state{padding:65px 25px;background:#000;border:1px solid #344050;border-radius:18px;max-width:600px;margin:65px auto}.viewer-state svg{height:40px;width:40px;color:var(--gold);margin-bottom:12px}.viewer-state h2{font-size:22px}.viewer-state p{color:#aab3be}.viewer-image{max-width:100%;max-height:78vh;object-fit:contain;box-shadow:0 20px 70px #0009;user-select:none}.pdf-controls{display:flex;align-items:center;justify-content:center;gap:11px;margin:10px auto 16px;flex-wrap:wrap}.pdf-canvas{max-width:100%;box-shadow:0 18px 65px #000a;background:#fff}.viewer-footer{text-align:center;font-size:12px;color:#89939f;padding:18px}.viewer-footer strong{color:#c6b188}.loader{display:inline-block;width:26px;height:26px;border:3px solid #5e6164;border-top-color:var(--gold);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}} @media(max-width:1050px){.app{grid-template-columns:75px minmax(0,1fr)}.sidebar{padding:22px 10px}.brand{justify-content:center;padding:0}.brandname,.brand small,.nav span,.sidebar-bottom{display:none}.nav button{justify-content:center;padding:14px}.stats{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:660px){.app{display:block}.sidebar{position:sticky;top:0;height:auto;z-index:5;padding:10px 14px;flex-direction:row;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);border-left:0;gap:10px}.brand .mark{height:36px;width:36px;font-size:23px}.nav{display:flex;gap:3px}.nav button{padding:10px}.nav svg{width:18px;height:18px}.main{padding:22px 15px 60px}.topbar{margin-bottom:22px}.topbar .path{font-size:11px}.pill{display:none}.hero{align-items:flex-start}.hero h1{font-size:28px}.hero p{font-size:13px}.hero .btn{font-size:12px;padding:9px}.stats{gap:9px}.stat{padding:14px}.stat strong{font-size:26px}.stat .mini-icon{width:32px;height:32px}.section-head h2{font-size:19px}.formgrid{grid-template-columns:1fr}.modal{padding:19px}.login-card{padding:28px 22px}.viewer-head{padding:12px}.viewer-brand{font-size:12px}} @media(max-width:660px){ table{min-width:0;width:100%}th,td{padding:12px 10px} #view-overview th:nth-child(2),#view-overview th:nth-child(3),#recentCatalogs td:nth-child(2),#recentCatalogs td:nth-child(3), #view-catalogs th:nth-child(2),#view-catalogs th:nth-child(3),#catalogTable td:nth-child(2),#catalogTable td:nth-child(3), #view-links th:nth-child(3),#view-links th:nth-child(4),#view-links th:nth-child(5),#linkTable td:nth-child(3),#linkTable td:nth-child(4),#linkTable td:nth-child(5), #view-security th:nth-child(2),#view-security th:nth-child(4),#visitTable td:nth-child(2),#visitTable td:nth-child(4){display:none} .file-line{gap:7px}.file-name{font-size:12px}.file-icon{width:35px;height:38px}.action-group{gap:5px}.action-group .btn{font-size:11px;padding:6px 8px} } /* V3: English-only customer experience. Admin interface styles remain unchanged. */ .premium-viewer{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;background:#000;color:#f4efe6;overflow:hidden} .premium-viewer .catalog-shell{height:100dvh;min-height:360px;display:flex;flex-direction:column;background:#000} .premium-viewer .catalog-topbar{height:68px;flex:0 0 auto;padding:0 clamp(15px,3vw,44px);display:grid;grid-template-columns:minmax(160px,1fr) minmax(0,1.4fr) minmax(160px,1fr);align-items:center;gap:16px;border-bottom:1px solid #ffffff15;background:#000;z-index:4} .premium-viewer .catalog-brand{display:flex;align-items:center;gap:12px;min-width:0} .premium-viewer .catalog-brand-mark{font-family:Georgia,serif;font-size:25px;line-height:1;width:38px;height:38px;display:grid;place-items:center;border:1px solid #bba06d73;border-radius:10px;color:#e6c78e;background:#000} .premium-viewer .catalog-brand-text{display:flex;flex-direction:column;gap:2px;white-space:nowrap} .premium-viewer .catalog-brand-text strong{font-size:13px;letter-spacing:2px;font-weight:600} .premium-viewer .catalog-brand-text small{font-size:9px;color:#bfa87c;letter-spacing:2px} .premium-viewer .catalog-title{color:#d7d6d2;font-size:14px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .premium-viewer .catalog-top-actions{display:flex;justify-content:flex-end;align-items:center;gap:15px} .premium-viewer .catalog-private{font-size:10px;color:#bfa87c;letter-spacing:1.5px;white-space:nowrap} .premium-viewer .catalog-main{min-height:0;flex:1;display:flex;align-items:stretch;justify-content:center;position:relative} .premium-viewer .catalog-message{margin:auto;padding:38px 25px;text-align:center;max-width:520px} .premium-viewer .catalog-message h1{font-size:clamp(20px,3vw,28px);margin:19px 0 8px;font-weight:500} .premium-viewer .catalog-message p{font-size:13px;color:#a4aab4;line-height:1.8} .premium-viewer .catalog-spinner{width:24px;height:24px;border-radius:50%;border:2px solid #6d624c;border-top-color:#f1d7a1;display:inline-block;animation:spin .7s linear infinite} .premium-viewer .catalog-viewer{width:100%;min-height:0;display:flex;flex-direction:column;position:relative} .premium-viewer .catalog-workspace{min-height:0;flex:1;position:relative;display:flex;align-items:stretch;justify-content:center;padding:8px 72px 2px} .premium-viewer .catalog-paper-stage{position:relative;flex:1;min-width:0;min-height:0;display:flex;align-items:center;justify-content:center;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#7778 #1b1c20;touch-action:pan-y} .premium-viewer .catalog-paper-stage.zoomed{display:block;touch-action:pan-x pan-y} .premium-viewer .catalog-paper{display:flex;justify-content:center;align-items:center;min-width:100%;min-height:100%;width:max-content;height:max-content;margin:auto} .premium-viewer .catalog-pdf-canvas{display:block;background:#fff;box-shadow:0 14px 45px #000a;max-width:none;user-select:none;-webkit-user-select:none} .premium-viewer .catalog-full-image{max-width:100%;max-height:100%;object-fit:contain;display:block;user-select:none;-webkit-user-select:none} .premium-viewer .catalog-paper-animate{animation:catalogReveal .18s ease-out both} @keyframes catalogReveal{from{opacity:.7;transform:translateY(3px)}to{opacity:1;transform:translateY(0)}} .premium-viewer .catalog-page-loading{position:absolute;top:14px;right:14px;z-index:3;background:#000;border:1px solid #ffffff1b;padding:7px;border-radius:12px;pointer-events:none} .premium-viewer .catalog-page-loading .catalog-spinner{width:15px;height:15px;display:block} .premium-viewer .catalog-nav{position:absolute;top:50%;transform:translateY(-50%);width:43px;height:60px;border-radius:13px;border:1px solid #ffffff1a;background:#000;color:#e4d0a6;display:grid;place-items:center;z-index:3;backdrop-filter:blur(12px);transition:background .15s,border .15s} .premium-viewer .catalog-nav:hover{background:#000;border-color:#d2ae73} .premium-viewer .catalog-nav svg,.premium-viewer .catalog-icon-button svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} .premium-viewer .catalog-nav-prev{left:clamp(12px,2vw,30px)} .premium-viewer .catalog-nav-next{right:clamp(12px,2vw,30px)} .premium-viewer .catalog-bottom{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;padding:7px 15px max(8px,env(safe-area-inset-bottom));gap:8px} .premium-viewer .catalog-dock{display:flex;align-items:center;justify-content:center;gap:6px;padding:6px 9px;background:#000;border:1px solid #ffffff21;border-radius:17px;box-shadow:0 10px 30px #0006;backdrop-filter:blur(20px)} .premium-viewer .catalog-icon-button{width:35px;height:35px;flex:0 0 auto;display:grid;place-items:center;border:0;background:transparent;border-radius:10px;color:#ddd8cf;transition:background .15s,color .15s} .premium-viewer .catalog-icon-button:hover,.premium-viewer .catalog-icon-button.selected{background:#000;color:#efd29d} .premium-viewer .catalog-count{font-size:13px;min-width:76px;text-align:center;font-variant-numeric:tabular-nums;color:#f4e5c7} .premium-viewer .catalog-zoom{font-size:11px;min-width:41px;text-align:center;color:#c0c1c5;font-variant-numeric:tabular-nums} .premium-viewer .catalog-separator{height:20px;width:1px;background:#000;margin:0 4px} .premium-viewer .catalog-progress{width:min(390px,78vw);height:2px;background:#000;border-radius:2px;overflow:hidden} .premium-viewer .catalog-progress>div{height:100%;background:linear-gradient(90deg,#ab8b53,#e5c98e);transition:width .18s} .premium-viewer .catalog-disclaimer{font-size:9px;letter-spacing:1.5px;color:#777d86;margin:0;text-align:center} .premium-viewer .catalog-filmstrip{width:min(100%,850px);display:flex;justify-content:center;gap:8px;overflow-x:auto;max-height:134px;padding:6px 0;scrollbar-width:thin} .premium-viewer .catalog-thumb{flex:0 0 76px;border:1px solid #414349;background:#000;color:#b5bbc5;border-radius:10px;display:flex;align-items:center;flex-direction:column;padding:5px;gap:3px;font-size:10px} .premium-viewer .catalog-thumb.selected{border-color:#d8b67c;color:#f5d49c;background:#000} .premium-viewer .catalog-thumb-image{width:60px;height:80px;display:grid;place-items:center;overflow:hidden;background:#000;border-radius:5px} .premium-viewer .catalog-thumb-image canvas{max-width:100%;max-height:100%;object-fit:contain} @media(max-width:700px){ .premium-viewer .catalog-topbar{height:59px;padding:0 13px;grid-template-columns:auto minmax(0,1fr) auto;gap:8px} .premium-viewer .catalog-brand{gap:7px} .premium-viewer .catalog-brand-mark{width:30px;height:30px;font-size:20px;border-radius:8px} .premium-viewer .catalog-brand-text strong{font-size:10px;letter-spacing:1px} .premium-viewer .catalog-brand-text small{font-size:7px;letter-spacing:1px} .premium-viewer .catalog-title{font-size:11px;max-width:100%} .premium-viewer .catalog-private{display:none} .premium-viewer .catalog-workspace{padding:4px 3px 0} .premium-viewer .catalog-nav{top:auto;bottom:6px;transform:none;width:34px;height:36px;border-radius:10px;background:#000} .premium-viewer .catalog-nav-prev{left:9px} .premium-viewer .catalog-nav-next{right:9px} .premium-viewer .catalog-nav svg{width:16px;height:16px} .premium-viewer .catalog-bottom{padding:4px 6px max(8px,env(safe-area-inset-bottom));gap:7px} .premium-viewer .catalog-dock{gap:2px;padding:5px 6px;border-radius:13px} .premium-viewer .catalog-icon-button{width:32px;height:32px} .premium-viewer .catalog-icon-button svg{width:17px;height:17px} .premium-viewer .catalog-count{min-width:58px;font-size:12px} .premium-viewer .catalog-zoom{min-width:34px;font-size:10px} .premium-viewer .catalog-separator{margin:0 2px} .premium-viewer .catalog-disclaimer{font-size:8px;letter-spacing:1px} .premium-viewer .catalog-filmstrip{justify-content:flex-start} } .premium-viewer .catalog-full-image{max-height:calc(100dvh - 174px);width:auto;height:auto} @media(max-width:700px){.premium-viewer .catalog-full-image{max-height:calc(100dvh - 150px)}} /* Brand identity: uploaded company logo, aspect-ratio preserved. */ .admin-brand-logo{display:none;max-width:52px;width:auto;height:42px;object-fit:contain;flex-shrink:0} .admin-brand-logo.loaded{display:block} .premium-viewer .catalog-brand-logo{display:none;width:auto;height:42px;max-width:135px;object-fit:contain;flex-shrink:0} .premium-viewer .catalog-brand-logo.loaded{display:block} @media(max-width:700px){.premium-viewer .catalog-brand-logo{height:34px;max-width:88px}} .brand-settings{padding:26px;display:flex;align-items:center;gap:36px;flex-wrap:wrap} .brand-preview{flex:1;min-width:240px}.brand-preview-frame{height:160px;background:#000;border:1px solid #ffffff26;border-radius:14px;display:flex;align-items:center;justify-content:center;padding:20px;color:#c7ad7b} .brand-preview-frame img{display:block;max-width:100%;max-height:100%;object-fit:contain} .brand-preview p{font-size:12px;color:#aeb4bf;margin-top:12px} .brand-settings-controls{display:flex;flex-direction:column;gap:14px;flex:1;min-width:240px} .brand-settings-controls input{max-width:100%;font-size:13px}.brand-settings-controls label{font-weight:600} /* V3.2 — Continuous scroll, like Adobe Reader. No page-turn or transition animation. */ .premium-viewer .catalog-workspace{padding:0;min-height:0} .premium-viewer .catalog-paper-stage{display:block;overflow:auto;overscroll-behavior:contain;touch-action:pan-x pan-y;scroll-behavior:auto;background:#000} .premium-viewer .catalog-paper{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:14px;min-width:0;min-height:0;width:100%;height:auto;margin:0;padding:20px 8px 28px} .premium-viewer .catalog-paper.two-up{display:grid;grid-template-columns:repeat(2,max-content);justify-content:center;align-content:start;align-items:start;column-gap:18px;row-gap:14px} .premium-viewer .catalog-paper.image-mode{min-height:100%;align-items:center;justify-content:center} .premium-viewer .catalog-sheet{display:block;flex-shrink:0;position:relative;background:#000;box-shadow:0 5px 23px #0007;overflow:hidden;scroll-margin-top:12px} .premium-viewer .catalog-sheet .catalog-pdf-canvas{width:100%;height:auto;box-shadow:none} .premium-viewer .sheet-placeholder{position:absolute;inset:0;display:grid;place-items:center;background:#000;color:#9b9b9b;font:12px system-ui,sans-serif} .premium-viewer .catalog-paper-animate{animation:none!important} .premium-viewer .catalog-progress>div{transition:none} .premium-viewer .catalog-dock{border-radius:12px} .premium-viewer .catalog-nav{display:none!important} @media(max-width:700px){ .premium-viewer .catalog-paper{padding:8px 6px 18px;gap:8px} .premium-viewer .catalog-paper.two-up{column-gap:8px;row-gap:8px} .premium-viewer .catalog-sheet{scroll-margin-top:5px} } /* V3.3 — responsive customer reader. No page flip, no animations. */ html:has(.premium-viewer),body.premium-viewer{height:100%;overflow:hidden;scroll-behavior:auto} .premium-viewer{font-family:'DM Sans',system-ui,sans-serif} .premium-viewer .catalog-shell{height:100dvh;min-height:0;max-height:100dvh;overflow:hidden} .premium-viewer .catalog-topbar{height:clamp(48px,6.5dvh,66px);padding-inline:clamp(10px,2.5vw,32px);grid-template-columns:minmax(50px,1fr) minmax(0,2fr) minmax(42px,1fr);gap:8px} .premium-viewer .catalog-brand{min-width:0;gap:0} .premium-viewer .catalog-brand-text,.premium-viewer .catalog-private{display:none!important} .premium-viewer .catalog-brand-logo{max-width:min(22vw,150px);height:clamp(29px,4.7dvh,45px);object-fit:contain} .premium-viewer .catalog-title{font-size:clamp(11px,1.1vw,15px);line-height:1.25} .premium-viewer .catalog-top-actions{gap:0} .premium-viewer .catalog-main{min-height:0} .premium-viewer .catalog-workspace{min-height:0;flex:1;padding:0} .premium-viewer .catalog-paper-stage{width:100%;min-width:0;min-height:0;overflow-y:auto;overflow-x:auto;touch-action:pan-x pan-y;scroll-behavior:auto;-webkit-overflow-scrolling:touch} .premium-viewer .catalog-paper{width:100%;min-width:0;max-width:none;padding:clamp(6px,1.5vw,20px) 6px 20px;gap:clamp(7px,1.5vw,15px);display:flex;flex-direction:column;align-items:center;justify-content:flex-start} .premium-viewer .catalog-sheet{max-width:none;flex:0 0 auto;scroll-margin-top:8px;contain:layout paint;} .premium-viewer .catalog-pdf-canvas{display:block;width:100%;height:auto} .premium-viewer .catalog-paper-stage.horizontal-stage{overflow:auto;touch-action:pan-x pan-y} .premium-viewer .catalog-paper.horizontal-mode{min-height:100%;padding:8px;display:flex;align-items:center;justify-content:center;gap:0} .premium-viewer .catalog-paper.horizontal-mode .catalog-sheet{margin:auto} .premium-viewer .catalog-bottom{padding:5px 8px max(7px,env(safe-area-inset-bottom));gap:5px;min-height:0} .premium-viewer .catalog-dock{max-width:100%;gap:clamp(1px,.45vw,7px);padding:5px 7px;flex-wrap:nowrap} .premium-viewer .catalog-icon-button{width:clamp(29px,3vw,36px);height:clamp(29px,3vw,36px);touch-action:manipulation} .premium-viewer .catalog-count{min-width:clamp(52px,6vw,80px);font-size:clamp(11px,1.1vw,13px)} .premium-viewer .catalog-zoom{min-width:clamp(29px,3vw,43px);font-size:clamp(9px,.9vw,11px)} .premium-viewer .catalog-separator{margin:0 1px} .premium-viewer .catalog-progress{width:min(340px,65vw)} .premium-viewer .catalog-disclaimer{font-size:8px;letter-spacing:.8px} .premium-viewer .catalog-full-image{max-width:100%;max-height:100%;object-fit:contain} .premium-viewer .catalog-thumb-image img{display:block;max-width:100%;max-height:100%;object-fit:contain} @media(max-width:600px){ .premium-viewer .catalog-topbar{height:52px;padding:0 10px;grid-template-columns:minmax(38px,1fr) minmax(0,2fr) 34px;gap:5px} .premium-viewer .catalog-brand-logo{max-width:23vw;height:34px} .premium-viewer .catalog-brand-mark{width:29px;height:29px;font-size:19px} .premium-viewer .catalog-title{font-size:clamp(10px,2.8vw,12px)} .premium-viewer .catalog-paper{padding:6px 3px 12px;gap:7px} .premium-viewer .catalog-paper.horizontal-mode{padding:3px} .premium-viewer .catalog-bottom{padding:4px 3px max(4px,env(safe-area-inset-bottom));gap:3px} .premium-viewer .catalog-dock{gap:0;padding:3px 4px;border-radius:11px} .premium-viewer .catalog-icon-button{width:clamp(27px,8vw,34px);height:34px} .premium-viewer .catalog-count{min-width:50px;font-size:11px} .premium-viewer .catalog-zoom{min-width:30px;font-size:9px} .premium-viewer .catalog-separator{margin:0 1px;height:17px} .premium-viewer .catalog-disclaimer{font-size:7px;letter-spacing:.4px} .premium-viewer .catalog-filmstrip{max-height:104px} } @media(max-width:350px){ .premium-viewer .catalog-dock{padding:3px 2px} .premium-viewer .catalog-icon-button{width:27px;height:30px} .premium-viewer .catalog-count{min-width:44px} .premium-viewer .catalog-zoom{min-width:27px} .premium-viewer .catalog-separator{margin:0} } @media(max-height:470px) and (orientation:landscape){ .premium-viewer .catalog-topbar{height:39px} .premium-viewer .catalog-brand-logo{height:30px} .premium-viewer .catalog-bottom{padding:2px 6px max(2px,env(safe-area-inset-bottom));gap:1px} .premium-viewer .catalog-disclaimer{display:none} .premium-viewer .catalog-progress{display:none} .premium-viewer .catalog-icon-button{height:28px} } /* V3.4: two side-by-side pages, continuous vertical scroll. No flip animation. */ .premium-viewer .catalog-paper.two-up{display:grid;grid-template-columns:repeat(2,max-content);align-items:start;align-content:start;justify-content:center;column-gap:18px;row-gap:14px;min-height:0;} .premium-viewer .catalog-paper.two-up .catalog-sheet{margin:0;} @media(max-width:700px){.premium-viewer .catalog-paper.two-up{column-gap:8px;row-gap:8px;padding-inline:3px;}} /* V3.11: English-only full catalog preparation progress */ .premium-viewer .catalog-prepare-track{width:min(370px,80vw);height:5px;border-radius:9px;overflow:hidden;background:#000;margin:22px auto 0} .premium-viewer .catalog-prepare-fill{height:100%;width:0;background:#c5a66d;transition:width .08s linear} /* V3.12 prepared images: no blank white canvas while a PDF is rasterizing. */ .premium-viewer .catalog-sheet.prepared-sheet{background:#000;} .premium-viewer .prepared-placeholder{position:absolute;inset:0;background:#000;color:#8c8d90;display:flex;align-items:center;justify-content:center;font:12px system-ui,sans-serif;} .premium-viewer .catalog-sheet.prepared-sheet .catalog-pdf-canvas{display:block;width:100%;height:100%;object-fit:fill;background:transparent;} .prep-track{height:4px;background:#000;border-radius:8px;overflow:hidden;max-width:210px;margin-top:7px}.prep-track>div{height:100%;background:#c9a66b;transition:width .3s ease} /* V3.13 management controls */ .action-group{display:flex;align-items:center;gap:6px;flex-wrap:wrap} .action-group .btn{white-space:nowrap} #view-backup .panel{max-width:1000px} #view-backup .panel h3{margin:0 0 12px} #view-backup .panel .muted{line-height:1.9} #view-trash .notice{margin-bottom:18px} /* Mobile-safe immersive full-page reader; supported even on iOS Safari. */ .premium-viewer.viewer-immersive .catalog-topbar{display:none!important} .premium-viewer.viewer-immersive .catalog-bottom .catalog-disclaimer{display:none!important} .premium-viewer.viewer-immersive .catalog-shell{height:100dvh!important;max-height:100dvh!important} .premium-viewer.viewer-immersive .catalog-paper-stage{height:100%;flex:1} .premium-viewer .catalog-paper-stage{touch-action:pan-x pan-y;overscroll-behavior:contain} .premium-viewer .catalog-paper{min-width:max-content} .premium-viewer .catalog-sheet{flex-shrink:0} @media(max-width:700px){.premium-viewer .catalog-paper.two-up{grid-template-columns:repeat(2,max-content)}} #immersiveExit{display:none;position:fixed;z-index:9999;right:12px;top:max(12px,env(safe-area-inset-top));background:#000;color:#f0d39a;border:1px solid #d5b477;border-radius:10px;padding:9px 14px;font:600 13px system-ui;box-shadow:0 4px 20px #0008} .viewer-immersive #immersiveExit{display:block} /* Mobile pinch: allow vertical scroll at normal zoom, both directions when zoomed. */ .premium-viewer .catalog-paper-stage{touch-action:pan-x pan-y;overscroll-behavior:contain} .premium-viewer .catalog-paper-stage.zoomed{touch-action:pan-x pan-y} .premium-viewer .catalog-sheet{transform-origin:top left} /* Alsayyed brand polish: one real logo, no letter placeholder or layered images. */ .admin-brand-logo,.admin-brand-logo.loaded{display:block!important;width:100px;max-width:100px;height:38px;object-fit:contain;flex-shrink:0} .premium-viewer .catalog-brand-logo,.premium-viewer .catalog-brand-logo.loaded{display:block!important;width:128px;max-width:128px;height:42px;object-fit:contain;flex-shrink:0} .login-card{isolation:isolate;text-align:center} .login-brand-logo{display:block;width:220px;max-width:80%;height:74px;object-fit:contain;margin:0 auto 19px} .login-card h1{margin-top:0} .login-card .field,.login-card form{text-align:right} @media(max-width:700px){.premium-viewer .catalog-brand-logo,.premium-viewer .catalog-brand-logo.loaded{width:88px;max-width:88px;height:34px}.admin-brand-logo,.admin-brand-logo.loaded{width:86px;max-width:86px;height:34px}.login-brand-logo{width:190px;height:65px}} /* 2026-10-24 — brand identity: real image only, stable and centered. */ .login-card{display:flex;flex-direction:column;align-items:stretch;isolation:isolate} .login-card .login-brand-logo{display:block!important;width:min(100%,320px)!important;max-width:100%!important;height:112px!important;object-fit:contain!important;object-position:center!important;margin:0 auto 32px!important;align-self:center!important;flex:none} .login-card form{width:100%;margin:0} .login-card .password-wrap{overflow:hidden;background:#000;border:1px solid #3b4655} .login-card .password-wrap input,.login-card .password-wrap input:focus{background:transparent!important;color:#f7f5f0!important;box-shadow:none!important;border:0!important;outline:0!important} .login-card .password-wrap input:-webkit-autofill,.login-card .password-wrap input:-webkit-autofill:hover,.login-card .password-wrap input:-webkit-autofill:focus{-webkit-text-fill-color:#f7f5f0!important;box-shadow:0 0 0 1000px #0e151f inset!important;transition:background-color 9999s ease-in-out 0s} .sidebar .brand{display:flex;justify-content:center;align-items:center;padding:4px 0;width:100%;min-height:74px} .sidebar .admin-brand-logo,.sidebar .admin-brand-logo.loaded{display:block!important;width:min(100%,190px)!important;max-width:100%!important;height:74px!important;object-fit:contain!important;object-position:center!important;flex:none} .premium-viewer .catalog-brand{display:flex;align-items:center;justify-content:center;min-width:0} .premium-viewer .catalog-brand-logo,.premium-viewer .catalog-brand-logo.loaded{display:block!important;width:170px!important;max-width:min(33vw,170px)!important;height:60px!important;object-fit:contain!important;object-position:center!important} @media(max-width:1050px){.sidebar .brand{min-height:55px}.sidebar .admin-brand-logo,.sidebar .admin-brand-logo.loaded{width:65px!important;height:55px!important}} @media(max-width:660px){.sidebar .brand{min-height:44px;width:auto}.sidebar .admin-brand-logo,.sidebar .admin-brand-logo.loaded{width:88px!important;height:44px!important}.login-card .login-brand-logo{height:96px!important;width:min(100%,270px)!important;margin-bottom:26px!important}.premium-viewer .catalog-brand-logo,.premium-viewer .catalog-brand-logo.loaded{width:100px!important;max-width:100px!important;height:39px!important}} /* 2026-10-24 v2: compact genuine logo, stable sizing, no replacement glyphs. */ .login-card .login-brand-logo{width:190px!important;max-width:70%!important;height:65px!important;margin:0 auto 24px!important;object-fit:contain!important;object-position:center!important} .sidebar .brand{min-height:48px!important;justify-content:center!important} .sidebar .admin-brand-logo,.sidebar .admin-brand-logo.loaded{width:128px!important;max-width:100%!important;height:46px!important;object-fit:contain!important;object-position:center!important} .premium-viewer .catalog-brand-logo,.premium-viewer .catalog-brand-logo.loaded{width:118px!important;max-width:min(28vw,118px)!important;height:40px!important;object-fit:contain!important} @media(max-width:1050px){.sidebar .brand{min-height:42px!important}.sidebar .admin-brand-logo,.sidebar .admin-brand-logo.loaded{width:62px!important;height:38px!important}} @media(max-width:660px){.sidebar .brand{min-height:36px!important}.sidebar .admin-brand-logo,.sidebar .admin-brand-logo.loaded{width:82px!important;height:34px!important}.login-card .login-brand-logo{width:175px!important;height:60px!important;margin-bottom:22px!important}.premium-viewer .catalog-brand-logo,.premium-viewer .catalog-brand-logo.loaded{width:94px!important;max-width:94px!important;height:34px!important}} .expiry-sync-option{display:flex;align-items:center;gap:10px;margin:15px 0 8px;font-size:14px;color:#f2f2f0;cursor:pointer} .expiry-sync-option input{width:18px;height:18px;accent-color:#d5b477;flex:none} /* Bilingual catalog names: preserve Arabic + Latin order without breaking responsive layout. */ .premium-viewer .catalog-title{min-width:0;max-width:100%;unicode-bidi:plaintext;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center;letter-spacing:normal;font-family:system-ui,-apple-system,"Segoe UI",Tahoma,Arial,sans-serif;font-weight:600} .file-name bdi,.activity-row bdi,.modal bdi,.sub bdi,td bdi{unicode-bidi:isolate;overflow-wrap:anywhere} .file-name{min-width:0;max-width:100%;line-height:1.45;overflow-wrap:anywhere} #renameTitle[dir="auto"]{unicode-bidi:plaintext;text-align:start} @media(max-width:600px){.premium-viewer .catalog-title{font-size:clamp(10px,2.8vw,12px);max-width:100%;min-width:0}} /* ALSAYYED ALL-BLACK UI 2026-10-24: interface only; never modify PDF or product imagery. */ html,body,.app,.sidebar,.main,.login-page,.login-card,.viewer-body,.premium-viewer,.premium-viewer .catalog-shell{background:#000!important;color-scheme:dark} :root{--bg:#000;--panel:#000;--panel2:#000;--shadow:0 12px 38px rgba(0,0,0,.6)} input,select,textarea,.input,.search,.password-wrap,.login-card .password-wrap,.login-card .password-wrap input{background:#000!important;color:#f2f2f0!important} input::placeholder,textarea::placeholder{color:#9ba3ae} .btn.gold-btn,.btn.gold-btn:hover{background:#000!important;color:var(--gold2)!important;border-color:var(--gold)!important} .btn:hover,.nav button:hover,.nav button.active{background:#000!important;border-color:var(--gold)} .stat,.panel,.modal,.dialog,.toast,.status,.notice,.dropzone,.server-tag,.activity-row,.premium-viewer .catalog-topbar,.premium-viewer .catalog-dock,.premium-viewer .catalog-thumb,.premium-viewer .catalog-nav,.premium-viewer .catalog-page-loading,.premium-viewer .catalog-sheet,.premium-viewer .sheet-placeholder,.premium-viewer .prepared-placeholder{background:#000!important} .premium-viewer .sheet-placeholder{color:#b7bdc7} .premium-viewer .catalog-sheet.prepared-sheet{background:#000!important} .premium-viewer .catalog-pdf-canvas,.pdf-canvas{background:transparent!important} .premium-viewer .catalog-progress>div,.premium-viewer .catalog-prepare-fill,.prep-track>div,.progress span{background:var(--gold)!important} .dot{background:var(--green)!important}.notification-dot{background:var(--gold)!important} /* Ensure native controls and popovers use black surfaces. */ select option,option,textarea{background:#000;color:#f2f2f0}