/* DFVU identity: official website palette and locally hosted Montserrat. */
@font-face {
    font-family: 'Montserrat'; font-style: normal; font-weight: 100 900; font-display: swap;
    src: url('brand/montserrat-latin-ext.woff2') format('woff2');
    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: 'Montserrat'; font-style: normal; font-weight: 100 900; font-display: swap;
    src: url('brand/montserrat-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
    font-family: 'Montserrat'; font-style: italic; font-weight: 100 900; font-display: swap;
    src: url('brand/montserrat-italic-latin-ext.woff2') format('woff2');
    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: 'Montserrat'; font-style: italic; font-weight: 100 900; font-display: swap;
    src: url('brand/montserrat-italic-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
:root {
    --ink:#282835;
    --brand:#0060B8;
    --brand-yellow:#FFD721;
    --cream:#F4F4F4;
    --muted:#6B6B75;
    --line:#E1E4E9;
    --white:#fff;
    --accent:#EE834D;
    --danger:#b23e36;
    font-family:'Montserrat',Arial,Helvetica,sans-serif;
    color:var(--ink);
    background:var(--cream);
    font-size:14px
}
* {
    box-sizing:border-box
}
body {
    margin:0
}
button,input,select,textarea {
    font:inherit
}
button,a,input,textarea,select {
    -webkit-tap-highlight-color:transparent
}
button {
    cursor:pointer
}
a {
    color:inherit;
    text-decoration:none
}
button:disabled {
    opacity:.5;
    cursor:wait
}
button:focus-visible,a:focus-visible {
    outline:3px solid var(--accent);
    outline-offset:4px
}
input:focus,select:focus,textarea:focus {
    outline:2px solid #0060B8;
    outline-offset:1px
}
h1,h2,h3,p {
    margin-top:0
}
h1 {
    font-family:'Montserrat',Arial,sans-serif;
    letter-spacing:-1.8px;
    font-weight:400;
    font-size:48px;
    line-height:1.12;
    margin-bottom:14px
}
h2 {
    font-size:24px;
    letter-spacing:-.6px;
    font-weight:500
}
h3 {
    font-size:16px
}
p {
    line-height:1.6
}
small {
    font-size:12px
}
.muted {
    color:var(--muted)
}
.eyebrow {
    font-size:10px;
    letter-spacing:2px;
    font-weight:700;
    display:block;
    margin-bottom:16px
}
.button {
    border:1px solid transparent;
    border-radius:7px;
    padding:12px 18px;
    display:inline-flex;
    gap:9px;
    align-items:center;
    justify-content:center;
    font-size:12px;
    font-weight:600;
    transition:background .15s,transform .15s;
    white-space:nowrap
}
.button:hover {
    transform:translateY(-1px)
}
.primary {
    background:var(--brand);
    color:#fff
}
.primary:hover {
    background:#00519B
}
.secondary {
    background:#fff;
    border-color:var(--line);
    color:var(--ink)
}
.secondary:hover {
    background:#ecf0f3
}
.danger {
    background:var(--danger);
    color:white
}
.full {
    width:100%;
    justify-content:space-between
}
.brand {
    display:flex;
    align-items:center;
    gap:10px;
    font-weight:600;
    font-size:19px;
    letter-spacing:-.7px
}
.brand-mark {
    font-family:'Montserrat',Arial,sans-serif;
    font-size:31px;
    font-weight:400;
    display:grid;
    place-items:center;
    width:38px;
    height:38px;
    border:1px solid #ffffff35;
    border-radius:10px;
    background:#ffffff0b
}
.brand-dot {
    align-self:flex-start;
    font-size:10px;
    margin:7px 0 0 -7px
}
.app-layout {
    display:flex;
    min-height:100vh
}
.sidebar {
    width:240px;
    background:var(--brand);
    color:#FFFFFF;
    padding:31px 24px 0;
    position:fixed;
    inset:0 auto 0 0;
    display:flex;
    flex-direction:column
}
.nav-label {
    font-size:9px;
    letter-spacing:1.8px;
    color:#AFD3F5;
    margin-top:60px;
    margin-bottom:16px
}
.nav-item {
    display:flex;
    align-items:center;
    gap:12px;
    padding:14px 12px;
    font-size:12px;
    margin:0 -6px;
    border-radius:6px
}
.nav-item.selected {
    background:#ffffff10;
    border:1px solid #ffffff18
}
.nav-item>span:first-child {
    font-size:19px;
    color:#FFD721
}
.nav-arrow {
    margin-left:auto;
    color:#b3bdc5
}
.sidebar-note {
    border-top:1px solid #ffffff1c;
    margin-top:auto;
    padding:26px 5px 34px
}
.note-icon {
    font-family:'Montserrat',Arial,sans-serif;
    font-size:56px;
    line-height:1;
    color:var(--brand-yellow)
}
.sidebar-note h3 {
    font:26px/1.2 'Montserrat',Arial,sans-serif;
    margin-bottom:14px;
    letter-spacing:-.4px
}
.sidebar-note p {
    font-size:11px;
    color:#D1E5F8;
    line-height:1.8;
    margin:0
}
.sidebar-bottom {
    margin:0 -24px;
    background:#004B91;
    padding:20px 20px;
    display:flex;
    align-items:center;
    gap:11px
}
.avatar {
    width:33px;
    height:33px;
    border-radius:50%;
    background:#c9d6e1;
    display:inline-grid;
    place-items:center;
    font-size:10px;
    color:var(--brand);
    flex-shrink:0
}
.sidebar-bottom strong {
    font-size:11px;
    font-weight:500;
    display:block
}
.sidebar-bottom small {
    display:block;
    color:#AFD3F5;
    font-size:9px;
    margin-top:5px
}
.icon-button {
    border:0;
    background:none;
    color:inherit;
    font-size:23px;
    padding:4px 7px;
    border-radius:5px
}
.icon-button:hover {
    background:#ffffff15
}
.sidebar-bottom .icon-button {
    margin-left:auto
}
.main-wrap {
    margin-left:240px;
    flex:1;
    min-width:0
}
.topbar {
    height:77px;
    border-bottom:1px solid var(--line);
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 46px;
    background:#f9fbfc
}
.breadcrumbs {
    display:flex;
    gap:15px;
    font-size:11px;
    color:#848b90
}
.breadcrumbs strong {
    font-weight:500;
    color:var(--ink)
}
.topbar-meta {
    font-size:10px;
    color:#858c91;
    display:flex;
    align-items:center;
    gap:8px
}
.status-dot {
    width:5px;
    height:5px;
    border-radius:50%;
    background:#7491a8
}
.workspace {
    padding:46px 46px 0;
    max-width:1600px;
    margin:auto
}
.page-heading {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    margin-bottom:33px
}
.page-heading .muted {
    font-size:12px;
    margin:0
}
.heading-dot {
    color:var(--accent)
}
.library-toolbar {
    display:flex;
    align-items:center;
    gap:24px;
    margin-bottom:25px
}
.search-box {
    height:46px;
    display:flex;
    align-items:center;
    border:1px solid var(--line);
    border-radius:7px;
    background:#fff;
    max-width:550px;
    width:100%;
    padding:0 15px;
    gap:10px
}
.search-box>span {
    font-size:24px;
    line-height:1
}
.search-box input {
    border:0;
    padding:12px 0;
    flex:1;
    min-width:0;
    background:none;
    font-size:12px;
    color:var(--ink)
}
.search-box input:focus {
    outline:0
}
.search-box:focus-within {
    outline:2px solid #0060B8
}
.search-box kbd {
    font-size:11px;
    border:1px solid var(--line);
    padding:2px 5px;
    border-radius:3px;
    color:#9ea3a8
}
.library-toolbar>.muted {
    margin-left:auto;
    font-size:11px;
    white-space:nowrap
}
.product-grid {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:22px
}
.product-card {
    border:1px solid var(--line);
    border-radius:10px;
    background:white;
    overflow:hidden;
    transition:box-shadow .2s,border-color .2s;
    display:flex;
    flex-direction:column
}
.product-card:hover {
    border-color:#b2bcc4;
    box-shadow:0 7px 24px #0060B809
}
.product-visual {
    height:195px;
    background:#e7ecf0;
    position:relative;
    overflow:hidden
}
.product-visual img {
    width:100%;
    height:100%;
    object-fit:contain;
    mix-blend-mode:multiply;
    padding:12px;
    transition:transform .3s
}
.product-card:hover .product-visual img {
    transform:scale(1.035)
}
.sku-tag {
    position:absolute;
    top:13px;
    left:14px;
    border:1px solid #ffffff90;
    padding:5px 8px;
    border-radius:4px;
    background:#ffffffe0;
    color:#4e5861;
    font-size:9px;
    font-weight:700;
    letter-spacing:1px;
    text-transform:uppercase
}
.product-content {
    padding:20px 20px 18px;
    flex:1;
    display:flex;
    flex-direction:column
}
.product-content h2 {
    font:21px/1.18 'Montserrat',Arial,sans-serif;
    letter-spacing:-.4px;
    margin:0 0 9px;
    text-transform:capitalize
}
.product-description {
    font-size:11px;
    color:var(--muted);
    line-height:1.7;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
    min-height:37px;
    margin-bottom:22px
}
.card-stats {
    display:flex;
    gap:14px;
    font-size:10px;
    color:#7c8389;
    margin-top:auto
}
.card-stats strong {
    color:var(--ink);
    font-weight:500
}
.card-bottom {
    display:flex;
    justify-content:space-between;
    align-items:center;
    border-top:1px solid #e7ecf0;
    padding-top:14px;
    margin-top:17px
}
.card-bottom>span {
    font-size:9px;
    color:#8a9298
}
.open-product {
    border:0;
    padding:0;
    background:none;
    font-size:11px;
    font-weight:600;
    color:var(--brand);
    display:flex;
    align-items:center;
    gap:18px
}
.open-product span {
    font-size:18px;
    font-weight:400
}
.pagination {
    display:flex;
    justify-content:center;
    align-items:center;
    gap:20px;
    margin-top:28px
}
.pagination span {
    font-size:11px;
    color:var(--muted)
}
.pagination .button {
    padding:8px 12px
}
.workspace-footer {
    display:flex;
    justify-content:space-between;
    font-size:8px;
    letter-spacing:1.4px;
    color:#8e98a0;
    margin-top:50px;
    border-top:1px solid var(--line);
    padding:20px 0 24px
}
.workspace-footer span:last-child {
    letter-spacing:.2px
}
.empty-state {
    grid-column:1/-1;
    text-align:center;
    padding:65px 24px;
    border:1px dashed #c6ced5;
    border-radius:8px
}
.empty-state .empty-icon {
    font:50px 'Montserrat',Arial,sans-serif;
    color:#93a3b0;
    margin-bottom:12px
}
.empty-state h3 {
    font:26px 'Montserrat',Arial,sans-serif
}
.empty-state p {
    font-size:12px;
    color:var(--muted)
}
.back-link {
    border:0;
    padding:0;
    background:none;
    color:#788188;
    font-size:11px;
    margin-bottom:26px
}
.detail-heading {
    display:flex;
    align-items:center;
    gap:24px;
    margin-bottom:35px
}
.detail-image {
    height:130px;
    width:130px;
    border-radius:12px;
    object-fit:contain;
    background:#e2e9ee;
    padding:8px;
    flex-shrink:0
}
.detail-heading h1 {
    font-size:34px;
    margin-bottom:9px
}
.detail-heading p {
    font-size:12px;
    max-width:750px;
    margin:0
}
.detail-heading .eyebrow {
    margin-bottom:10px
}
.section-title {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:15px;
    margin-bottom:13px
}
.section-title h2 {
    font-size:17px;
    margin:0
}
.section-title h3 {
    margin:0;
    font-size:14px
}
.section-title>span {
    font-size:10px
}
.country-list {
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-bottom:35px
}
.country-button {
    border:1px solid var(--line);
    border-radius:6px;
    background:#fff;
    padding:10px 12px;
    display:flex;
    align-items:center;
    gap:8px;
    font-size:11px;
    color:#697279
}
.country-button.selected {
    background:var(--brand);
    border-color:var(--brand);
    color:#fff
}
.country-button strong {
    font-weight:500
}
.market-count {
    background:#e6ecf1;
    padding:2px 5px;
    border-radius:3px;
    font-size:9px;
    color:#586875
}
.selected .market-count {
    background:#ffffff20;
    color:#c4d7e7
}
.master-label {
    font-size:8px;
    text-transform:uppercase;
    letter-spacing:.6px
}
.reviews-heading {
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:23px
}
.reviews-heading .eyebrow {
    margin-bottom:9px
}
.reviews-heading h2 {
    margin-bottom:8px
}
.count-pill {
    font:11px Arial,sans-serif;
    border:1px solid var(--line);
    padding:3px 7px;
    border-radius:5px;
    vertical-align:middle;
    margin-left:5px
}
.text-link {
    font-size:11px;
    color:#657480;
    text-decoration:underline;
    text-underline-offset:4px
}
.inheritance {
    padding:20px;
    background:#dfe8f0;
    border:1px solid #c8d7e4;
    border-radius:8px;
    display:flex;
    align-items:center;
    gap:20px;
    margin-bottom:20px
}
.inheritance strong {
    font-size:12px
}
.inheritance p {
    font-size:11px;
    margin:6px 0 0;
    color:#677885
}
.inheritance .button {
    margin-left:auto
}
.review-list {
    display:grid;
    gap:14px
}
.review-card {
    padding:24px;
    border:1px solid var(--line);
    border-radius:9px;
    background:#fff
}
.review-card.inactive {
    background:#f7f9fa
}
.review-top {
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:15px
}
.review-person {
    display:flex;
    align-items:center;
    gap:11px
}
.review-person .avatar {
    width:37px;
    height:37px
}
.review-person strong {
    font-size:13px
}
.review-meta {
    font-size:10px;
    color:#848e96;
    margin-top:5px;
    display:flex;
    gap:9px;
    align-items:center
}
.badge {
    border-radius:3px;
    background:#dee7ef;
    color:#4a6881;
    font-size:9px;
    padding:3px 6px
}
.badge.inactive {
    background:#e8ebee;
    color:#868d93
}
.stars {
    color:#A47A00;
    letter-spacing:2px;
    font-size:14px
}
.rating-wrap {
    text-align:right
}
.rating-wrap small {
    display:block;
    font-size:9px;
    color:#8e98a1;
    margin-top:6px
}
.review-body {
    white-space:pre-wrap;
    overflow-wrap:anywhere;
    font-size:13px;
    line-height:1.8;
    margin:18px 0
}
.review-images {
    display:flex;
    flex-wrap:wrap;
    gap:8px
}
.review-images img {
    width:70px;
    height:70px;
    object-fit:cover;
    border-radius:6px;
    border:1px solid var(--line)
}
.review-bottom {
    display:flex;
    justify-content:space-between;
    gap:15px;
    align-items:center;
    border-top:1px solid #e8ecf0;
    padding-top:15px;
    margin-top:20px
}
.review-audit {
    font-size:9px;
    color:#8a949c
}
.review-actions {
    display:flex;
    gap:8px
}
.review-actions button {
    padding:7px 10px;
    border:1px solid var(--line);
    background:#fff;
    border-radius:4px;
    font-size:10px;
    color:var(--ink)
}
.review-actions .delete-review {
    color:var(--danger)
}
dialog {
    color:var(--ink);
    border:0;
    border-radius:12px;
    padding:0;
    box-shadow:0 25px 100px #002D5B40;
    max-height:92vh
}
dialog::backdrop {
    background:#002B5566;
    backdrop-filter:blur(3px)
}
.editor-dialog {
    width:min(660px,95vw)
}
.dialog-heading {
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:24px 28px;
    border-bottom:1px solid var(--line)
}
.dialog-heading .eyebrow {
    margin-bottom:7px;
    font-size:9px
}
.dialog-heading h2 {
    margin:0;
    font:29px 'Montserrat',Arial,sans-serif
}
.dialog-heading .icon-button {
    font-size:29px;
    color:var(--muted)
}
.dialog-body {
    padding:25px 28px
}
.dialog-body>label {
    margin-bottom:18px
}
.form-row {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px;
    margin-bottom:18px
}
label {
    font-size:12px;
    font-weight:500;
    display:block
}
label>input:not([type=checkbox]):not([type=file]),label>textarea,label>select {
    display:block;
    width:100%;
    border:1px solid #d6dde2;
    background:#fff;
    border-radius:6px;
    padding:11px 12px;
    color:var(--ink);
    margin-top:8px;
    font-size:13px
}
textarea {
    resize:vertical;
    line-height:1.6
}
input::placeholder,textarea::placeholder {
    color:#99a2aa
}
.required {
    color:var(--accent)
}
.optional {
    font-weight:400;
    color:#929da6;
    font-size:10px;
    margin-left:6px
}
.textarea-meta {
    display:flex;
    justify-content:space-between;
    margin-top:6px;
    color:#848e97;
    font-size:10px
}
.field-error,.error-text {
    color:var(--danger);
    font-size:11px;
    line-height:1.5;
    display:block;
    margin-top:5px
}
.field-error:empty,.error-text:empty {
    display:none
}
[aria-invalid=true] {
    border-color:var(--danger)!important
}
.switch-label {
    display:flex;
    gap:10px;
    align-items:center;
    padding:14px;
    background:#f0f4f7;
    border-radius:6px
}
.switch-label input {
    accent-color:var(--brand);
    width:18px;
    height:18px
}
.switch-label small {
    display:block;
    font-size:10px;
    color:#7f8b95;
    margin-top:4px
}
.image-section {
    margin-top:24px
}
.help-text {
    font-size:10px;
    color:var(--muted)
}
.upload-box {
    border:1px dashed #afbcc7;
    border-radius:6px;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:8px;
    padding:15px;
    color:#5f7281;
    font-size:11px;
    cursor:pointer
}
.upload-box input {
    font-size:11px;
    max-width:100%
}
.upload-box span {
    pointer-events:none
}
.editor-images {
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-bottom:12px
}
.editor-image {
    width:94px;
    border:1px solid var(--line);
    border-radius:6px;
    overflow:hidden;
    background:#f3f6f9
}
.editor-image img {
    width:100%;
    height:78px;
    object-fit:cover;
    display:block
}
.image-actions {
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:3px
}
.image-actions button {
    background:none;
    border:0;
    font-size:15px;
    color:var(--ink);
    padding:3px 5px
}
.image-actions .remove-image {
    color:var(--danger)
}
.dialog-footer {
    border-top:1px solid var(--line);
    padding:18px 28px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    background:#f6f8fa;
    gap:10px
}
.dialog-footer>span {
    font-size:10px
}
.dialog-footer>div {
    display:flex;
    gap:8px
}
.confirm-dialog {
    width:min(420px,94vw)
}
.confirm-dialog h2 {
    font:28px 'Montserrat',Arial,sans-serif
}
.confirm-dialog p {
    font-size:13px
}
.confirm-actions {
    display:flex;
    justify-content:flex-end;
    gap:9px;
    margin-top:25px
}
.preview-dialog {
    width:min(520px,94vw)
}
#preview-content {
    padding:28px
}
.preview-photos {
    display:flex;
    gap:10px;
    overflow-x:auto;
    margin:20px 0
}
.preview-photos img {
    max-width:220px;
    max-height:250px;
    object-fit:contain;
    border-radius:6px
}
.toast {
    position:fixed;
    bottom:25px;
    left:50%;
    transform:translateX(-50%);
    background:var(--brand);
    color:#fff;
    padding:14px 23px;
    max-width:min(600px,94vw);
    font-size:12px;
    border-radius:7px;
    box-shadow:0 8px 30px #0060B826;
    z-index:100
}
.toast.error {
    background:var(--danger)
}
[hidden] {
    display:none!important
}
.login-layout {
    min-height:100vh;
    display:grid;
    grid-template-columns:1.05fr 1fr
}
.login-story {
    background:var(--brand);
    color:#FFFFFF;
    padding:40px 10%;
    display:flex;
    flex-direction:column
}
.login-intro {
    margin:auto 0;
    padding:60px 0
}
.login-intro .eyebrow {
    color:#FFD721
}
.login-intro h1 {
    font-size:66px;
    line-height:1.03;
    margin:20px 0 24px
}
.login-intro>p {
    font-size:13px;
    color:#D1E5F8;
    max-width:300px
}
.story-card {
    padding:27px;
    background:#ffffff08;
    border:1px solid #ffffff15;
    border-radius:9px;
    margin-top:38px;
    max-width:350px;
    transform:rotate(-2deg)
}
.story-card .stars {
    color:#FFD721
}
.story-card blockquote {
    font:25px/1.35 'Montserrat',Arial,sans-serif;
    margin:19px 0 22px
}
.story-author {
    display:flex;
    align-items:center;
    gap:12px;
    font-size:10px
}
.story-author small {
    font-size:9px;
    color:#a8b2ba;
    line-height:2
}
.login-foot {
    color:#909eaa;
    font-size:10px;
    letter-spacing:1px
}
.login-form-wrap {
    display:grid;
    place-items:center;
    padding:40px
}
.login-form-inner {
    width:100%;
    max-width:330px
}
.login-form-inner h2 {
    font:42px 'Montserrat',Arial,sans-serif;
    letter-spacing:-1px;
    margin-bottom:12px
}
.login-form-inner>.muted {
    font-size:12px;
    margin-bottom:35px
}
.login-form-inner form label {
    margin-bottom:21px
}
.login-form-inner input {
    padding:14px!important
}
.login-form-inner .button {
    margin-top:8px;
    padding:14px 17px
}
.login-note {
    text-align:center;
    font-size:10px;
    color:#8c98a1;
    margin-top:26px;
    line-height:1.8
}
.loading {
    color:#84919b;
    text-align:center;
    padding:60px;
    grid-column:1/-1;
    font-size:12px
}
.loading:before {
    content:'◌';
    display:block;
    font-size:32px;
    margin-bottom:13px;
    animation:spin 2s linear infinite
}
@keyframes spin {
    to {
        transform:rotate(360deg)
    }
}
@media(min-width:1500px) {
    .product-grid {
        grid-template-columns:repeat(4,minmax(0,1fr))
    }
    .product-visual {
        height:215px
    }
}
@media(max-width:1100px) {
    .sidebar {
        width:205px;
        padding-left:18px;
        padding-right:18px
    }
    .brand {
        font-size:16px
    }
    .sidebar-bottom {
        margin:0 -18px;
        padding:18px 12px
    }
    .main-wrap {
        margin-left:205px
    }
    .workspace {
        padding:32px 27px 0
    }
    .topbar {
        padding:0 27px
    }
    .product-grid {
        grid-template-columns:repeat(2,minmax(0,1fr))
    }
    .topbar-meta {
        display:none
    }
    h1 {
        font-size:41px
    }
}
@media(max-width:700px) {
    .sidebar {
        position:static;
        width:100%;
        padding:13px 18px;
        flex-direction:row;
        align-items:center;
        justify-content:space-between
    }
    .sidebar .brand {
        font-size:17px
    }
    .sidebar .brand-mark {
        width:32px;
        height:32px;
        font-size:27px
    }
    .nav-label,.nav-item,.sidebar-note {
        display:none
    }
    .sidebar-bottom {
        margin:0;
        padding:0;
        background:none
    }
    .sidebar-bottom>.avatar,.sidebar-bottom>div {
        display:none
    }
    .app-layout {
        display:block
    }
    .main-wrap {
        margin:0
    }
    .topbar {
        height:49px;
        padding:0 20px
    }
    .workspace {
        padding:27px 20px 0
    }
    .page-heading {
        align-items:flex-start;
        gap:10px;
        margin-bottom:24px
    }
    .page-heading .eyebrow {
        font-size:8px;
        margin-bottom:10px
    }
    .page-heading .button {
        padding:10px;
        font-size:10px
    }
    h1 {
        font-size:36px
    }
    .page-heading .muted {
        font-size:11px
    }
    .library-toolbar {
        flex-wrap:wrap;
        gap:12px
    }
    .library-toolbar>.muted {
        margin:0
    }
    .product-grid {
        gap:14px
    }
    .product-visual {
        height:150px
    }
    .product-content {
        padding:15px
    }
    .product-content h2 {
        font-size:20px
    }
    .card-stats {
        gap:8px;
        font-size:9px
    }
    .card-bottom>span {
        display:none
    }
    .open-product {
        width:100%;
        justify-content:space-between
    }
    .workspace-footer {
        gap:18px;
        line-height:1.7;
        font-size:7px
    }
    .detail-heading {
        align-items:flex-start;
        gap:14px
    }
    .detail-image {
        width:80px;
        height:80px
    }
    .detail-heading h1 {
        font-size:27px
    }
    .detail-heading p {
        display:-webkit-box;
        -webkit-line-clamp:3;
        -webkit-box-orient:vertical;
        overflow:hidden;
        font-size:11px
    }
    .country-button {
        padding:9px
    }
    .reviews-heading h2 {
        font-size:21px
    }
    .reviews-heading .button {
        font-size:10px;
        padding:11px
    }
    .inheritance {
        flex-direction:column;
        align-items:flex-start;
        gap:12px
    }
    .inheritance .button {
        margin:0
    }
    .review-card {
        padding:18px
    }
    .review-bottom {
        align-items:flex-start;
        flex-direction:column
    }
    .dialog-heading,.dialog-body {
        padding:20px
    }
    .dialog-footer {
        padding:15px;
        flex-wrap:wrap
    }
    .dialog-footer .button {
        padding:10px
    }
    .form-row {
        gap:12px
    }
    .login-layout {
        grid-template-columns:1fr
    }
    .login-story {
        padding:24px 30px
    }
    .login-intro {
        padding:38px 0
    }
    .login-intro h1 {
        font-size:50px;
        margin:14px 0
    }
    .login-intro>p,.story-card,.login-foot {
        display:none
    }
    .login-form-wrap {
        padding:40px 28px
    }
    .login-form-inner h2 {
        font-size:34px
    }
}
@media(max-width:390px) {
    .product-grid {
        grid-template-columns:1fr
    }
    .product-visual {
        height:210px
    }
    .form-row {
        grid-template-columns:1fr
    }
    .page-heading h1 {
        font-size:30px
    }
}

.product-sku {
    font-size: 12px;
    font-weight: 600;
    color: var(--brand);
    overflow-wrap: anywhere;
    margin: 0 0 18px;
}
.detail-heading .product-sku {
    margin: 12px 0 0;
}
.review-heading-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}
.translation-dialog {
    width: min(720px, 95vw);
}
.translation-controls {
    display: flex;
    gap: 14px;
    align-items: flex-end;
    margin: 18px 0 12px;
}
.translation-controls label {
    flex: 1;
}
.translation-controls .button {
    margin-bottom: 1px;
}
.inheritance-note {
    padding: 12px 14px;
    background: #dfe8f0;
    border: 1px solid #c8d7e4;
    border-radius: 6px;
    font-size: 11px;
    color: #4f6373;
}
#translation-progress {
    font-size: 12px;
    line-height: 1.7;
}
.translation-draft {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--line);
}
.translation-draft h3 {
    margin-bottom: 10px;
}
.translation-original {
    margin-bottom: 14px;
    font-size: 12px;
    color: var(--muted);
}
.translation-original summary {
    cursor: pointer;
}
.translation-original p {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    padding: 10px 12px;
    background: var(--cream);
    border-radius: 5px;
    margin: 8px 0 0;
}
.translation-counter {
    display: block;
    margin-top: 6px;
    text-align: right;
    color: var(--muted);
    font-size: 10px;
}
@media (max-width: 700px) {
    .reviews-heading { gap: 12px; }
    .review-heading-actions { max-width: 150px; }
    .translation-controls { flex-wrap: wrap; }
    .translation-controls label { flex-basis: 100%; }
    .review-actions { flex-wrap: wrap; }
}

