:root {
  --navy: #171918;
  --navy-2: #202321;
  --blue: #93c01f;
  --blue-dark: #7da51a;
  --blue-soft: #f2f8e5;
  --orange: #d88a16;
  --green: #93c01f;
  --red: #da4d4d;
  --ink: #171918;
  --muted: #717672;
  --line: #e2e4df;
  --surface: #ffffff;
  --canvas: #f3f4f2;
  --shadow: 0 10px 30px rgba(23, 25, 24, .08);
  --radius: 16px;
  --sidebar: 244px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@font-face { font-family: "Geist"; src: url("/assets/fonts/geist.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
body { margin: 0; color: var(--ink); background: var(--canvas); font-family: "Geist", "Segoe UI", "Microsoft YaHei", sans-serif; -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; }
button { color: inherit; }
button, [data-product], .brand-library-card { cursor: pointer; }
.is-hidden { display: none !important; }

.login-screen { min-height: 100vh; display: grid; grid-template-columns: minmax(520px, 1.15fr) minmax(460px, .85fr); background: #fff; }
.login-story { position: relative; overflow: hidden; color: white; min-height: 720px; padding: 52px 64px; background: radial-gradient(circle at 70% 32%, #1f5c98 0, transparent 32%), linear-gradient(145deg, #0b1d34 0%, #123657 58%, #0c223e 100%); }
.login-grid { position: absolute; inset: 0; opacity: .18; background-image: linear-gradient(rgba(255,255,255,.09) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.09) 1px, transparent 1px); background-size: 64px 64px; mask-image: linear-gradient(90deg, #000, transparent); }
.brand-lockup { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 11px; color: var(--navy); text-align: left; }
.brand-lockup--light { color: white; }
.brand-mark { display: grid; width: 36px; height: 42px; place-items: center; color: white; font-weight: 900; font-size: 22px; transform: skew(-8deg); border-radius: 5px; background: var(--blue); }
.brand-lockup strong, .brand-lockup small { display: block; }
.brand-lockup strong { font-size: 20px; letter-spacing: 1.3px; line-height: 1.05; }
.brand-lockup small { margin-top: 3px; font-size: 7.5px; letter-spacing: 1.8px; opacity: .72; }
.login-copy { position: relative; z-index: 2; max-width: 660px; margin-top: clamp(130px, 20vh, 210px); }
.eyebrow { display: inline-flex; align-items: center; color: var(--blue); font-size: 11px; font-weight: 800; letter-spacing: 2.2px; }
.eyebrow::before { width: 26px; height: 2px; margin-right: 10px; background: currentColor; content: ""; }
.eyebrow--light { color: #65adff; }
.login-copy h1 { margin: 24px 0 22px; font-size: clamp(42px, 4.3vw, 68px); line-height: 1.2; letter-spacing: -2px; }
.login-copy > p { max-width: 570px; margin: 0; color: #b8c9dc; font-size: 17px; line-height: 1.9; }
.login-proof { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; max-width: 610px; margin-top: 64px; border-top: 1px solid rgba(255,255,255,.13); }
.login-proof div { padding: 25px 20px 0 0; }
.login-proof strong, .login-proof span { display: block; }
.login-proof strong { color: #4ba0ff; font-size: 12px; letter-spacing: 1px; }
.login-proof span { margin-top: 10px; color: #e0ebf7; font-size: 13px; }
.login-orbit { position: absolute; border: 1px solid rgba(93,172,255,.2); border-radius: 50%; }
.login-orbit--one { width: 520px; height: 520px; right: -250px; bottom: -165px; }
.login-orbit--two { width: 700px; height: 700px; right: -370px; bottom: -270px; }
.login-panel { display: grid; place-items: center; padding: 60px; }
.login-form-wrap { width: min(410px, 100%); }
.mobile-brand { display: none; margin-bottom: 60px; }
.login-form-wrap h2 { margin: 20px 0 12px; color: var(--navy); font-size: 34px; letter-spacing: -.7px; }
.login-help { margin: 0 0 38px; color: var(--muted); font-size: 14px; }
.field-label { display: block; margin-bottom: 9px; font-size: 12px; font-weight: 700; }
.input-shell { display: flex; align-items: center; min-height: 50px; border: 1px solid #d9e0e8; border-radius: 9px; background: #fff; transition: .2s; }
.input-shell:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(20,104,229,.1); }
.input-icon { display: grid; width: 48px; place-items: center; color: #8a97a8; font-weight: 700; }
.input-shell input { flex: 1; min-width: 0; padding: 13px 14px 13px 0; border: 0; outline: 0; color: var(--ink); background: transparent; }
.button { display: inline-flex; min-height: 40px; align-items: center; justify-content: center; gap: 8px; padding: 0 16px; border: 1px solid transparent; border-radius: 8px; font-size: 13px; font-weight: 700; transition: .18s ease; }
.button:hover { transform: translateY(-1px); }
.button--primary { color: white; background: var(--blue); box-shadow: 0 6px 16px rgba(20,104,229,.18); }
.button--primary:hover { background: var(--blue-dark); }
.button--wecom { color: white; background: #07c160; box-shadow: 0 6px 16px rgba(7,193,96,.2); text-decoration: none; }
.button--wecom:hover { background: #05ad56; }
.wecom-mark { display: grid; width: 24px; height: 24px; place-items: center; border-radius: 7px; color: #07a94f; background: white; font-size: 11px; }
.button--dark { color: white; background: var(--navy); }
.button--soft { color: #35445a; border-color: #dfe5ec; background: white; }
.button--soft:hover { border-color: #b9c6d5; background: #fafcff; }
.button--danger { color: #b73939; border-color: #f0caca; background: #fff7f7; }
.button--danger:hover { color: white; border-color: #c74343; background: #c74343; }
.button--light { color: var(--navy); background: white; }
.button--wide { width: 100%; margin-top: 22px; min-height: 50px; }
.secure-note { display: flex; align-items: center; justify-content: center; gap: 7px; margin: 20px 0 0; color: #66768a; font-size: 11px; }
.secure-note span { color: var(--green); }
.login-footer { margin: 80px 0 0; padding-top: 20px; border-top: 1px solid var(--line); color: #8a96a6; text-align: center; font-size: 11px; }

.app-shell { min-height: 100vh; }
.sidebar { position: fixed; z-index: 30; inset: 0 auto 0 0; display: flex; width: var(--sidebar); flex-direction: column; padding: 28px 18px 18px; color: #cad7e5; background: var(--navy); box-shadow: 4px 0 30px rgba(12,28,49,.12); }
.sidebar-head { display: flex; align-items: center; justify-content: space-between; padding: 0 10px 28px; }
.sidebar .brand-lockup strong { font-size: 17px; }
.sidebar .brand-mark { width: 31px; height: 37px; font-size: 19px; }
.sidebar-close { display: none; color: white !important; }
.main-nav { flex: 1; overflow-y: auto; }
.nav-item { position: relative; display: flex; width: 100%; min-height: 44px; align-items: center; gap: 12px; margin: 3px 0; padding: 0 11px; color: #adbed0; border: 0; border-radius: 8px; background: transparent; text-align: left; font-size: 13px; transition: .18s; }
.nav-item:hover { color: white; background: rgba(255,255,255,.06); }
.nav-item.is-active { color: white; background: var(--blue); box-shadow: 0 7px 17px rgba(4,40,91,.36); }
.nav-icon { display: grid; width: 18px; place-items: center; color: #86a2bd; font-size: 18px; }
.nav-item.is-active .nav-icon { color: white; }
.nav-count, .nav-alert { margin-left: auto; min-width: 22px; padding: 2px 6px; border-radius: 10px; color: #9fb3c7; background: rgba(255,255,255,.06); font-size: 10px; text-align: center; }
.nav-item.is-active .nav-count { color: white; background: rgba(255,255,255,.18); }
.nav-alert { color: #ffd08a; background: rgba(245,166,35,.13); }
.nav-label { margin: 25px 11px 8px; color: #637b93; font-size: 9px; font-weight: 800; letter-spacing: 1.8px; text-transform: uppercase; }
.storage-card { margin: 12px 3px 16px; padding: 15px; border: 1px solid rgba(255,255,255,.08); border-radius: 10px; background: rgba(255,255,255,.035); }
.storage-head { display: flex; align-items: center; justify-content: space-between; color: #bfcede; font-size: 10px; }
.storage-head strong { color: #e9f3fc; }
.progress { height: 4px; margin: 10px 0 7px; overflow: hidden; border-radius: 5px; background: rgba(255,255,255,.1); }
.progress span { display: block; height: 100%; border-radius: inherit; background: #4a9cff; }
.storage-card small { color: #6f879e; font-size: 9px; }
.user-mini { display: flex; align-items: center; gap: 10px; padding: 12px 8px 3px; border: 0; border-top: 1px solid rgba(255,255,255,.08); color: white; background: transparent; text-align: left; }
.avatar { display: grid; width: 32px; height: 32px; flex: 0 0 32px; place-items: center; border-radius: 50%; color: white; background: #2b78d8; font-size: 10px; font-weight: 800; }
.user-mini-copy { min-width: 0; flex: 1; }
.user-mini-copy strong, .user-mini-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-mini-copy strong { font-size: 11px; }
.user-mini-copy small { margin-top: 3px; color: #7890a6; font-size: 8px; }
.more { color: #7890a6; font-size: 10px; letter-spacing: 1px; }

.main-frame { min-width: 0; margin-left: var(--sidebar); }
.topbar { position: sticky; z-index: 20; top: 0; display: flex; min-height: 84px; align-items: center; justify-content: space-between; gap: 25px; padding: 14px 36px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.94); backdrop-filter: blur(12px); }
.topbar-title-row { display: flex; min-width: 0; align-items: center; gap: 12px; }
.breadcrumb { color: #8794a5; font-size: 9px; }
.topbar h1 { margin: 4px 0 0; color: var(--navy); font-size: 19px; line-height: 1.2; }
.topbar-actions { display: flex; align-items: center; gap: 10px; }
.global-search { display: flex; width: 300px; height: 40px; align-items: center; gap: 8px; padding: 0 10px; border: 1px solid #e0e6ed; border-radius: 8px; background: #f8fafc; }
.global-search > span { color: #8795a6; font-size: 20px; transform: rotate(-20deg); }
.global-search input { min-width: 0; flex: 1; border: 0; outline: 0; background: transparent; font-size: 11px; }
.global-search kbd { padding: 3px 6px; border: 1px solid #dce2e9; border-radius: 5px; color: #8996a5; background: #fff; font-size: 8px; box-shadow: 0 1px 1px rgba(0,0,0,.03); }
.icon-button { position: relative; display: grid; width: 38px; height: 38px; place-items: center; border: 0; border-radius: 8px; color: #66778b; background: transparent; font-size: 20px; }
.sidebar .sidebar-close { display: none; }
.notification-button { border: 1px solid #e2e7ed; background: white; }
.notification-button i { position: absolute; width: 6px; height: 6px; top: 7px; right: 7px; border: 1px solid white; border-radius: 50%; background: var(--orange); }
.mobile-menu { display: none; }
.content-area { max-width: 1600px; margin: 0 auto; padding: 32px 36px 60px; }
.view { display: none; animation: fade .25s ease; }
.view.is-active { display: block; }
@keyframes fade { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }

.welcome-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 25px; margin: 2px 0 28px; }
.welcome-row h2 { margin: 8px 0 5px; color: var(--navy); font-size: 29px; }
.welcome-row p { margin: 0; color: var(--muted); font-size: 12px; }
.welcome-actions { display: flex; gap: 9px; }
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.stat-card { position: relative; display: flex; min-height: 130px; align-items: center; gap: 15px; padding: 22px 18px; border: 1px solid #e6ebf1; border-radius: 12px; background: white; box-shadow: 0 3px 12px rgba(26,45,73,.025); }
.stat-card--warning { border-color: #f1dfbf; background: #fffdf8; }
.stat-icon { display: grid; width: 46px; height: 46px; flex: 0 0 46px; place-items: center; border-radius: 11px; font-size: 19px; font-weight: 700; }
.stat-icon--blue { color: var(--blue); background: #eaf3ff; }
.stat-icon--navy { color: var(--navy); background: #edf1f5; }
.stat-icon--green { color: var(--green); background: #eaf8f3; }
.stat-icon--orange { color: #d88a0c; background: #fff2da; }
.stat-card div:nth-child(2) > span, .stat-card div:nth-child(2) > strong, .stat-card div:nth-child(2) > small { display: block; }
.stat-card div:nth-child(2) > span { color: #738195; font-size: 10px; }
.stat-card div:nth-child(2) > strong { margin: 4px 0 5px; color: var(--navy); font-size: 27px; }
.stat-card div:nth-child(2) > small { color: #8a96a6; font-size: 9px; }
.stat-card small b { color: var(--green); font-weight: 700; }
.stat-card > button { position: absolute; top: 13px; right: 13px; border: 0; color: #9aa7b6; background: transparent; }
.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(280px, .75fr); gap: 14px; margin-top: 14px; }
.panel { border: 1px solid #e6ebf1; border-radius: 12px; background: white; box-shadow: 0 3px 14px rgba(26,45,73,.025); }
.panel-head { display: flex; min-height: 74px; align-items: center; justify-content: space-between; gap: 15px; padding: 15px 20px; border-bottom: 1px solid #edf0f4; }
.panel-kicker { display: block; margin-bottom: 5px; color: #96a2b0; font-size: 8px; font-weight: 800; letter-spacing: 1.4px; }
.panel-head h3 { margin: 0; color: var(--navy); font-size: 15px; }
.text-button, .row-more { border: 0; color: var(--blue); background: transparent; font-size: 10px; font-weight: 700; }
.row-more { color: #94a0ae; letter-spacing: 1px; }
.activity-item { display: grid; grid-template-columns: 48px minmax(170px, 1fr) auto 105px 20px; min-height: 76px; align-items: center; gap: 12px; padding: 10px 18px; border-bottom: 1px solid #f0f2f5; }
.activity-item:last-child { border-bottom: 0; }
.file-thumb { position: relative; display: grid; width: 45px; height: 45px; place-items: center; overflow: hidden; border-radius: 8px; color: white; background: #e7edf5; font-size: 9px; font-weight: 900; }
.file-thumb--glove { background: linear-gradient(135deg, #172a42, #1b6dd2); }
.file-thumb--glove::after { position: absolute; width: 22px; height: 32px; right: -4px; bottom: -6px; border-radius: 12px 12px 5px 5px; background: #f3b01d; content: ""; transform: rotate(-18deg); }
.file-thumb--blue { background: linear-gradient(135deg, #0b5dcc, #61b1ff); }
.file-thumb--dark { background: linear-gradient(135deg, #121e2e, #5d6c81); }
.file-thumb--orange { background: linear-gradient(135deg, #ef8f17, #ffcb66); }
.activity-main strong, .activity-main span, .activity-meta strong, .activity-meta span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.activity-main strong { font-size: 11px; }
.activity-main span, .activity-meta span { margin-top: 5px; color: #8d99a9; font-size: 8.5px; }
.activity-meta strong { font-size: 9.5px; }
.version-tag { padding: 4px 7px; border-radius: 5px; color: #7e8b9a; background: #f0f3f6; font-size: 8px; font-weight: 700; }
.version-tag--current { color: #0f66d8; background: #e9f3ff; }
.completion-panel { padding-bottom: 15px; }
.completion-chart { display: flex; align-items: center; justify-content: center; gap: 25px; padding: 23px 20px 15px; }
.ring { display: grid; width: 112px; height: 112px; place-items: center; border-radius: 50%; background: conic-gradient(var(--blue) 0 86%, #e9eef4 86% 100%); }
.ring::before { position: absolute; width: 82px; height: 82px; border-radius: 50%; background: white; content: ""; }
.ring span { position: relative; text-align: center; }
.ring strong, .ring small { display: block; }
.ring strong { color: var(--navy); font-size: 21px; }
.ring small { margin-top: 3px; color: #8996a6; font-size: 7px; }
.legend { display: grid; gap: 9px; min-width: 110px; }
.legend span { display: grid; grid-template-columns: 8px 1fr auto; align-items: center; gap: 7px; color: #758397; font-size: 8.5px; }
.legend strong { color: #38475a; }
.dot { width: 6px; height: 6px; border-radius: 50%; }
.dot--blue { background: var(--blue); }.dot--light { background: #d7e0ea; }.dot--orange { background: var(--orange); }
.coverage-list { display: grid; gap: 13px; padding: 10px 20px; }
.coverage-list div { display: grid; grid-template-columns: 1fr auto; gap: 6px 10px; color: #667589; font-size: 9px; }
.coverage-list strong { color: #344459; font-size: 9px; }
.coverage-list i { grid-column: 1 / -1; height: 4px; overflow: hidden; border-radius: 3px; background: #edf1f5; }
.coverage-list b { display: block; height: 100%; border-radius: inherit; background: var(--blue); }
.product-strip-panel { margin-top: 14px; }
.product-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; }
.mini-product { display: grid; grid-template-columns: 52px 1fr auto; align-items: center; gap: 12px; min-height: 92px; padding: 16px 18px; border: 0; border-right: 1px solid #edf0f4; background: white; text-align: left; }
.mini-product:last-child { border-right: 0; }
.mini-product:hover { background: #fafcff; }
.mini-product-image { display: grid; width: 52px; height: 58px; place-items: center; border-radius: 8px; color: white; font-weight: 900; }
.mini-product-image--one { background: linear-gradient(145deg, #0d3660, #1b70cd); }.mini-product-image--two { background: linear-gradient(145deg, #923c1c, #e79c1d); }.mini-product-image--three { background: linear-gradient(145deg, #101d2d, #425d75); }.mini-product-image--four { background: linear-gradient(145deg, #4d5964, #89949f); }
.mini-product strong, .mini-product small { display: block; }
.mini-product strong { font-size: 11px; }.mini-product small { margin-top: 5px; color: #8a96a5; font-size: 8px; }.mini-product i { color: var(--green); font-size: 9px; font-style: normal; font-weight: 700; }

.section-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.filter-search { display: flex; width: min(420px, 42vw); min-height: 42px; align-items: center; gap: 8px; padding: 0 13px; border: 1px solid #dfe5ec; border-radius: 8px; background: white; }
.filter-search span { color: #8996a5; font-size: 18px; }.filter-search input { width: 100%; border: 0; outline: 0; background: transparent; font-size: 11px; }
.toolbar-right { display: flex; gap: 8px; }
.filter-badge { display: inline-grid; min-width: 17px; height: 17px; place-items: center; border-radius: 9px; color: white; background: var(--blue); font-size: 8px; }
.filter-pills { display: flex; gap: 6px; margin-bottom: 20px; overflow-x: auto; padding-bottom: 2px; }
.filter-pills button, .channel-tabs button, .region-switch button { white-space: nowrap; border: 0; color: #67768a; background: transparent; }
.filter-pills button { padding: 8px 12px; border-radius: 7px; font-size: 10px; }
.filter-pills button span { margin-left: 5px; color: #9ba6b4; }
.filter-pills button.is-active { color: var(--blue); background: var(--blue-soft); font-weight: 700; }
.filter-pills button.is-active span { color: var(--blue); }
.protection-filter { display: flex; min-height: 40px; align-items: center; gap: 7px; padding: 0 11px; border: 1px solid #dfe5ec; border-radius: 8px; background: white; }
.protection-filter > span { color: #88958b; font-size: 13px; }
.protection-filter select { min-width: 190px; border: 0; outline: 0; color: #35445a; background: transparent; font-size: 11px; }
.product-filter-summary { display: flex; align-items: center; justify-content: space-between; margin: -5px 0 18px; color: #879087; font-size: 9px; }
.product-filter-summary strong { color: #4e584f; }
.product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 17px; }
.product-card { overflow: hidden; border: 1px solid #e2e8ef; border-radius: 13px; background: white; box-shadow: 0 4px 18px rgba(31,51,79,.035); transition: .2s; }
.product-card:hover { transform: translateY(-3px); border-color: #bfd1e8; box-shadow: var(--shadow); }
.product-card-image { position: relative; display: grid; height: 190px; place-items: center; overflow: hidden; }
.product-card-image::before { position: absolute; width: 145px; height: 145px; border: 1px solid rgba(255,255,255,.16); border-radius: 50%; content: ""; }
.product-card-image::after { position: absolute; width: 215px; height: 215px; border: 1px solid rgba(255,255,255,.1); border-radius: 50%; content: ""; }
.product-card-image--blue { background: radial-gradient(circle at 30% 20%, #2f84db, transparent 30%), linear-gradient(140deg, #0c253e, #155b9f); }.product-card-image--orange { background: radial-gradient(circle at 30% 20%, #f5bd51, transparent 30%), linear-gradient(140deg, #672a19, #cc7617); }.product-card-image--navy { background: radial-gradient(circle at 30% 20%, #4f708c, transparent 30%), linear-gradient(140deg, #0d1725, #33485f); }.product-card-image--gray { background: radial-gradient(circle at 30% 20%, #b7c0ca, transparent 30%), linear-gradient(140deg, #3d4650, #7f8a95); }.product-card-image--green { background: radial-gradient(circle at 30% 20%, #45b58e, transparent 30%), linear-gradient(140deg, #134738, #26785f); }
.sku-corner { position: absolute; z-index: 2; top: 16px; left: 17px; color: rgba(255,255,255,.8); font-size: 10px; font-weight: 800; letter-spacing: 1.4px; }
.glove-illustration { position: relative; z-index: 1; display: grid; width: 74px; height: 112px; place-items: center; border: 3px solid rgba(255,255,255,.85); border-radius: 29px 29px 17px 17px; color: var(--navy); background: linear-gradient(135deg, #f8bd31, #d99008); font-size: 25px; font-weight: 900; transform: rotate(-12deg); box-shadow: 0 15px 20px rgba(0,0,0,.22); }
.glove-illustration::before { position: absolute; width: 24px; height: 61px; left: -20px; bottom: 24px; border: 3px solid rgba(255,255,255,.85); border-right: 0; border-radius: 20px 0 0 16px; background: #e8a916; content: ""; transform: rotate(-12deg); }
.glove-illustration::after { position: absolute; width: 70px; height: 19px; left: -1px; bottom: -4px; border-radius: 4px 4px 10px 10px; background: #183854; content: "SCHWER"; color: white; font-size: 7px; line-height: 19px; text-align: center; letter-spacing: 1px; }
.updated-dot { position: absolute; z-index: 2; right: 14px; bottom: 13px; padding: 5px 8px; border-radius: 10px; color: white; background: rgba(12,28,49,.48); backdrop-filter: blur(8px); font-size: 8px; }
.product-card-body { padding: 17px; }
.product-card-title { display: flex; justify-content: space-between; gap: 10px; }.product-card-title h3 { margin: 0; color: var(--navy); font-size: 17px; }.product-card-title p { margin: 5px 0 0; color: #7c899a; font-size: 10px; }
.coverage-bar { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; margin: 17px 0 13px; }.coverage-bar > span { height: 4px; overflow: hidden; border-radius: 4px; background: #e9edf2; }.coverage-bar b { display: block; height: 100%; border-radius: inherit; background: var(--blue); }.coverage-bar strong { color: var(--green); font-size: 9px; }
.channel-tags { display: flex; align-items: center; gap: 5px; }.channel-tags span, .channel-tags i { padding: 4px 7px; border-radius: 4px; color: #66778c; background: #f0f3f6; font-size: 8px; font-style: normal; }.channel-tags i { color: var(--blue); background: var(--blue-soft); }
.product-card-foot { display: flex; justify-content: space-between; gap: 10px; margin-top: 15px; padding-top: 12px; border-top: 1px solid #edf0f4; color: #929dab; font-size: 8px; }
.product-card--new { display: grid; min-height: 370px; place-items: center; border: 1px dashed #cdd7e2; background: transparent; box-shadow: none; text-align: center; }.product-card--new:hover { border-color: var(--blue); background: rgba(255,255,255,.55); }.product-card--new > div > span { display: grid; width: 52px; height: 52px; margin: 0 auto 15px; place-items: center; border-radius: 50%; color: var(--blue); background: white; box-shadow: 0 4px 16px rgba(30,52,82,.08); font-size: 25px; }.product-card--new h3 { margin: 0; font-size: 14px; }.product-card--new p { margin: 8px 0 18px; color: var(--muted); font-size: 9px; }

.back-button { margin-bottom: 15px; padding: 0; border: 0; color: #6d7c8f; background: transparent; font-size: 10px; }
.product-hero { display: grid; grid-template-columns: 130px 1fr auto; align-items: center; gap: 22px; padding: 22px; border: 1px solid #e4e9ef; border-radius: 12px; background: white; }
.product-hero-image { display: grid; height: 118px; place-items: center; overflow: hidden; border-radius: 9px; background: linear-gradient(145deg, #10243f, #1665ae); }.glove-illustration--large { width: 54px; height: 82px; border-width: 2px; font-size: 18px; }.glove-illustration--large::before { width: 18px; height: 44px; left: -16px; border-width: 2px; }.glove-illustration--large::after { width: 51px; height: 14px; font-size: 5px; line-height: 14px; }
.series-tag { display: inline-block; padding: 4px 7px; border-radius: 4px; color: var(--blue); background: var(--blue-soft); font-size: 8px; font-weight: 700; }
.product-hero-copy h2 { margin: 8px 0 2px; color: var(--navy); font-size: 25px; }.product-hero-copy > p { margin: 0; color: #738195; font-size: 11px; }
.product-meta { display: flex; gap: 38px; margin-top: 17px; }.product-meta span small, .product-meta span strong { display: block; }.product-meta small { color: #98a2af; font-size: 7.5px; }.product-meta strong { margin-top: 4px; color: #3c4b5e; font-size: 9.5px; }.product-meta .blue-text { color: var(--blue); }
.product-hero-actions { display: flex; align-self: start; gap: 8px; }
.channel-tabs { display: flex; margin-top: 18px; overflow-x: auto; border-bottom: 1px solid #dfe5ec; }.channel-tabs button { position: relative; padding: 12px 17px; font-size: 10px; }.channel-tabs button span { margin-left: 5px; color: #99a5b3; font-size: 8px; }.channel-tabs button.is-active { color: var(--blue); font-weight: 700; }.channel-tabs button.is-active::after { position: absolute; height: 2px; right: 10px; bottom: -1px; left: 10px; background: var(--blue); content: ""; }
.library-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); margin-top: 14px; overflow: hidden; border: 1px solid #e1e7ed; border-radius: 12px; background: white; }
.library-tree { padding: 18px 12px; border-right: 1px solid #e7ebf0; background: #fbfcfd; }.tree-head { display: flex; align-items: center; justify-content: space-between; padding: 0 7px 12px; color: #7a8798; font-size: 9px; font-weight: 700; }.tree-head button { border: 0; color: var(--blue); background: transparent; font-size: 16px; }
.region-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-bottom: 15px; padding: 4px; border-radius: 7px; background: #edf1f5; }.region-switch button { padding: 6px 4px; border-radius: 5px; font-size: 8px; }.region-switch button.is-active { color: var(--navy); background: white; box-shadow: 0 2px 5px rgba(24,45,73,.08); font-weight: 700; }
.tree-parent, .tree-child { display: flex; width: 100%; min-height: 35px; align-items: center; gap: 7px; border: 0; color: #526277; background: transparent; text-align: left; font-size: 9px; }.tree-parent { padding: 0 7px; }.tree-parent > span { width: 10px; color: #8b98a8; }.tree-parent strong { flex: 1; }.tree-parent i, .tree-child i { margin-left: auto; color: #a5afbb; font-size: 7px; font-style: normal; }.tree-child { padding: 0 8px 0 30px; border-radius: 6px; }.tree-child.is-active { color: var(--blue); background: #eaf3ff; font-weight: 700; }.tree-folder { width: 10px; height: 8px; border-radius: 2px; background: #9cb1c9; }.tree-child.is-active .tree-folder { background: var(--blue); }.tree-add { width: calc(100% - 14px); margin: 15px 7px 0; padding: 9px; border: 1px dashed #c9d5e1; border-radius: 6px; color: var(--blue); background: white; font-size: 8px; font-weight: 700; }
.library-main { min-width: 0; padding: 23px; }.library-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }.breadcrumb--dark { color: #7e8c9f; }.library-head h2 { margin: 6px 0 3px; color: var(--navy); font-size: 20px; }.library-head p { margin: 0; color: #8a97a7; font-size: 9px; }.library-head-actions { display: flex; gap: 7px; }
.version-banner { display: grid; grid-template-columns: auto minmax(80px, 1fr) auto auto; align-items: center; gap: 18px; margin: 20px 0; padding: 14px 16px; border: 1px solid #dce8f8; border-radius: 9px; background: linear-gradient(90deg, #f4f9ff, #fbfdff); }.version-current, .version-previous { display: grid; grid-template-columns: auto auto; align-items: baseline; gap: 4px 10px; }.version-current > span, .version-previous > span { color: #77869a; font-size: 8px; }.version-current strong, .version-previous strong { color: var(--blue); font-size: 16px; }.version-previous strong { color: #637488; }.version-current small, .version-previous small { grid-column: 1 / -1; color: #9aa5b1; font-size: 7px; }.version-line { display: flex; align-items: center; gap: 7px; color: #8d9cac; font-size: 7px; white-space: nowrap; }.version-line i { flex: 1; height: 1px; background: #d6e1ed; }
.folder-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }.folder-card { display: flex; min-width: 0; min-height: 68px; align-items: center; gap: 6px; padding: 9px 9px 9px 13px; border: 1px solid #e4e9ef; border-radius: 8px; background: white; }.folder-card:hover { border-color: #bcd2ec; box-shadow: 0 4px 12px rgba(35,61,92,.06); }.folder-main { display: flex; min-width: 0; flex: 1; align-items: center; gap: 11px; border: 0; background: transparent; text-align: left; }.folder-main strong, .folder-main small { display: block; }.folder-main strong { font-size: 10px; }.folder-main small { margin-top: 5px; color: #98a3b0; font-size: 7px; }.folder-icon { position: relative; color: #ffc04a; font-size: 32px; line-height: 1; }.folder-icon--blue { color: #59a3f7; }.folder-icon--orange { color: #f49f45; }.folder-icon--green { color: #3db994; }.folder-icon--violet { color: #9779dd; }
.file-section-head { display: flex; align-items: center; justify-content: space-between; margin: 27px 0 12px; }.file-section-head > div:first-child { display: flex; align-items: baseline; gap: 8px; }.file-section-head h3 { margin: 0; font-size: 13px; }.file-section-head span { color: #99a4b1; font-size: 8px; }.file-view-controls { display: flex; gap: 4px; }.file-view-controls button { min-height: 28px; padding: 0 9px; border: 1px solid #e1e6ec; color: #8492a3; background: white; font-size: 9px; }.file-view-controls button.is-active { color: var(--blue); background: var(--blue-soft); }
.asset-filter-panel { display: flex; align-items: flex-end; gap: 12px; margin: -2px 0 12px; padding: 12px 14px; border: 1px solid #e2e7df; border-radius: 8px; background: #f8faf6; }
.asset-filter-panel label > span { display: block; margin-bottom: 5px; color: #7e887e; font-size: 8px; font-weight: 700; }
.asset-filter-panel select { min-width: 150px; min-height: 34px; padding: 0 9px; border: 1px solid #dce2d9; border-radius: 6px; color: #465046; background: white; font-size: 9px; }
.asset-filter-panel .text-button { margin-left: auto; padding-bottom: 8px; }
.asset-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }.asset-card { min-width: 0; overflow: hidden; border: 1px solid #e2e7ed; border-radius: 9px; background: white; }.asset-preview { position: relative; display: grid; height: 175px; place-items: center; overflow: hidden; color: white; text-align: center; }.asset-preview--one { background: radial-gradient(circle at center, #276dae, transparent 30%), linear-gradient(140deg, #0f233a, #174b7a); }.asset-preview--two { background: linear-gradient(145deg, #dae6ef, #8fa5b5); color: #142940; }.asset-preview--three { background: linear-gradient(145deg, #e5ad2f, #8d5610); }.asset-label { position: absolute; top: 12px; left: 12px; font-size: 6px; font-weight: 800; letter-spacing: 1px; }.preview-glove { display: grid; width: 50px; height: 80px; place-items: center; border-radius: 20px 20px 10px 10px; color: var(--navy); background: #e6a515; font-weight: 900; transform: rotate(-12deg); }.asset-preview small { position: absolute; bottom: 17px; font-size: 7px; letter-spacing: .6px; }.asset-preview > strong { font-size: 25px; }.cut-lines { position: absolute; width: 90px; height: 90px; border: 1px solid rgba(21,47,72,.2); border-radius: 50%; box-shadow: 0 0 0 18px rgba(255,255,255,.12), 0 0 0 36px rgba(255,255,255,.1); }.texture-circle { position: absolute; width: 110px; height: 110px; border-radius: 50%; opacity: .38; background: repeating-linear-gradient(45deg, #271708 0 2px, #fff 2px 3px); }.asset-preview--three strong { position: relative; font-size: 14px; letter-spacing: 1.5px; }.preview-button { position: absolute; inset: 0; display: none; margin: auto; width: 60px; height: 30px; border: 0; border-radius: 6px; color: var(--navy); background: rgba(255,255,255,.92); font-size: 8px; font-weight: 700; }.asset-preview:hover .preview-button { display: block; }.asset-preview:hover::after { position: absolute; inset: 0; background: rgba(12,30,51,.28); content: ""; }.asset-preview:hover .preview-button { z-index: 2; }
.asset-info { display: flex; align-items: center; gap: 7px; padding: 11px 11px 7px; }.asset-info > div { min-width: 0; flex: 1; }.asset-info strong, .asset-info span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.asset-info strong { font-size: 8.5px; }.asset-info span { margin-top: 4px; color: #99a4b1; font-size: 7px; }.download-button { display: grid; width: 27px; height: 27px; place-items: center; border: 1px solid #e2e7ed; border-radius: 6px; color: var(--blue); background: white; }.asset-foot { display: flex; justify-content: space-between; padding: 7px 11px 10px; color: #9aa5b2; font-size: 7px; }.asset-foot span:last-child { color: var(--blue); font-weight: 700; }
.asset-actions { display: flex; flex: 0 0 auto; gap: 5px; }
.delete-button { display: grid; width: 27px; height: 27px; place-items: center; border: 1px solid #edd8d8; border-radius: 6px; color: #b84b4b; background: #fffafa; font-size: 12px; }
.delete-button:hover { color: white; border-color: #c74343; background: #c74343; }
.asset-grid.is-list { grid-template-columns: 1fr; gap: 7px; }
.asset-grid.is-list .asset-card { display: grid; grid-template-columns: 112px minmax(0, 1fr); align-items: center; min-height: 86px; }
.asset-grid.is-list .asset-preview { grid-row: 1 / 3; height: 86px; border-radius: 0; }
.asset-grid.is-list .asset-info { padding: 14px 16px 5px; }
.asset-grid.is-list .asset-info strong { font-size: 10px; }
.asset-grid.is-list .asset-foot { grid-column: 2; padding: 4px 16px 14px; justify-content: flex-start; gap: 24px; }

.brand-intro { position: relative; display: flex; min-height: 195px; align-items: center; justify-content: space-between; gap: 30px; overflow: hidden; padding: 35px 42px; border-radius: 14px 14px 0 0; color: white; background: radial-gradient(circle at 70% 20%, #286ca9 0, transparent 27%), linear-gradient(135deg, #0e213a, #173f63); }.brand-intro::before, .brand-intro::after { position: absolute; border: 1px solid rgba(255,255,255,.1); border-radius: 50%; content: ""; }.brand-intro::before { width: 350px; height: 350px; right: 10%; top: -220px; }.brand-intro::after { width: 520px; height: 520px; right: -100px; top: -310px; }.brand-intro > * { position: relative; z-index: 1; }.brand-intro h2 { margin: 13px 0 8px; font-size: 28px; }.brand-intro p { margin: 0; color: #b7c9db; font-size: 11px; }.brand-stat-row { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid #e3e8ee; border-top: 0; border-radius: 0 0 12px 12px; background: white; }.brand-stat-row div { padding: 18px 25px; border-right: 1px solid #e9edf2; }.brand-stat-row div:last-child { border-right: 0; }.brand-stat-row span, .brand-stat-row strong { display: block; }.brand-stat-row span { color: #8c98a7; font-size: 8px; }.brand-stat-row strong { margin-top: 6px; color: var(--navy); font-size: 17px; }.brand-section-head { display: flex; align-items: flex-end; justify-content: space-between; margin: 28px 0 14px; }.brand-section-head h3 { margin: 0; font-size: 16px; }.brand-section-head p { margin: 5px 0 0; color: var(--muted); font-size: 9px; }.brand-library-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }.brand-library-card { overflow: hidden; border: 1px solid #e1e7ed; border-radius: 11px; background: white; transition: .2s; }.brand-library-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }.brand-cover { display: flex; height: 180px; flex-direction: column; justify-content: flex-end; padding: 18px; color: white; background: radial-gradient(circle at 70% 20%, #e5a11f 0 7%, transparent 8%), linear-gradient(145deg, #0d2945, #1768af); }.brand-cover span { font-size: 11px; font-weight: 800; letter-spacing: 2px; }.brand-cover strong { margin: 2px 0; font-size: 42px; line-height: 1; }.brand-cover small { font-size: 7px; letter-spacing: 1.5px; }.brand-cover--brochure { background: linear-gradient(135deg, #f1ad21 0 40%, #10243f 40%); }.brand-cover--brochure strong { font-size: 21px; }.brand-cover--identity { align-items: center; justify-content: center; background: #eef3f7; color: var(--navy); }.brand-cover--identity strong { display: grid; width: 70px; height: 75px; place-items: center; color: white; background: var(--blue); transform: skew(-8deg); }.brand-cover--company { background: linear-gradient(rgba(10,31,52,.35), rgba(10,31,52,.7)), repeating-linear-gradient(90deg, #5b798c 0 18px, #718d9e 18px 21px); }.brand-cover--company strong { font-size: 25px; }.brand-card-copy { padding: 16px; }.brand-type { color: var(--blue); font-size: 7px; font-weight: 800; letter-spacing: .8px; }.brand-card-copy h3 { margin: 8px 0 6px; font-size: 12px; }.brand-card-copy p { min-height: 29px; margin: 0; color: #8592a2; font-size: 8px; line-height: 1.7; }.brand-card-copy div { display: flex; justify-content: space-between; margin-top: 14px; padding-top: 10px; border-top: 1px solid #edf0f3; color: #9ba5b1; font-size: 7px; }

.table-panel { overflow: hidden; }.result-count { color: #8c98a7; font-size: 9px; }.data-table { width: 100%; border-collapse: collapse; }.data-table th { padding: 11px 15px; color: #8f9baa; background: #fafbfc; text-align: left; font-size: 8px; font-weight: 700; }.data-table td { padding: 13px 15px; border-top: 1px solid #edf0f4; color: #5d6c7e; font-size: 8.5px; }.data-table td strong { color: #26374b; }.log-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 18px; }.log-summary div { padding: 19px 22px; border: 1px solid #e3e8ee; border-radius: 10px; background: white; }.log-summary span, .log-summary strong, .log-summary small { display: block; }.log-summary span { color: #7d8a9b; font-size: 9px; }.log-summary strong { margin: 5px 0; color: var(--navy); font-size: 23px; }.log-summary small { color: #9ba5b2; font-size: 8px; }.live-status { display: flex; align-items: center; gap: 6px; color: #6c7b8e; font-size: 8px; }.live-status i { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px rgba(28,167,118,.12); }.action-chip { display: inline-flex; padding: 4px 7px; border-radius: 5px; color: #1267d7; background: #eaf3ff; font-size: 7px; font-weight: 700; }.action-chip--download { color: #168761; background: #e9f8f2; }.action-chip--system { color: #cb8110; background: #fff3df; }.info-banner { display: flex; gap: 13px; margin-bottom: 18px; padding: 15px 18px; border: 1px solid #f0d9ae; border-radius: 9px; background: #fffaf0; }.info-banner > span { display: grid; width: 22px; height: 22px; place-items: center; border-radius: 50%; color: white; background: var(--orange); font-size: 11px; font-weight: 800; }.info-banner strong { font-size: 10px; }.info-banner p { margin: 4px 0 0; color: #8f7956; font-size: 8px; }.danger-date { color: #cb6c37; font-weight: 700; }.restore-button { padding: 5px 8px; border: 1px solid #ccd8e5; border-radius: 5px; color: var(--blue); background: white; font-size: 7px; font-weight: 700; }
.invite-layout { display: grid; grid-template-columns: minmax(300px, .7fr) minmax(480px, 1.3fr); gap: 15px; }.invite-form-card { padding: 28px; }.invite-form-card h2 { margin: 8px 0 8px; font-size: 22px; }.invite-form-card > p { margin: 0 0 28px; color: #7f8c9c; font-size: 10px; line-height: 1.7; }.invite-note { display: flex; gap: 10px; margin-top: 25px; padding: 13px; border-radius: 7px; background: #f2f7fd; }.invite-note > span { color: var(--blue); }.invite-note p { margin: 0; color: #758397; font-size: 8px; line-height: 1.7; }.invite-note strong { color: #415169; font-size: 9px; }.member-list { padding: 5px 20px 12px; }.member-row { display: grid; grid-template-columns: 35px 1fr auto auto; min-height: 62px; align-items: center; gap: 11px; border-bottom: 1px solid #edf0f4; }.member-row:last-child { border-bottom: 0; }.member-row .avatar { color: var(--blue); background: #e9f3ff; }.member-copy strong, .member-copy small { display: block; }.member-copy strong { font-size: 9.5px; }.member-copy small { margin-top: 4px; color: #8d99a8; font-size: 7.5px; }.member-status { display: flex; align-items: center; gap: 5px; color: #708094; font-size: 7.5px; }.member-status i { width: 5px; height: 5px; border-radius: 50%; background: var(--green); }.member-remove { border: 0; color: #9ba5b1; background: transparent; font-size: 15px; }

.modal-backdrop { position: fixed; z-index: 100; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(7,19,34,.55); backdrop-filter: blur(5px); }.modal { width: min(650px, 100%); max-height: calc(100vh - 40px); overflow-y: auto; border-radius: 14px; background: white; box-shadow: 0 30px 80px rgba(2,14,30,.35); animation: modalIn .2s ease; }.modal--small { width: min(430px, 100%); }.modal-head { display: flex; align-items: flex-start; justify-content: space-between; padding: 23px 25px 17px; border-bottom: 1px solid #e7ebf0; }.modal-head h2 { margin: 5px 0 0; font-size: 19px; }.modal-close { border: 0; color: #8190a1; background: transparent; font-size: 24px; }.modal form { padding: 22px 25px 25px; }.upload-drop { position: relative; display: flex; min-height: 150px; flex-direction: column; align-items: center; justify-content: center; border: 1px dashed #afc3d9; border-radius: 10px; background: #f7faff; text-align: center; }.upload-drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }.upload-symbol { display: grid; width: 34px; height: 34px; margin-bottom: 9px; place-items: center; border-radius: 50%; color: var(--blue); background: #e4f0ff; font-size: 18px; }.upload-drop strong { font-size: 10px; }.upload-drop small { margin-top: 5px; color: #8a97a7; font-size: 8px; }.upload-drop b { margin-top: 10px; color: var(--blue); font-size: 8px; }.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 18px; }.form-grid label > span, .full-field > span { display: block; margin-bottom: 7px; font-size: 9px; font-weight: 700; }.form-grid select, .form-grid input, .full-field input, .full-field textarea { width: 100%; min-height: 41px; padding: 9px 11px; border: 1px solid #dce3ea; border-radius: 7px; outline: 0; color: #405065; background: white; font-size: 9px; }.form-grid select:focus, .form-grid input:focus, .full-field input:focus, .full-field textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(20,104,229,.08); }.full-field { display: block; margin-top: 16px; }.full-field textarea { min-height: 68px; resize: vertical; }.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 22px; }.toast { position: fixed; z-index: 200; right: 25px; bottom: 25px; display: flex; min-width: 270px; align-items: center; gap: 11px; padding: 14px 16px; border: 1px solid #dce6e2; border-radius: 10px; background: white; box-shadow: 0 14px 45px rgba(11,32,54,.2); opacity: 0; pointer-events: none; transform: translateY(20px); transition: .25s; }.toast.is-visible { opacity: 1; transform: none; }.toast > span { display: grid; width: 27px; height: 27px; place-items: center; border-radius: 50%; color: white; background: var(--green); font-size: 12px; }.toast strong, .toast small { display: block; }.toast strong { font-size: 10px; }.toast small { margin-top: 3px; color: #7e8b9a; font-size: 8px; }
.product-edit-grid label > small { display: block; margin-top: 5px; color: #8a97a7; font-size: 8px; line-height: 1.45; }
#nameModal { z-index: 140; }
.product-edit-grid input[readonly] { color: #647080; background: #f1f3ef; cursor: not-allowed; }
.product-edit-wide { grid-column: 1 / -1; }
.auto-stat-note { display: flex; gap: 10px; margin-top: 16px; padding: 12px 14px; border: 1px solid #dce8c8; border-radius: 8px; color: #52613a; background: #f7faef; }
.auto-stat-note > span { color: #7fa80f; font-size: 17px; }.auto-stat-note p { margin: 0; }.auto-stat-note strong, .auto-stat-note small { display: block; }.auto-stat-note strong { font-size: 9px; }.auto-stat-note small { margin-top: 4px; color: #7c876c; font-size: 8px; line-height: 1.5; }
.module-delete, .product-delete-button { display: grid; width: 25px; height: 25px; flex: 0 0 25px; place-items: center; border: 1px solid #f0ceca; border-radius: 6px; color: #c4473b; background: #fff8f7; font-size: 14px; line-height: 1; }
.module-delete:hover, .product-delete-button:hover { border-color: #dc675d; color: white; background: #dc675d; }
.tree-child-row { display: grid; grid-template-columns: minmax(0, 1fr) 27px; align-items: center; gap: 3px; }.tree-child-row .tree-child { min-width: 0; }.tree-library-delete { width: 23px; height: 23px; opacity: .35; }.tree-child-row:hover .tree-library-delete { opacity: 1; }
.folder-delete { opacity: .45; }.folder-card:hover .folder-delete { opacity: 1; }
.brand-library-card { position: relative; }.brand-module-delete { position: absolute; z-index: 3; top: 9px; right: 9px; opacity: .45; }.brand-library-card:hover .brand-module-delete { opacity: 1; }
@keyframes modalIn { from { opacity: 0; transform: translateY(8px) scale(.99); } to { opacity: 1; transform: none; } }

@media (max-width: 1180px) {
  .stat-grid { grid-template-columns: 1fr 1fr; }
  .product-grid, .asset-grid { grid-template-columns: 1fr 1fr; }
  .brand-library-grid { grid-template-columns: 1fr 1fr; }
  .product-strip { grid-template-columns: 1fr 1fr; }
  .mini-product:nth-child(2) { border-right: 0; }
  .global-search { width: 240px; }
  .folder-grid { grid-template-columns: 1fr 1fr; }
  .version-banner { grid-template-columns: auto 1fr auto; }.version-banner > .button { grid-column: 1 / -1; justify-self: end; }
}

@media (max-width: 900px) {
  .login-screen { grid-template-columns: 1fr; }.login-story { display: none; }.login-panel { min-height: 100vh; padding: 35px; }.mobile-brand { display: inline-flex; }
  .sidebar { transform: translateX(-100%); transition: .25s; }.sidebar.is-open { transform: none; }.sidebar .sidebar-close { display: grid; }.main-frame { margin-left: 0; }.mobile-menu { display: grid; }
  .dashboard-grid { grid-template-columns: 1fr; }.completion-panel { min-height: 330px; }
  .product-hero { grid-template-columns: 100px 1fr; }.product-hero-actions { grid-column: 1 / -1; }.library-layout { grid-template-columns: 1fr; }.library-tree { border-right: 0; border-bottom: 1px solid #e4e9ef; }.tree-group { display: none; }.tree-group.is-open { display: block; }
  .invite-layout { grid-template-columns: 1fr; }.brand-library-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 680px) {
  .topbar { min-height: 72px; padding: 12px 16px; }.topbar-actions .global-search, .topbar-actions .notification-button { display: none; }.topbar .button--primary { width: 40px; padding: 0; font-size: 0; }.topbar .button--primary span { font-size: 20px; }
  .content-area { padding: 23px 16px 45px; }.welcome-row, .section-toolbar, .library-head { align-items: flex-start; flex-direction: column; }.welcome-actions, .toolbar-right, .library-head-actions { width: 100%; overflow-x: auto; }.welcome-actions .button { flex: 1; }.stat-grid, .product-grid, .asset-grid, .brand-library-grid, .brand-stat-row, .log-summary { grid-template-columns: 1fr; }.stat-card { min-height: 110px; }.product-strip { grid-template-columns: 1fr; }.mini-product { border-right: 0; border-bottom: 1px solid #edf0f4; }
  .filter-search { width: 100%; }.product-hero { grid-template-columns: 80px 1fr; padding: 15px; }.product-hero-image { height: 90px; }.product-meta { grid-column: 1 / -1; flex-wrap: wrap; gap: 15px; }.product-hero-copy h2 { font-size: 20px; }.product-meta { display: grid; grid-template-columns: 1fr 1fr; }.folder-grid { grid-template-columns: 1fr; }.version-banner { grid-template-columns: 1fr; }.version-line { display: none; }.version-banner > .button { grid-column: 1; justify-self: stretch; }.library-main { padding: 17px 13px; }.activity-item { grid-template-columns: 45px 1fr auto; }.activity-meta, .activity-item > .row-more { display: none; }.completion-chart { flex-direction: column; }.brand-intro { align-items: flex-start; flex-direction: column; padding: 28px 24px; }.brand-stat-row div { border-right: 0; border-bottom: 1px solid #e9edf2; }.brand-stat-row div:last-child { border-bottom: 0; }.brand-cover { height: 160px; }
  .table-panel { overflow-x: auto; }.data-table { min-width: 720px; }.form-grid { grid-template-columns: 1fr; }.modal { max-height: calc(100vh - 20px); }.modal-backdrop { padding: 10px; }.login-panel { padding: 28px; }
}

/* SCHWER brand system — aligned with the Product Spec Hub */
.brand-mark { display: none; }
.brand-lockup { gap: 0; }
.brand-lockup strong { font-size: 22px; font-weight: 760; letter-spacing: .08em; }
.brand-lockup small { margin-top: 7px; color: var(--blue); font-size: 8px; font-weight: 650; letter-spacing: .18em; opacity: 1; }
.brand-lockup--light small { color: #a8d532; }

.login-screen { display: grid; grid-template-columns: 1fr; place-items: center; padding: 32px; background: #f3f4f2; }
.login-story { display: none; }
.login-panel { display: grid; width: 100%; min-height: calc(100vh - 64px); place-items: center; padding: 0; }
.login-form-wrap { width: min(440px, 100%); padding: 45px 40px 38px; border: 1px solid rgba(0,0,0,.04); border-radius: 18px; background: #fff; box-shadow: 0 18px 38px rgba(23,25,24,.1); }
.mobile-brand { display: flex; width: max-content; margin-bottom: 36px; }
.login-form-wrap .eyebrow { color: var(--blue); font-size: 11px; letter-spacing: .08em; }
.login-form-wrap .eyebrow::before { display: none; }
.login-form-wrap h2 { margin: 16px 0 11px; color: #171918; font-size: 24px; letter-spacing: -.02em; }
.login-help { max-width: 350px; margin-bottom: 28px; color: #575c58; font-size: 13px; line-height: 1.75; }
.login-field { display: block; margin-bottom: 14px; }
.login-field > span { display: block; margin-bottom: 7px; color: #444a45; font-size: 10px; font-weight: 700; }
.login-field input { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid #d8dbd5; border-radius: 8px; outline: 0; color: #222623; background: #fff; font: inherit; }
.login-field input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(147,192,31,.14); }
#loginForm .button { margin-top: 8px; }
.login-footer { margin-top: 28px; color: #929691; }
.secure-note { color: #8b8f8b; }
.secure-note span { color: var(--blue); }
.input-shell { border-color: #d8dbd5; border-radius: 8px; }
.input-shell:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(147,192,31,.14); }

.button { border-radius: 8px; }
.button--primary { color: #fff; background: var(--blue); box-shadow: 0 6px 16px rgba(125,165,26,.2); }
.button--primary:hover { background: var(--blue-dark); }
.button--dark { color: #fff; background: #171918; }
.button--soft { color: #303431; border-color: #dde0da; background: #fff; }
.button--soft:hover { border-color: #bdc2b9; background: #f9faf8; }

.sidebar { color: #d8dbd7; background: #171918; box-shadow: 4px 0 24px rgba(0,0,0,.12); }
.sidebar .brand-lockup strong { font-size: 18px; }
.sidebar .brand-lockup small { font-size: 7px; }
.sidebar-head { padding-top: 3px; }
.nav-item { color: #b9bdb9; }
.nav-item:hover { color: #fff; background: rgba(255,255,255,.06); }
.nav-item.is-active { color: white; background: #93c01f; box-shadow: 0 8px 18px rgba(0,0,0,.16); }
.nav-item.is-active .nav-icon { color: #fff; }
.nav-icon { color: #7c827d; }
.nav-label { color: #696e6a; }
.nav-count, .nav-alert { color: #aeb3ae; background: rgba(255,255,255,.07); }
.nav-item.is-active .nav-count { color: #fff; background: rgba(0,0,0,.12); }
.nav-alert { color: #d9ecaa; background: rgba(147,192,31,.14); }
.storage-card { border-color: rgba(255,255,255,.09); background: rgba(255,255,255,.035); }
.storage-head { color: #b8bcb8; }
.storage-head strong { color: #fff; }
.progress span { background: #93c01f; }
.storage-card small, .user-mini-copy small, .more { color: #7e847f; }
.avatar { color: #171918; background: #a8d532; }

.topbar { border-bottom-color: #e1e3df; background: rgba(255,255,255,.94); }
.topbar h1 { color: #171918; }
.breadcrumb { color: #969a95; }
.global-search { border-color: #e0e2dd; background: #f7f8f6; }
.notification-button { border-color: #e0e2dd; }
.notification-button i { background: #93c01f; }
.content-area { max-width: 1540px; }

.eyebrow { color: #93c01f; }
.panel-kicker { color: #8ab31f; letter-spacing: .13em; }
.welcome-row h2, .panel-head h3, .stat-card div:nth-child(2) > strong { color: #171918; }
.stat-card, .panel, .product-card, .product-hero, .library-layout { border-color: #e0e2dd; box-shadow: 0 3px 14px rgba(23,25,24,.025); }
.stat-card--warning { border-color: #dfe8ca; background: #fbfdf7; }
.stat-icon--blue, .stat-icon--green { color: #6f9610; background: #f0f6e1; }
.stat-icon--navy { color: #171918; background: #eceeeb; }
.stat-icon--orange { color: #739910; background: #f1f7e4; }
.stat-card small b, .mini-product i, .coverage-bar strong { color: #6f9610; }
.text-button { color: #769f10; }
.ring { background: conic-gradient(#93c01f 0 86%, #e5e7e2 86% 100%); }
.dot--blue { background: #93c01f; }
.coverage-list b { background: #93c01f; }
.version-tag--current { color: #6f9610; background: #f0f6e2; }

.file-thumb--glove { background: linear-gradient(145deg, #171918, #454a46); }
.file-thumb--glove::after { background: #93c01f; }
.file-thumb--blue { color: #171918; background: linear-gradient(145deg, #93c01f, #c2e466); }
.file-thumb--dark { background: linear-gradient(145deg, #171918, #565b57); }
.file-thumb--orange { color: #171918; background: linear-gradient(145deg, #dfe5d8, #f4f6f1); }

.mini-product-image--one, .mini-product-image--two, .mini-product-image--three, .mini-product-image--four { color: #fff; background: linear-gradient(145deg, #171918, #555a56); }
.mini-product:nth-child(2) .mini-product-image, .mini-product:nth-child(4) .mini-product-image { color: #171918; background: linear-gradient(145deg, #93c01f, #c6e96c); }

.filter-pills button.is-active, .tree-child.is-active, .channel-tags i { color: #6f9610; background: #f0f6e2; }
.filter-pills button.is-active span, .tree-head button, .tree-child.is-active, .tree-add { color: #6f9610; }
.channel-tabs button.is-active { color: #6f9610; }
.channel-tabs button.is-active::after { background: #93c01f; }

.product-card-image--blue, .product-card-image--orange, .product-card-image--navy, .product-card-image--gray, .product-card-image--green { background: radial-gradient(circle at 78% 18%, rgba(147,192,31,.26), transparent 19%), linear-gradient(145deg, #eceeea, #d7dad4); }
.product-card-image::before, .product-card-image::after { border-color: rgba(23,25,24,.08); }
.sku-corner { color: #525752; }
.updated-dot { color: #fff; background: rgba(23,25,24,.72); }
.glove-illustration { border-color: rgba(255,255,255,.88); color: #fff; background: linear-gradient(135deg, #2c302d, #111312); box-shadow: 0 15px 20px rgba(0,0,0,.17); }
.glove-illustration::before { border-color: rgba(255,255,255,.88); border-right: 0; background: #242725; }
.glove-illustration::after { color: #171918; background: #93c01f; }
.coverage-bar b { background: #93c01f; }
.product-card--new:hover { border-color: #93c01f; }
.product-card--new > div > span { color: #759f0f; }

.product-hero-image { background: radial-gradient(circle at 70% 15%, rgba(147,192,31,.28), transparent 20%), linear-gradient(145deg, #202321, #101211); }
.series-tag { color: #6f9610; background: #f0f6e2; }
.product-meta .blue-text, .blue-text { color: #6f9610; }
.region-switch { background: #edeFec; }
.region-switch button.is-active { color: #171918; }
.tree-child.is-active .tree-folder { background: #93c01f; }

.version-banner { border-color: #dce7c3; background: linear-gradient(90deg, #f8fbf1, #fcfdf9); }
.version-current strong { color: #739d0d; }
.folder-icon { color: #93c01f; }
.folder-icon--blue, .folder-icon--orange, .folder-icon--green, .folder-icon--violet { color: #93c01f; }
.file-view-controls button.is-active { color: #6f9610; background: #f1f7e5; }

.asset-preview--one { background: radial-gradient(circle at center, #3b403c, transparent 32%), linear-gradient(145deg, #101211, #272b28); }
.asset-preview--two { color: #171918; background: linear-gradient(145deg, #edf0e9, #cdd6bd); }
.asset-preview--three { color: #171918; background: linear-gradient(145deg, #a8d532, #6e950f); }
.preview-glove { color: #fff; background: #171918; }
.download-button, .asset-foot span:last-child { color: #739d0d; }

.brand-intro { background: radial-gradient(circle at 73% 24%, rgba(147,192,31,.32), transparent 18%), linear-gradient(135deg, #171918, #292d2a); }
.brand-cover { background: radial-gradient(circle at 78% 18%, #93c01f 0 7%, transparent 8%), linear-gradient(145deg, #171918, #3b403c); }
.brand-cover--brochure { background: linear-gradient(135deg, #93c01f 0 40%, #171918 40%); }
.brand-cover--identity { color: #171918; background: #eef0ec; }
.brand-cover--identity strong { color: #fff; background: #171918; }
.brand-cover--company { background: linear-gradient(rgba(23,25,24,.35), rgba(23,25,24,.76)), repeating-linear-gradient(90deg, #69706b 0 18px, #858b86 18px 21px); }
.brand-type { color: #739d0d; }

.log-summary div { border-color: #e0e2dd; }
.action-chip { color: #6f9610; background: #f0f6e2; }
.action-chip--download { color: #596f22; background: #edf3e2; }
.live-status i { background: #93c01f; box-shadow: 0 0 0 3px rgba(147,192,31,.14); }
.info-banner { border-color: #dfe8ca; background: #fafcf6; }
.info-banner > span { background: #93c01f; }
.info-banner p { color: #747d69; }
.invite-note { background: #f5f8ef; }
.invite-note > span { color: #779f13; }
.member-row .avatar { color: #171918; background: #e7f1ce; }
.member-status i { background: #93c01f; }

.upload-drop { border-color: #b8c99a; background: #f8fbf2; }
.upload-symbol { color: #6f9610; background: #edf5da; }
.upload-drop b { color: #6f9610; }
.form-grid select:focus, .form-grid input:focus, .full-field input:focus, .full-field textarea:focus { border-color: #93c01f; box-shadow: 0 0 0 3px rgba(147,192,31,.1); }
.toast > span { color: #171918; background: #a8d532; }

@media (max-width: 900px) {
  .login-panel { min-height: calc(100vh - 64px); padding: 0; }
}

@media (max-width: 680px) {
  .login-screen { padding: 16px; }
  .login-panel { min-height: calc(100vh - 32px); padding: 0; }
  .login-form-wrap { padding: 34px 24px 28px; border-radius: 14px; }
}

/* Interactive library navigation and precise upload location */
.folder-card.is-selected { border-color: var(--blue); background: #f9fcf3; box-shadow: 0 0 0 2px rgba(147,192,31,.12); }
.activity-item, .tree-parent, .tree-child, .folder-card { cursor: pointer; }
.activity-item:hover { background: #fafcf7; }
.upload-location-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.upload-location-grid select:disabled { color: #9da19d; background: #f3f4f2; cursor: not-allowed; }
.upload-location-preview { margin-top: 15px; padding: 12px 14px; border: 1px solid #dce7c3; border-radius: 8px; background: #f8fbf1; }
.upload-location-preview span, .upload-location-preview strong { display: block; }
.upload-location-preview span { margin-bottom: 6px; color: #7b8179; font-size: 8px; }
.upload-location-preview strong { color: #55750a; font-size: 10px; line-height: 1.6; }
.brand-detail-body { padding: 22px 25px 25px; }
.brand-detail-path { margin-bottom: 15px; color: #858b85; font-size: 9px; }
.brand-detail-folders { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; }
.brand-folder-row { position: relative; min-width: 0; }.brand-folder-row > button:first-child { display: flex; width: 100%; min-height: 86px; flex-direction: column; align-items: flex-start; justify-content: center; padding: 12px; border: 1px solid #e0e2dd; border-radius: 8px; background: white; text-align: left; }
.brand-folder-row > button:first-child:hover, .brand-folder-row > button:first-child.is-selected { border-color: #93c01f; background: #f8fbf1; }
.brand-folder-row > button:first-child > span { color: #93c01f; font-size: 24px; line-height: .8; }
.brand-folder-delete { position: absolute; z-index: 2; top: 7px; right: 7px; width: 22px; height: 22px; opacity: .4; }.brand-folder-row:hover .brand-folder-delete { opacity: 1; }
.brand-detail-folders strong { margin-top: 9px; font-size: 10px; }
.brand-detail-folders small { margin-top: 4px; color: #929792; font-size: 8px; }
.brand-detail-file { display: flex; align-items: center; gap: 12px; margin-top: 18px; padding: 12px; border: 1px solid #e2e4df; border-radius: 8px; background: #fafbfa; }
.brand-detail-file > div { min-width: 0; flex: 1; }
.brand-detail-file strong, .brand-detail-file small { display: block; }
.brand-detail-file strong { font-size: 10px; }
.brand-detail-file small { margin-top: 5px; color: #8f948f; font-size: 8px; }

@media (max-width: 680px) {
  .upload-location-grid, .brand-detail-folders { grid-template-columns: 1fr 1fr; }
}

/* Real browser-local file library */
.asset-preview-media { width: 100%; height: 100%; object-fit: cover; }
.asset-preview--file { color: #171918; background: linear-gradient(145deg, #eef0ec, #dfe3d8); }
.asset-file-type { display: grid; width: 64px; height: 76px; place-items: center; border: 1px solid rgba(23,25,24,.12); border-radius: 8px; color: #171918; background: white; font-size: 13px; font-weight: 800; box-shadow: 0 10px 22px rgba(23,25,24,.09); }
.asset-local-badge { position: absolute; top: 11px; right: 11px; padding: 4px 7px; border-radius: 10px; color: #4f6c08; background: rgba(241,247,229,.92); font-size: 7px; font-weight: 750; }
.asset-empty { grid-column: 1 / -1; display: grid; min-height: 210px; place-items: center; padding: 35px; border: 1px dashed #cfd4cb; border-radius: 10px; color: #747a74; background: #fafbfa; text-align: center; }
.asset-empty span { display: grid; width: 48px; height: 48px; margin: 0 auto 12px; place-items: center; border-radius: 50%; color: #64870d; background: #eef5dc; font-size: 24px; }
.asset-empty strong, .asset-empty small { display: block; }
.asset-empty strong { color: #303431; font-size: 12px; }
.asset-empty small { margin-top: 7px; font-size: 9px; }
.preview-modal { width: min(820px, 100%); }
.file-preview-stage { display: grid; min-height: 420px; max-height: 65vh; place-items: center; overflow: hidden; background: #171918; }
.file-preview-stage img, .file-preview-stage video, .file-preview-stage iframe { display: block; width: 100%; max-height: 65vh; object-fit: contain; border: 0; }
.file-preview-generic { display: grid; place-items: center; color: white; text-align: center; }
.file-preview-generic span { display: grid; width: 92px; height: 112px; margin: 0 auto 18px; place-items: center; border-radius: 10px; color: #171918; background: #a8d532; font-size: 20px; font-weight: 800; }
.file-preview-generic strong { font-size: 13px; }
.file-preview-meta { padding: 15px 24px; color: #6f756f; border-top: 1px solid #e2e4df; font-size: 9px; }
.preview-modal-actions { padding: 0 24px 22px; }