/* Sautul Hikma — design system. Brand colours inherited from the logo (#5F3634 maroon). */
@font-face{font-family:"Inter";src:url(/fonts/inter-latin-wght-normal.woff2) format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";src:url(/fonts/inter-latin-ext-wght-normal.woff2) format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Lora";src:url(/fonts/lora-latin-wght-normal.woff2) format("woff2");font-weight:400 700;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122}
@font-face{font-family:"Lora";src:url(/fonts/lora-latin-ext-wght-normal.woff2) format("woff2");font-weight:400 700;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Amiri";src:url(/fonts/amiri-arabic-400-normal.woff2) format("woff2");font-weight:400;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"Amiri";src:url(/fonts/amiri-arabic-700-normal.woff2) format("woff2");font-weight:700;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}

:root{
  --sh-primary:#5F3634;--sh-primary-rgb:95,54,52;--sh-primary-700:#75433F;--sh-primary-900:#3B2120;
  --sh-secondary:#8A5A57;--sh-tint:#9C7B79;--sh-soft:#F3ECEB;
  --sh-gold:#C9A24B;--sh-gold-ink:#7A5C14;
  --sh-bg:#FBF8F7;--sh-surface:#fff;--sh-surface-2:#F7F1F0;--sh-text:#2B1F1E;--sh-muted:#6E5C5A;--sh-border:#E7DBD9;
  --sh-radius:14px;--sh-shadow:0 1px 2px rgba(59,33,32,.06),0 6px 18px rgba(59,33,32,.07);
  --sh-ok:#2F6B4F;--sh-warn:#9A6B00;--sh-danger:#A12B2B;
  --bs-primary:#5F3634;--bs-primary-rgb:95,54,52;--bs-link-color:#5F3634;--bs-link-color-rgb:95,54,52;--bs-link-hover-color:#3B2120;
  --bs-body-bg:var(--sh-bg);--bs-body-color:var(--sh-text);--bs-border-color:var(--sh-border);--bs-body-font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
[data-theme="dark"]{
  --sh-primary:#D9B8B5;--sh-primary-rgb:217,184,181;--sh-primary-700:#E8CFCC;--sh-primary-900:#F3E4E2;
  --sh-secondary:#B88A86;--sh-tint:#9C7B79;--sh-soft:#2E2120;
  --sh-gold:#D8B45E;--sh-gold-ink:#E3C57B;
  --sh-bg:#171110;--sh-surface:#211817;--sh-surface-2:#2A1F1E;--sh-text:#F1E6E4;--sh-muted:#B9A5A2;--sh-border:#3A2C2A;
  --sh-shadow:0 1px 2px rgba(0,0,0,.4),0 6px 18px rgba(0,0,0,.3);
  --bs-link-color:#E3C1BE;--bs-link-hover-color:#fff;--bs-body-bg:#171110;--bs-body-color:#F1E6E4;--bs-border-color:#3A2C2A;
  color-scheme:dark;
}
html{scroll-behavior:smooth}
body{background:var(--sh-bg);color:var(--sh-text);font-family:var(--bs-body-font-family);-webkit-font-smoothing:antialiased;overflow-wrap:anywhere}
h1,h2,h3,h4,.font-display{font-family:Lora,Georgia,"Times New Roman",serif;color:var(--sh-primary-900);letter-spacing:-.01em}
[data-theme="dark"] h1,[data-theme="dark"] h2,[data-theme="dark"] h3,[data-theme="dark"] h4{color:#F6ECEA}
a{text-decoration-thickness:1px;text-underline-offset:3px}
.arabic,[lang="ar"]{font-family:Amiri,"Noto Naskh Arabic","Traditional Arabic",serif;direction:rtl;text-align:right;line-height:2.1;font-size:1.55rem}
.skip-link{position:absolute;left:-999px;top:8px;background:var(--sh-primary);color:#fff;padding:.5rem 1rem;border-radius:8px;z-index:2000}
.skip-link:focus{left:8px}
:focus-visible{outline:3px solid var(--sh-gold);outline-offset:2px;border-radius:4px}
.icon{width:1.15em;height:1.15em;vertical-align:-.2em;flex:none;stroke:currentColor}
.icon-lg{width:1.6rem;height:1.6rem}

/* Buttons */
.btn{border-radius:10px;font-weight:600}
.btn-primary,.btn-sh{--bs-btn-bg:var(--sh-primary);--bs-btn-border-color:var(--sh-primary);--bs-btn-hover-bg:var(--sh-primary-700);--bs-btn-hover-border-color:var(--sh-primary-700);--bs-btn-active-bg:var(--sh-primary-900);--bs-btn-active-border-color:var(--sh-primary-900);--bs-btn-color:#fff;--bs-btn-hover-color:#fff;--bs-btn-active-color:#fff;--bs-btn-disabled-bg:var(--sh-primary);--bs-btn-disabled-border-color:var(--sh-primary);--bs-btn-focus-shadow-rgb:var(--sh-primary-rgb)}
[data-theme="dark"] .btn-primary,[data-theme="dark"] .btn-sh{--bs-btn-color:#2B1F1E;--bs-btn-hover-color:#2B1F1E;--bs-btn-active-color:#2B1F1E}
.btn-outline-primary{--bs-btn-color:var(--sh-primary);--bs-btn-border-color:var(--sh-primary);--bs-btn-hover-bg:var(--sh-primary);--bs-btn-hover-border-color:var(--sh-primary);--bs-btn-hover-color:#fff;--bs-btn-active-bg:var(--sh-primary-700);--bs-btn-active-border-color:var(--sh-primary-700)}
[data-theme="dark"] .btn-outline-primary{--bs-btn-hover-color:#2B1F1E}
.btn-gold{background:var(--sh-gold);border-color:var(--sh-gold);color:#2B1F1E}
.btn-gold:hover{background:#d6b25f;border-color:#d6b25f;color:#2B1F1E}
.btn-ghost{background:transparent;border:1px solid var(--sh-border);color:var(--sh-text)}
.btn-ghost:hover{background:var(--sh-soft);color:var(--sh-text)}
.form-control,.form-select{border-radius:10px;border-color:var(--sh-border);background-color:var(--sh-surface);color:var(--sh-text)}
.form-control:focus,.form-select:focus{border-color:var(--sh-primary);box-shadow:0 0 0 .2rem rgba(var(--sh-primary-rgb),.18);background-color:var(--sh-surface);color:var(--sh-text)}
.form-label{font-weight:600;font-size:.9rem}
.invalid-feedback{display:block}
.form-text{color:var(--sh-muted)}

/* Header */
.site-header{background:var(--sh-surface);border-bottom:1px solid var(--sh-border);position:sticky;top:0;z-index:1030;box-shadow:0 1px 0 rgba(0,0,0,.02)}
.site-header .brand{display:flex;align-items:center;gap:.75rem;text-decoration:none;color:var(--sh-primary-900);min-width:0}
.site-header .brand img{width:44px;height:44px;object-fit:contain}
[data-theme="dark"] .brand img,[data-theme="dark"] .footer-logo{filter:brightness(0) invert(.92)}
.brand-name{font-family:Lora,serif;font-weight:700;font-size:1.2rem;line-height:1.1;display:block}
.brand-slogan{font-size:.72rem;color:var(--sh-muted);display:none;line-height:1.2}
@media(min-width:576px){.brand-slogan{display:block}}
.main-nav .nav-link{color:var(--sh-text);font-weight:500;padding:.55rem .8rem;border-radius:10px;font-size:.95rem}
.main-nav .nav-link:hover{background:var(--sh-soft);color:var(--sh-primary)}
.main-nav .nav-link.active{color:var(--sh-primary);background:var(--sh-soft);font-weight:600}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:10px;border:1px solid var(--sh-border);background:var(--sh-surface);color:var(--sh-text)}
.icon-btn:hover{background:var(--sh-soft)}
.offcanvas{background:var(--sh-surface);color:var(--sh-text)}
.header-search{position:relative}
.header-search input{padding-left:2.4rem;min-width:220px}
.header-search .icon{position:absolute;left:.8rem;top:50%;transform:translateY(-50%);color:var(--sh-muted)}

/* Islamic geometric pattern (8-point star lattice) */
.pattern-bg{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.10' stroke-width='1'%3E%3Cpath d='M40 4l9 17 17-9-9 17 17 9-17 9 9 17-17-9-9 17-9-17-17 9 9-17-17-9 17-9-9-17 17 9z'/%3E%3Ccircle cx='40' cy='40' r='9'/%3E%3C/g%3E%3C/svg%3E")}
.hero{background:linear-gradient(135deg,var(--sh-primary-900),var(--sh-primary) 55%,var(--sh-primary-700));color:#fff;position:relative;overflow:hidden}
.hero>.container{position:relative;z-index:1}
.hero h1{color:#fff;font-size:clamp(1.6rem,4.4vw,2.5rem);max-width:22ch;font-weight:700}
.hero p{color:rgba(255,255,255,.86);max-width:56ch}
.hero .hero-mark{position:absolute;right:-40px;bottom:-60px;width:320px;opacity:.09;filter:brightness(0) invert(1);pointer-events:none}
[data-theme="dark"] .hero{background:linear-gradient(135deg,#2A1B1A,#3C2523 60%,#4B2E2C)}
.hero .form-control{border:0;padding:.8rem 1rem}
.gold-rule{width:64px;height:3px;background:var(--sh-gold);border-radius:3px;margin:.75rem 0 1rem}

/* Cards */
.sh-card{background:var(--sh-surface);border:1px solid var(--sh-border);border-radius:var(--sh-radius);box-shadow:var(--sh-shadow)}
.sh-card-body{padding:1.15rem}
.card-title-row{display:flex;align-items:center;gap:.6rem;margin-bottom:.8rem}
.card-title-row h2,.card-title-row h3{font-size:1.05rem;margin:0}
.chip-icon{display:inline-flex;width:34px;height:34px;border-radius:10px;align-items:center;justify-content:center;background:var(--sh-soft);color:var(--sh-primary)}
.section-title{font-size:1.35rem;margin:0}
.section-head{display:flex;align-items:end;justify-content:space-between;gap:1rem;margin-bottom:1rem;flex-wrap:wrap}
.badge-soft{background:var(--sh-soft);color:var(--sh-primary);font-weight:600;border-radius:999px;padding:.3rem .65rem;font-size:.75rem}
.badge-gold{background:rgba(201,162,75,.18);color:var(--sh-gold-ink);font-weight:600;border-radius:999px;padding:.3rem .65rem;font-size:.75rem}

/* Prayer card */
.prayer-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem}
@media(min-width:576px){.prayer-grid{grid-template-columns:repeat(6,1fr)}}
.prayer-cell{background:var(--sh-surface-2);border:1px solid transparent;border-radius:12px;padding:.55rem .35rem;text-align:center}
.prayer-cell .n{font-size:.72rem;color:var(--sh-muted);text-transform:uppercase;letter-spacing:.04em;font-weight:600}
.prayer-cell .t{font-variant-numeric:tabular-nums;font-weight:700;font-size:1.02rem}
.prayer-cell.is-next{background:var(--sh-primary);color:#fff;border-color:var(--sh-primary)}
.prayer-cell.is-next .n{color:rgba(255,255,255,.8)}
[data-theme="dark"] .prayer-cell.is-next{color:#2B1F1E}[data-theme="dark"] .prayer-cell.is-next .n{color:#4a3735}
.countdown{font-variant-numeric:tabular-nums;font-weight:700;font-size:1.5rem;color:var(--sh-primary)}
.meta-line{color:var(--sh-muted);font-size:.85rem}
.stat-row{display:flex;justify-content:space-between;gap:1rem;padding:.5rem 0;border-bottom:1px dashed var(--sh-border)}
.stat-row:last-child{border-bottom:0}
.stat-row span:first-child{color:var(--sh-muted)}
.verse-box{border-inline-start:3px solid var(--sh-gold);padding-inline-start:1rem}

/* Scholar / book / media cards */
.scholar-card{display:flex;flex-direction:column;height:100%;overflow:hidden;transition:box-shadow .2s,transform .2s}
.scholar-card:hover{box-shadow:0 10px 28px rgba(59,33,32,.14);transform:translateY(-2px)}
.photo-box{aspect-ratio:1/1;background:var(--sh-soft);display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative;color:var(--sh-tint)}
.photo-box img{width:100%;height:100%;object-fit:cover}
.photo-box.cover{aspect-ratio:3/4}
.photo-box.wide{aspect-ratio:16/9}
.photo-box .icon{width:38%;height:38%}
.scholar-card .meta{display:flex;gap:.9rem;flex-wrap:wrap;color:var(--sh-muted);font-size:.82rem}
.scholar-card .meta span{display:inline-flex;align-items:center;gap:.3rem}
.card-link{color:inherit;text-decoration:none}
.card-link:hover{color:var(--sh-primary)}
.card-name{font-family:Lora,serif;font-weight:700;font-size:1.02rem;line-height:1.3}
.media-row{display:flex;gap:.75rem;padding:.65rem 0;border-bottom:1px solid var(--sh-border);align-items:center}
.media-row:last-child{border-bottom:0}
.media-row .thumb{width:64px;height:48px;border-radius:8px;overflow:hidden;background:var(--sh-soft);flex:none;display:flex;align-items:center;justify-content:center;color:var(--sh-tint)}
.media-row .thumb img{width:100%;height:100%;object-fit:cover}
.media-row .t{font-weight:600;font-size:.92rem;line-height:1.35;color:var(--sh-text);text-decoration:none}
.media-row .t:hover{color:var(--sh-primary)}
.video-embed{position:relative;aspect-ratio:16/9;border-radius:var(--sh-radius);overflow:hidden;background:#000}
.video-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.play-badge{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.play-badge span{width:46px;height:46px;border-radius:50%;background:rgba(95,54,52,.88);color:#fff;display:flex;align-items:center;justify-content:center}
.audio-item{display:flex;align-items:center;gap:1rem;padding:.9rem 1rem;border-bottom:1px solid var(--sh-border)}
.audio-item:last-child{border-bottom:0}
.audio-item .no{width:34px;height:34px;border-radius:50%;background:var(--sh-soft);color:var(--sh-primary);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.85rem;flex:none}
.prose{line-height:1.8;font-size:1.04rem}
.prose img{max-width:100%;height:auto;border-radius:10px}
.prose h2,.prose h3{margin-top:1.6rem}
.prose blockquote{border-inline-start:3px solid var(--sh-gold);padding:.25rem 1rem;color:var(--sh-muted)}
.share-bar{display:flex;gap:.5rem;flex-wrap:wrap}
.share-bar a,.share-bar button{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:10px;border:1px solid var(--sh-border);background:var(--sh-surface);color:var(--sh-text);cursor:pointer}
.share-bar a:hover,.share-bar button:hover{background:var(--sh-primary);color:#fff;border-color:var(--sh-primary)}
.breadcrumb-lite{font-size:.85rem;color:var(--sh-muted);margin-bottom:.75rem}
.stat-tile{background:var(--sh-surface-2);border-radius:12px;padding:.8rem 1rem}
.stat-tile .v{font-family:Lora,serif;font-size:1.5rem;font-weight:700;color:var(--sh-primary)}
.stat-tile .l{font-size:.78rem;color:var(--sh-muted);text-transform:uppercase;letter-spacing:.04em}
.empty-state{text-align:center;padding:2.5rem 1rem;color:var(--sh-muted)}
.empty-state .icon{width:2.4rem;height:2.4rem;color:var(--sh-tint);margin-bottom:.5rem}
.pagination{--bs-pagination-color:var(--sh-primary);--bs-pagination-active-bg:var(--sh-primary);--bs-pagination-active-border-color:var(--sh-primary);--bs-pagination-hover-color:var(--sh-primary-900);--bs-pagination-border-color:var(--sh-border);--bs-pagination-bg:var(--sh-surface);--bs-pagination-hover-bg:var(--sh-soft);--bs-pagination-focus-color:var(--sh-primary)}
.skeleton{background:linear-gradient(90deg,var(--sh-surface-2) 25%,var(--sh-soft) 37%,var(--sh-surface-2) 63%);background-size:400% 100%;animation:sk 1.3s ease infinite;border-radius:8px;min-height:1rem}
@keyframes sk{0%{background-position:100% 50%}100%{background-position:0 50%}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.alert{border-radius:12px}

/* Footer */
.site-footer{background:var(--sh-primary-900);color:#EADBD9;margin-top:3rem;position:relative}
[data-theme="dark"] .site-footer{background:#0F0A0A}
.site-footer a{color:#EADBD9;text-decoration:none}
.site-footer a:hover{color:#fff;text-decoration:underline}
.site-footer h3{color:#fff;font-size:1rem;font-family:Inter,sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.footer-logo{width:56px;filter:brightness(0) invert(1)}
.footer-bottom{border-top:1px solid rgba(255,255,255,.14);color:#CDB9B6;font-size:.85rem}
.site-footer .social a{display:inline-flex;width:38px;height:38px;border-radius:10px;border:1px solid rgba(255,255,255,.25);align-items:center;justify-content:center}
.site-footer .social a:hover{background:rgba(255,255,255,.12)}

/* Admin */
.admin-shell{display:flex;min-height:100vh}
.admin-side{width:250px;background:var(--sh-primary-900);color:#EADBD9;flex:none;display:none;padding:1rem .75rem;position:sticky;top:0;height:100vh;overflow:auto}
@media(min-width:992px){.admin-side{display:block}}
.admin-side a{display:flex;align-items:center;gap:.65rem;color:#EADBD9;text-decoration:none;padding:.55rem .75rem;border-radius:10px;font-size:.92rem}
.admin-side a:hover,.admin-side a.active{background:rgba(255,255,255,.12);color:#fff}
.admin-side .grp{font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;color:#B79D9A;margin:1rem .75rem .3rem}
.admin-main{flex:1;min-width:0}
.admin-top{background:var(--sh-surface);border-bottom:1px solid var(--sh-border);padding:.7rem 1rem;display:flex;align-items:center;gap:.75rem;position:sticky;top:0;z-index:20}
.table{--bs-table-bg:transparent;--bs-table-color:var(--sh-text);--bs-table-border-color:var(--sh-border)}
.table thead th{font-size:.75rem;text-transform:uppercase;letter-spacing:.05em;color:var(--sh-muted);white-space:nowrap}
.table-responsive{border-radius:var(--sh-radius)}
.status-pill{display:inline-block;padding:.15rem .55rem;border-radius:999px;font-size:.72rem;font-weight:700}
.status-published,.status-sent,.status-ok,.status-active{background:#E1F0E8;color:#1F5A3F}
.status-draft,.status-pending,.status-scheduled,.status-sending{background:#F6EBCB;color:#7A5C14}
.status-archived,.status-expired,.status-removed{background:#E9E3E2;color:#5b4a48}
.status-failed{background:#F6DADA;color:#8E2121}
[data-theme="dark"] .status-published,[data-theme="dark"] .status-sent,[data-theme="dark"] .status-ok,[data-theme="dark"] .status-active{background:#1D3A2D;color:#9fdcbc}
[data-theme="dark"] .status-draft,[data-theme="dark"] .status-pending,[data-theme="dark"] .status-scheduled,[data-theme="dark"] .status-sending{background:#3A3017;color:#EBCB77}
[data-theme="dark"] .status-archived,[data-theme="dark"] .status-expired,[data-theme="dark"] .status-removed{background:#332726;color:#C9B5B2}
[data-theme="dark"] .status-failed{background:#471C1C;color:#F2A9A9}
.bar{height:8px;border-radius:6px;background:var(--sh-surface-2);overflow:hidden}
.bar>i{display:block;height:100%;background:var(--sh-primary)}
.login-wrap{min-height:80vh;display:flex;align-items:center;justify-content:center;padding:2rem 1rem}
@media print{.site-header,.site-footer,.admin-side,.admin-top,.no-print{display:none!important}}

/* ---- Phone-friendly dashboard ---- */
.admin-top .admin-title{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.admin-top .btn{white-space:nowrap}
.admin-main main{min-width:0}
@media(max-width:767.98px){
  .admin-top{padding:.55rem .75rem;gap:.5rem}
  .admin-top .user-name,.admin-top .badge-soft{display:none}
  .table-stack{display:block}
  .table-stack thead{display:none}
  .table-stack tbody{display:block}
  .table-stack tr{display:block;padding:.7rem .9rem;border-bottom:1px solid var(--sh-border)}
  .table-stack tr:last-child{border-bottom:0}
  .table-stack td{display:flex;align-items:center;justify-content:space-between;gap:.9rem;padding:.28rem 0!important;border:0!important;text-align:right;min-width:0;word-break:break-word}
  .table-stack td::before{content:attr(data-label);flex:none;max-width:38%;font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--sh-muted);text-align:left}
  .table-stack td[data-label=""]::before,.table-stack td.no-label::before{content:none}
  .table-stack td[colspan]{display:block;text-align:left}
  .table-stack td[colspan]::before{content:none}
  .table-stack td.text-end{justify-content:flex-end}
  .table-stack td:first-child{justify-content:flex-start;text-align:left;font-size:1.02rem}
  .table-stack td:first-child::before{content:none}
  .admin-main .sh-card-body{padding:.9rem}
  .admin-main .btn{min-height:42px}
  .admin-main form.d-flex.gap-2{flex-wrap:wrap}
  .admin-main form.d-flex.gap-2 .form-control{flex:1 1 140px;min-width:0}
}
/* Upload dropzone */
.dropzone{border:2px dashed var(--sh-border);border-radius:var(--sh-radius);padding:1.6rem 1rem;text-align:center;background:var(--sh-surface-2);cursor:pointer;transition:border-color .15s,background .15s}
.dropzone:hover,.dropzone.is-over{border-color:var(--sh-primary);background:rgba(95,54,52,.06)}
.dropzone:focus-visible{outline:3px solid var(--sh-gold);outline-offset:2px}
.dropzone .dz-icon{width:40px;height:40px;color:var(--sh-primary)}
.up-item{border:1px solid var(--sh-border);border-radius:12px;padding:.7rem .85rem;margin-top:.6rem;background:var(--sh-surface)}
.up-item .up-name{font-weight:600;word-break:break-word}
.up-bar{height:8px;border-radius:99px;background:var(--sh-surface-2);overflow:hidden;margin-top:.45rem}
.up-bar>i{display:block;height:100%;width:0;background:var(--sh-primary);transition:width .15s}
.up-item.is-done .up-bar>i{background:#2e7d4f}.up-item.is-err .up-bar>i{background:#b3261e}
.up-msg{font-size:.82rem;color:var(--sh-muted);margin-top:.25rem}.up-item.is-err .up-msg{color:#b3261e}
.hero form .btn{white-space:nowrap;flex:none}.hero form .form-control{min-width:0}