/* Branded components: bold typography, DFVU blue and yellow actions. */
h1, h2, h3 { font-weight: 700; }
h1 { font-weight: 800; letter-spacing: -1.7px; }
.heading-dot { color: var(--brand-yellow); }
.primary { background: var(--brand-yellow); color: #282835; border-color: var(--brand-yellow); }
.primary:hover { background: #F0C800; border-color: #F0C800; }
.danger, .danger:hover { background: var(--danger); border-color: var(--danger); color: #fff; }
.secondary { color: var(--brand); }
.secondary:hover { background: #EDF4FC; border-color: #A8CAE9; }
.required { color: var(--brand); }
button:focus-visible, a:focus-visible { outline-color: var(--brand); }
.sidebar button:focus-visible, .sidebar a:focus-visible, .login-story a:focus-visible { outline-color: var(--brand-yellow); }
.brand { gap: 12px; letter-spacing: 0; flex-shrink: 0; }
.brand-logo { width: 58px; height: 58px; object-fit: contain; flex-shrink: 0; }
.brand-copy { display: flex; flex-direction: column; gap: 7px; }
.brand-name { font-size: 28px; font-weight: 800; line-height: 1; letter-spacing: 1px; }
.brand-subtitle { color: var(--brand-yellow); font-size: 8px; font-weight: 600; letter-spacing: 2px; }
.sidebar { background: var(--brand); }
.nav-label { margin-top: 48px; color: #D1E5F8; }
.nav-item.selected { background: var(--brand-yellow); border-color: var(--brand-yellow); color: #004B91; font-weight: 700; }
.nav-item.selected > span:first-child, .nav-item.selected .nav-arrow { color: #004B91; }
.sidebar-note { border-color: #ffffff35; }
.sidebar-note h3 { font-size: 26px; font-weight: 800; font-style: italic; line-height: 1.25; }
.sidebar-note p { color: #D1E5F8; }
.sidebar-bottom { background: #004B91; }
.sidebar-bottom small { color: #BAD8F3; }
.sidebar-bottom .avatar { background: var(--brand-yellow); color: #004B91; font-weight: 700; }
.status-dot { background: var(--brand); }
.topbar { background: #fff; }
.breadcrumbs strong { font-weight: 600; }
.page-heading .eyebrow { color: var(--brand); }
.product-content h2 { font-size: 20px; line-height: 1.25; font-weight: 700; letter-spacing: -.6px; }
.product-visual { background: #F0F2F5; }
.sku-tag { color: #00519B; border-color: #FFFFFF; }
.product-card:hover { border-color: #8FBEE8; box-shadow: 0 8px 28px #0060B810; }
.open-product { color: var(--brand); font-weight: 700; }
.country-button.selected { background: var(--brand); border-color: var(--brand); }
.selected .market-count { background: var(--brand-yellow); color: #004B91; font-weight: 700; }
.master-label { color: inherit; }
.badge { background: #E6F1FC; color: #00519B; }
.badge.inactive { background: #ECEEF1; color: #71717B; }
.review-actions button { color: #00519B; }
.review-actions .delete-review { color: var(--danger); }
.inheritance, .inheritance-note { background: #FFF9DE; border-color: #F1DF8D; }
.inheritance strong { color: #6B5600; }
.inheritance p, .inheritance-note { color: #756620; }
.dialog-heading h2, .confirm-dialog h2 { font-size: 26px; font-weight: 700; line-height: 1.25; }
.dialog-heading .eyebrow { color: var(--brand); }
.dialog-footer { background: #F4F6F9; }
.workspace-footer { color: #767681; }
.workspace-footer a:hover { color: var(--brand); }
.login-story {
    background: linear-gradient(150deg, #0060B8E8, #003F83EC), url('brand/dfvu-login-background.jpg') center / cover;
    color: #fff;
}
.login-story .brand-logo { width: 72px; height: 72px; }
.login-story .brand-name { font-size: 32px; }
.login-intro { padding: 42px 0; }
.login-intro .eyebrow { color: var(--brand-yellow); }
.login-intro h1 { font-size: clamp(44px, 5.1vw, 72px); font-weight: 800; font-style: italic; line-height: 1.03; letter-spacing: -2px; }
.login-intro h1 span { color: var(--brand-yellow); }
.login-intro > p { color: #E4EFFB; font-size: 13px; max-width: 350px; }
.story-card { transform: none; border-color: #FFFFFF3D; background: #FFFFFF0F; margin-top: 28px; }
.story-card .stars { color: var(--brand-yellow); }
.story-card blockquote { font-weight: 700; font-style: italic; font-size: 25px; }
.story-author .brand-logo { width: 34px; height: 34px; }
.story-author small { color: #D1E5F8; }
.login-foot { color: #D1E5F8; letter-spacing: 1px; font-size: 9px; }
.login-form-inner > .eyebrow { color: var(--brand); }
.login-form-inner h2 { font-size: 37px; font-weight: 800; line-height: 1.15; letter-spacing: -1.5px; }
.login-form-wrap { background: #F4F4F4; }
.login-note { color: #74747E; }
@media (max-width: 1100px) {
    .sidebar .brand { gap: 9px; }
    .sidebar .brand-logo { width: 46px; height: 46px; }
    .sidebar .brand-name { font-size: 24px; }
    .sidebar .brand-subtitle { font-size: 7px; letter-spacing: 1.6px; }
}
@media (max-width: 700px) {
    .sidebar .brand-logo { width: 38px; height: 38px; }
    .sidebar .brand-name { font-size: 22px; }
    .sidebar .brand-copy { gap: 4px; }
    .sidebar .brand-subtitle { font-size: 7px; }
    .login-story .brand-logo { width: 50px; height: 50px; }
    .login-story .brand-name { font-size: 27px; }
    .login-intro { padding: 32px 0 15px; }
    .login-intro h1 { font-size: 48px; }
    .login-form-inner h2 { font-size: 32px; }
    .dialog-heading h2 { font-size: 23px; }
    .page-heading .eyebrow { font-size: 8px; letter-spacing: 1.3px; }
}