:root { --navy:#2f4488; --navy-soft:#123f4d; --mint:#43b536; --mint-strong:#5dd5aa; --ink:#17313a; --muted:#74858a; --paper:#f5f8f6; --line:#dbe4e0; --white:#fff; --danger:#c84646; }
* { box-sizing:border-box; } body { margin:0; color:var(--ink); background:linear-gradient(120deg,#eff7f3 0%,#f8faf8 48%,#e8f3ef 100%); font-family:Inter,sans-serif; font-size:13px; } .topbar { height:68px; padding:0 32px; display:flex; align-items:center; gap:32px; background:var(--navy); color:#fff; box-shadow:0 3px 18px #2f448830; } .brand { color:#fff; text-decoration:none; font-size:27px; line-height:1; letter-spacing:-1.8px; font-weight:800; } .brand span { color:var(--mint); } .topbar-title { padding-left:31px; border-left:1px solid #ffffff2c; color:#dbeae7; font-size:13px; font-weight:600; } .topbar-actions { margin-left:auto; display:flex; align-items:center; gap:18px; } .icon-button { border:0; background:transparent; color:var(--mint); font-size:23px; } .user-chip { display:flex; align-items:center; gap:8px; color:#dbeae7; font-size:12px; }.user-chip span { width:28px; height:28px; display:grid; place-items:center; border-radius:50%; background:var(--mint); color:var(--navy); font-weight:800; }
.shell { max-width:1440px; min-height:calc(100vh - 68px); margin:0 auto; display:grid; grid-template-columns:210px minmax(0,1fr); } .sidebar { padding:37px 18px; border-right:1px solid #dce8e2; background:#f1f7f4a6; } .nav-caption { margin:0 12px 10px; color:#8b9b9c; font-family:Inter,sans-serif; font-size:9px; font-weight:500; letter-spacing:1.3px; text-transform:uppercase; }.nav-caption.space { margin-top:31px; }.nav-item { display:flex; justify-content:space-between; padding:10px 12px; border-radius:7px; color:#64767b; text-decoration:none; font-weight:600; }.nav-item:hover { color:var(--navy); background:#e4f1ec; }.nav-item.active { color:var(--navy); background:var(--mint); }.nav-item span { font-family:Inter,sans-serif; font-size:10px; }
.content { max-width:1100px; padding:36px 46px 66px; }.breadcrumb { color:#89989a; font-size:11px; }.breadcrumb b { padding:0 8px; color:#b7c3c0; }.breadcrumb span { color:var(--navy); }.page-heading { display:flex; align-items:flex-end; justify-content:space-between; margin:24px 0 28px; }.eyebrow { margin:0 0 6px; color:#35a928; font-family:Inter,sans-serif; font-size:10px; font-weight:500; letter-spacing:1.3px; } h1 { margin:0; color:var(--navy); font-size:29px; letter-spacing:-1.2px; } .subtitle { margin:7px 0 0; color:var(--muted); font-size:12px; }.heading-status { color:#698082; font-size:11px; font-weight:700; }.draft-dot { display:inline-block; width:7px; height:7px; margin-right:6px; border-radius:50%; background:#f3b25a; }
.form-card { margin-top:16px; padding:27px 30px 29px; border:1px solid var(--line); border-radius:12px; background:#fff; box-shadow:0 7px 21px #1841320a; }.section-title { display:flex; align-items:flex-start; gap:13px; margin-bottom:22px; }.section-title>span { display:grid; place-items:center; width:25px; height:25px; border-radius:50%; background:var(--navy); color:var(--mint); font-family:Inter,sans-serif; font-size:10px; }.section-title h2 { margin:1px 0 3px; color:var(--navy); font-size:15px; letter-spacing:-.25px; }.section-title p { margin:0; color:#849497; font-size:11px; }.form-grid { display:grid; gap:18px; }.grid-4 { grid-template-columns:repeat(4,minmax(0,1fr)); }.span-2 { grid-column:span 2; }.span-4 { grid-column:span 4; } label { display:flex; flex-direction:column; gap:7px; color:#587075; font-size:10px; font-weight:700; letter-spacing:.2px; text-transform:uppercase; } label em { color:#e16a5b; font-style:normal; } input,select,textarea { width:100%; min-height:38px; padding:8px 10px; border:1px solid #d7ddec; border-radius:6px; outline:none; color:var(--ink); background:#fbfcfb; font:500 12px Inter,sans-serif; transition:border .15s,box-shadow .15s; } textarea { resize:vertical; } input:focus,select:focus,textarea:focus { border-color:#43b536; box-shadow:0 0 0 3px #43b53640; background:#fff; }.input-prefix,.input-suffix { display:flex; overflow:hidden; border:1px solid #d7ddec; border-radius:6px; background:#fbfcfb; }.input-prefix span,.input-suffix span { display:grid; place-items:center; padding:0 10px; color:#789095; background:#eef5f1; font-family:Inter,sans-serif; font-size:10px; }.input-prefix input,.input-suffix input { border:0; border-radius:0; }
.conversion-highlight { display:flex; align-items:center; justify-content:space-between; margin:0 0 17px; padding:14px 17px; border-radius:8px; background:#effbf5; }.conversion-highlight strong { color:var(--navy); font-size:12px; }.conversion-highlight p { margin:3px 0 0; color:#6d8584; font-size:10px; }.conversion-highlight select { width:190px; background:#fff; }.conversion-table { border:1px solid #dbe7e1; border-radius:8px; overflow:hidden; }.conversion-head,.conversion-row { display:grid; grid-template-columns:1.1fr 1.8fr 130px 110px 34px; align-items:center; gap:10px; padding:10px 13px; }.conversion-head { color:#8b9c9d; background:#f4f8f6; font-family:Inter,sans-serif; font-size:9px; letter-spacing:.6px; text-transform:uppercase; }.conversion-row { border-top:1px solid #e3ece8; }.conversion-row select { min-height:34px; }.factor-input { display:flex; align-items:center; gap:8px; color:#708689; font-family:Inter,sans-serif; }.factor-input input { width:82px; min-height:34px; text-align:center; }.factor-input strong { color:var(--navy); font-size:11px; }.check-cell { flex-direction:row; align-items:center; justify-content:center; gap:0; }.check-cell input { position:absolute; opacity:0; }.check-cell span { width:17px; height:17px; border:1px solid #c7d7d0; border-radius:50%; background:#fff; }.check-cell input:checked+span { border:5px solid var(--mint-strong); }.remove-row { width:27px; height:27px; border:0; border-radius:5px; color:#97a8a6; background:transparent; font-size:20px; cursor:pointer; }.remove-row:hover { color:var(--danger); background:#fff0f0; }.add-row { width:100%; padding:11px; border:0; color:#258565; background:#f8fbf9; font:700 11px Inter,sans-serif; cursor:pointer; }.stock-controls { display:grid; grid-template-columns:1.65fr 1fr 1.25fr; align-items:end; gap:18px; margin-top:19px; }.toggle-line { flex-direction:row; align-items:center; gap:10px; text-transform:none; letter-spacing:0; }.toggle-line input { position:absolute; opacity:0; }.toggle-line>span { position:relative; width:33px; height:18px; border-radius:20px; background:#ccd9d4; transition:.2s; }.toggle-line>span:after { position:absolute; top:3px; left:3px; width:12px; height:12px; border-radius:50%; background:#fff; content:''; transition:.2s; }.toggle-line input:checked+span { background:var(--mint-strong); }.toggle-line input:checked+span:after { transform:translateX(15px); }.toggle-line b { display:block; color:var(--ink); font-size:11px; }.toggle-line small { color:#8a9a9b; font-size:10px; font-weight:500; }
.form-actions { display:flex; justify-content:space-between; align-items:center; padding:22px 2px; }.form-actions>span { color:#2c9070; font-size:11px; font-weight:700; }.button { min-height:39px; padding:0 16px; border:1px solid transparent; border-radius:6px; font:700 11px Inter,sans-serif; cursor:pointer; }.button.ghost { margin-right:7px; border-color:#d7ddec; color:#536d70; background:#fff; }.button.primary { color:var(--navy); background:var(--mint); }.button.primary span { padding-left:7px; font-size:16px; }.button:hover { transform:translateY(-1px); }.reveal { animation:reveal .45s both; }.delay-1 { animation-delay:.08s; }.delay-2 { animation-delay:.16s; } @keyframes reveal { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
@media (max-width:850px) { .topbar { padding:0 18px; }.sidebar { display:none; }.shell { display:block; }.content { padding:28px 18px 45px; }.grid-4 { grid-template-columns:repeat(2,minmax(0,1fr)); }.span-4 { grid-column:span 2; }.conversion-head { display:none; }.conversion-row { grid-template-columns:1fr 1.4fr 45px 45px 28px; gap:6px; padding:10px; }.stock-controls { grid-template-columns:1fr; }.page-heading { align-items:flex-start; gap:20px; } } @media (max-width:500px) { .topbar-title,.user-chip { display:none; }.topbar-actions { margin-left:auto; }.form-card { padding:22px 16px; }.grid-4 { grid-template-columns:1fr; }.span-2,.span-4 { grid-column:span 1; }.page-heading { display:block; }.heading-status { margin-top:14px; }.conversion-row { grid-template-columns:1fr 1fr 33px 33px 26px; }.factor-input { gap:3px; }.factor-input input { width:48px; }.form-actions { align-items:flex-start; flex-direction:column; gap:13px; } }

.app-bar { position:sticky; top:0; z-index:50; height:66px; padding:0 24px; display:flex; align-items:center; gap:20px; color:#fff; background:#082f3b; box-shadow:0 4px 20px #2f448822; }
.app-menu { display:none; border:0; color:#a7d3c9; background:transparent; font-size:20px; cursor:pointer; }
.app-company { min-width:175px; padding-left:20px; border-left:1px solid #ffffff20; }
.app-company strong { display:block; color:#f3fbf8; font-size:10px; }
.app-company select { width:auto; min-height:0; padding:2px 16px 2px 0; border:0; color:#9ec0ba; background:transparent; font-size:9px; }
.app-search { width:min(480px,38vw); margin-left:auto; display:flex; align-items:center; gap:8px; padding:0 12px; border:1px solid #ffffff1c; border-radius:7px; background:#ffffff0c; }
.app-search span { color:#78a9a0; font-size:17px; }
.app-search input { min-height:36px; padding:0; border:0; color:#edf8f5; background:transparent; box-shadow:none; font-size:10px; }
.app-search input::placeholder { color:#7fa39d; }
.app-notification { width:34px; height:34px; border:1px solid #ffffff1c; border-radius:7px; color:var(--mint); background:#ffffff0b; cursor:pointer; }
.app-profile { position:relative; display:flex; align-items:center; gap:8px; }
.app-user { display:grid; place-items:center; width:30px; height:30px; border-radius:50%; color:var(--navy); background:var(--mint); font-size:9px; font-weight:800; }
.app-profile strong,.app-profile small { display:block; max-width:105px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.app-profile strong { color:#eef8f5; font-size:9px; text-transform:capitalize; }.app-profile small { color:#85a9a2; font-size:8px; }
.app-profile>button { border:0; color:#9bbab4; background:transparent; cursor:pointer; }
.app-user-menu { position:absolute; top:42px; right:0; z-index:70; width:210px; padding:10px; display:none; border:1px solid var(--line); border-radius:8px; color:var(--ink); background:#fff; box-shadow:0 16px 40px #2f448830; }
.app-user-menu.open { display:grid; }.app-user-menu span { padding:8px; color:var(--muted); font-size:9px; }.app-user-menu a,.app-user-menu button { padding:9px 8px; border:0; border-radius:5px; color:var(--ink); background:transparent; text-align:left; text-decoration:none; font:600 10px Inter; cursor:pointer; }.app-user-menu a:hover,.app-user-menu button:hover { background:#eef6f2; }
.app-layout { display:grid; grid-template-columns:236px minmax(0,1fr); min-height:calc(100vh - 66px); }
.app-sidebar { position:sticky; top:66px; align-self:start; height:calc(100vh - 66px); padding:16px 12px; display:flex; flex-direction:column; border-right:1px solid #dce8e2; background:#f8fbf9; overflow:auto; }
.app-nav-section { margin:17px 10px 7px; color:#94a4a4; font:500 8px Inter,sans-serif; letter-spacing:1.2px; text-transform:uppercase; }
.app-nav-link { display:flex; align-items:center; justify-content:space-between; min-height:38px; padding:7px 10px; border-radius:7px; color:#587176; text-decoration:none; font-size:10px; font-weight:700; }
.app-nav-link>span:first-child { display:flex; align-items:center; gap:9px; }.app-nav-link i { width:24px; height:24px; display:grid; place-items:center; border-radius:6px; color:#75908c; background:#edf4f1; font:500 7px Inter; font-style:normal; }
.app-nav-link:hover { color:var(--navy); background:#edf5f1; }.app-nav-link.active { color:var(--navy); background:var(--mint); }.app-nav-link.active i { color:#dffaf0; background:var(--navy); }
.app-nav-link.planned { opacity:.58; cursor:default; }.app-nav-soon { color:#91a19f; font:500 7px Inter; text-transform:uppercase; }.app-nav-badge { min-width:18px; padding:2px 5px; border-radius:9px; color:#9b6412; background:#fff0d0; text-align:center; font:700 8px Inter; }
.app-sidebar-foot { margin-top:auto; padding:13px 10px; border-top:1px solid #e3ece8; }.app-sidebar-foot span,.app-sidebar-foot b { display:block; }.app-sidebar-foot span { color:#90a19f; font:8px Inter; }.app-sidebar-foot b { margin-top:3px; color:#607679; font-size:8px; }
.app-page-content { width:100%; max-width:none; min-width:0; padding:32px 38px 60px; }
.product-content { width:100%; max-width:1120px; }
@media (max-width:950px) { .app-menu { display:block; }.app-company { display:none; }.app-search { width:auto; flex:1; }.app-layout { grid-template-columns:1fr; }.app-sidebar { position:fixed; top:66px; left:-250px; z-index:45; width:236px; transition:left .2s; }.nav-open .app-sidebar { left:0; box-shadow:8px 0 30px #2f448820; }.app-page-content { padding:27px 20px 48px; } }
@media (max-width:560px) { .app-bar { padding:0 14px; gap:12px; }.app-search { display:none; }.app-profile>div,.app-notification { display:none; }.app-profile { margin-left:auto; } }

/* Authoritative Klen+ brand asset */
.brand{position:relative;display:block;width:142px;height:44px;overflow:hidden;border-radius:8px;background:#f8f8f8;flex:0 0 142px}
.brand .brand-logo-image{position:absolute;width:152px;max-width:none;height:auto;left:-5px;top:-10px;display:block}
.brand-logo{position:relative;display:block;width:180px;height:54px;overflow:hidden;border-radius:8px;background:#f8f8f8}
.brand-logo .brand-logo-image{position:absolute;width:194px;max-width:none;height:auto;left:-7px;top:-13px;display:block}
.brand-preview-logo{margin-bottom:12px}
@media(max-width:650px){.brand{width:122px;height:38px;flex-basis:122px}.brand .brand-logo-image{width:132px;left:-5px;top:-9px}}

/* Klen+ official blue and leaf-green theme */
:root{--ink:#263a78;--navy:#2f4488;--mint:#43b536;--mint-strong:#35a928;--line:#d7ddec;--muted:#6f7890}
body{background:linear-gradient(125deg,#f2f5fc 0%,#fbfcff 48%,#f1f8ef 100%)}
.app-bar,.topbar{background:linear-gradient(100deg,#263a78,#2f4488 72%,#38549c)}
.app-sidebar{background:#f7f8fc}
.app-nav-link.active,.nav-item.active,.button.primary{background:#43b536}
.app-nav-link.active,.nav-item.active,.button.primary{color:#14265e}
input:focus,select:focus,textarea:focus{border-color:#43b536;box-shadow:0 0 0 3px #43b53624}