:root { --color-bg:#f7f8fa; --color-surface:#ffffff; --color-text:#111111; --color-text-muted:#6f6f6f; --color-border:#e8e8e8; --color-primary:#f20d18; --color-primary-hover:#d90b15; --color-success:#23bf68; --color-danger:#d93025; --shadow-soft:0 10px 35px rgba(0,0,0,.08); --shadow-card:0 8px 28px rgba(0,0,0,.075); --radius-sm:8px; --radius-md:14px; --radius-lg:18px; --font-main:Arial,Helvetica,sans-serif; }
*, *::before, *::after { box-sizing:border-box; }
html { width:100%; min-height:100%; background:var(--color-bg); }
body { width:100%; min-width:320px; min-height:100vh; margin:0; overflow:hidden; background:var(--color-bg); color:var(--color-text); font-family:var(--font-main); font-size:16px; line-height:1.5; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
button, input, select, textarea { font:inherit; }
button { cursor:pointer; }
img, svg { display:block; max-width:100%; }
a { color:inherit; text-decoration:none; }
[hidden] { display:none !important; }

.start-page { width:100%; height:100vh; height:100dvh; padding:16px 0; display:flex; flex-direction:column; overflow:hidden; background:#f8f9fa; }
.start-header { flex:0 0 auto; position:relative; z-index:20; background:transparent; }
.start-header-shell { width:calc(100% - 64px); margin:0 auto; border:1px solid rgba(0,0,0,.025); border-radius:16px; background:#fff; box-shadow:var(--shadow-card); }
.start-header-inner { height:84px; padding:10px 30px; display:flex; align-items:center; justify-content:space-between; gap:30px; }
.start-logo { width:300px; height:66px; flex:0 0 300px; display:flex; align-items:center; justify-content:flex-start; overflow:hidden; }
.start-logo img { width:auto; height:80px; object-fit:contain; object-position:left center; }
.start-header-right { display:flex; align-items:center; justify-content:flex-end; gap:38px; }
.start-header-link { display:flex; align-items:center; gap:10px; color:#181818; font-size:15px; font-weight:500; white-space:nowrap; }
.start-header-link-icon { display:flex; align-items:center; justify-content:center; color:#111; }
.start-status { min-height:48px; padding:0 17px; display:flex; align-items:center; gap:10px; border:1px solid #e4e6e9; border-radius:5px; background:#fff; color:#4f4f4f; font-size:14px; white-space:nowrap; }
.start-status-dot { width:11px; height:11px; flex:0 0 11px; border-radius:50%; background:var(--color-success); box-shadow:0 0 0 4px rgba(35,191,104,.08); }

.start-main { flex:1; min-height:0; display:flex; flex-direction:column; }
.start-hero { width:100%; flex:1; min-height:0; margin:14px 0 0; position:relative; overflow:hidden; background:#fff; }
.start-hero-inner { width:100%; height:100%; position:relative; display:flex; align-items:center; overflow:hidden; }
.start-hero-visual { position:absolute; inset:0; z-index:1; overflow:hidden; pointer-events:none; background:#fff; }
.start-hero-visual img { width:100%; height:100%; max-width:none; position:absolute; inset:0; object-fit:cover; object-position:center center; }
.start-hero-content { width:640px; max-width:44%; height:100%; padding:0 0 0 78px; position:relative; z-index:3; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; }
.start-brand { display:flex; align-items:baseline; gap:20px; margin:10px 0; font-size:68px; line-height:.95; font-weight:900; letter-spacing:-3px; }
.start-brand-ronat { color:var(--color-primary); }
.start-brand-crm { color:#050505; }
.start-hero h1 { max-width:610px; margin:0; color:#151515; font-size:31px; line-height:1.25; font-weight:600; letter-spacing:-.7px; }
.start-accent-line { width:62px; height:4px; margin:30px 0 42px; border-radius:999px; background:var(--color-primary); }
.start-login-main { min-width:258px; height:62px; padding:0 27px; display:inline-flex; align-items:center; justify-content:center; gap:13px; border:0; border-radius:8px; background:var(--color-primary); color:#fff; font-size:16px; font-weight:700; box-shadow:0 12px 28px rgba(242,13,24,.20); transition:background .18s ease,transform .18s ease; }
.start-login-main:hover { background:var(--color-primary-hover); transform:translateY(-1px); }
.start-login-main-icon { display:flex; align-items:center; justify-content:center; }

.start-features { width:100%; flex:0 0 154px; margin-top:14px; background:transparent; }
.start-features-inner { width:calc(100% - 112px); height:154px; margin:0 auto; padding:20px 28px; display:grid; grid-template-columns:repeat(4,1fr); align-items:center; border:1px solid rgba(0,0,0,.025); border-radius:15px; background:#fff; box-shadow:var(--shadow-card); }
.start-feature { min-width:0; height:108px; padding:0 32px; display:flex; align-items:center; gap:24px; border-right:1px solid #e8e8e8; }
.start-feature:first-child { padding-left:0; }
.start-feature:last-child { padding-right:0; border-right:0; }
.start-feature-icon-box { width:96px; height:96px; flex:0 0 96px; display:flex; align-items:center; justify-content:center; border-radius:18px; background:linear-gradient(145deg,#fff3f3,#fde6e7); }
.start-feature-icon-box svg { width:80px; height:80px; }
.start-feature-text { min-width:0; display:flex; flex-direction:column; gap:7px; }
.start-feature-text strong { color:#171717; font-size:18px; line-height:1.2; font-weight:700; }
.start-feature-text span { max-width:200px; color:#696969; font-size:14px; line-height:1.45; }

.login-modal { position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center; padding:24px; }
.login-modal-backdrop { position:absolute; inset:0; background:rgba(15,18,22,.38); backdrop-filter:blur(3px); }
.login-modal-window { width:100%; max-width:390px; position:relative; z-index:1; padding:30px 28px 26px; border:1px solid #ececec; border-radius:16px; background:#fff; box-shadow:0 24px 70px rgba(0,0,0,.18); }
.login-modal-close { width:34px; height:34px; position:absolute; top:14px; right:14px; display:flex; align-items:center; justify-content:center; padding:0; border:0; border-radius:8px; background:transparent; color:#8a8a8a; font-size:24px; line-height:1; }
.login-modal-close:hover { background:#f5f5f5; color:#222; }
.login-modal-header { margin-bottom:24px; text-align:center; }
.login-modal-logo { width:auto; height:52px; margin:0 auto 18px; object-fit:contain; }
.login-modal-header h2 { margin:0 0 6px; color:#181818; font-size:22px; line-height:1.25; font-weight:700; }
.login-modal-header p { margin:0; color:#8a8a8a; font-size:13px; line-height:1.4; }
.login-error { margin:0 0 16px; padding:10px 12px; border:1px solid rgba(217,48,37,.18); border-radius:8px; background:#fff4f4; 
    color:var(--color-danger); font-size:13px; line-height:1.4; text-align:center; }
.login-form { display:flex; flex-direction:column; gap:15px; }
.login-field { display:flex; flex-direction:column; gap:6px; }
.login-field > span { color:#777; font-size:12px; line-height:1.2; }
.login-control { height:46px; position:relative; display:flex; align-items:center; border:1px solid #ddd; border-radius:8px; background:#fff; 
    transition:.18s ease;}
.login-control-select {border-right: 0;}
.login-control:focus-within { border-color:#b9b9b9; box-shadow:0 0 0 3px rgba(0,0,0,.03); }
.login-control-icon { width:42px; flex:0 0 42px; display:flex; align-items:center; justify-content:center; color:#777; font-size:17px; }
.login-control input, .login-control select { width:100%; height:100%; min-width:0; padding:0 12px 0 0; border:0; outline:0; background:transparent; color:#222; font-size:13px; }
.login-control select { padding-right:36px; appearance:auto; }
.login-control input::placeholder { color:#aaa; }
.login-password-toggle { width:40px; height:100%; flex:0 0 40px; display:flex; align-items:center; justify-content:center; padding:0; border:0; background:transparent; color:#888; font-size:14px; }
.login-password-toggle:hover { color:#222; }
.login-submit { width:100%; height:48px; margin-top:3px; border:0; border-radius:8px; background:var(--color-primary); color:#fff; font-size:14px; font-weight:700; box-shadow:0 8px 20px rgba(242,13,24,.18); transition:.18s ease; }
.login-submit:hover { background:var(--color-primary-hover); }
.login-remember { display:flex; align-items:center; gap:8px; color:#777; font-size:12px; cursor:pointer; }
.login-remember input { width:15px; height:15px; margin:0; accent-color:var(--color-primary); }

.crm-layout { min-height:100vh; }
.crm-header { min-height:72px; }
.crm-header-logo img { height:48px; }
.crm-sidebar { min-height:100px; }
.crm-content { min-height:300px; }

@media(max-width:1250px){
.start-header-shell{width:calc(100% - 40px)}
.start-features-inner{width:calc(100% - 64px)}
.start-brand{font-size:58px}
.start-hero-content{width:540px;max-width:48%;padding-left:40px}
.start-feature{padding:0 18px;gap:18px}
.start-feature-icon-box{width:86px;height:86px;flex-basis:86px}
.start-feature-icon-box svg{width:56px;height:56px}
}

@media(max-width:980px){
body{overflow:auto}
.start-page{height:auto;min-height:100vh;overflow:visible}
.start-header-right{gap:18px}
.start-header-link{display:none}
.start-hero{flex:none}
.start-hero-visual{opacity:.72}
.start-features{flex:none;height:auto}
.start-features-inner{height:auto;grid-template-columns:repeat(2,1fr)}
.start-feature{min-height:120px;padding:20px!important;border-bottom:1px solid #e8e8e8}
.start-feature:nth-child(2){border-right:0}
.start-feature:nth-child(3),.start-feature:nth-child(4){border-bottom:0}
}

@media(max-width:680px){
.start-page{padding:10px 0 18px}
.start-header-right{display:none}
.start-header-shell,.start-features-inner{width:calc(100% - 20px)}
.start-header-inner{height:70px;padding:8px 14px}
.start-logo{width:200px;height:50px;flex-basis:200px}
.start-logo img{height:50px;max-width:200px}
.start-status{min-height:38px;padding:0 10px;font-size:11px}
.start-hero{margin-top:10px}
.start-hero-content{width:100%;max-width:none;padding:0 20px;justify-content:center}
.start-hero-visual img{object-position:62% center}
.start-brand{font-size:34px;letter-spacing:0}
.start-hero h1{max-width:380px;font-size:24px}
.start-accent-line{margin:25px 0 32px}
.start-login-main{min-width:220px;height:55px}
.start-features-inner{grid-template-columns:1fr;padding:10px 20px}
.start-feature{height:auto;min-height:115px;padding:17px 0!important;border-right:0;border-bottom:1px solid #e8e8e8!important}
.start-feature:last-child{border-bottom:0!important}
}

@media(max-width:520px){
.login-modal{padding:14px}
.login-modal-window{max-width:none;padding:28px 20px 22px}
}


.custom-select { position:relative; width:100%; }
.custom-select-button { width:100%; min-height:46px; padding:0 14px; display:flex; align-items:center; justify-content:space-between; gap:12px; border:1px solid #dedede; 
    border-radius:0 5px 5px 0; background:#fff; color:#222; text-align:left; transition:border-color .18s ease,box-shadow .18s ease,background .18s ease; }
.custom-select-button:hover { border-color:#c9c9c9; }
.custom-select.is-open .custom-select-button { border-color:#c8c8c8; box-shadow:0 0 0 3px rgba(0,0,0,.025); }
.custom-select-value { min-width:0; flex:1; overflow:hidden; color:#333; font-size:13px; text-overflow:ellipsis; white-space:nowrap; }
.custom-select-arrow { width:8px; height:8px; flex:0 0 8px; border-right:1.5px solid #555; border-bottom:1.5px solid #555; transform:rotate(45deg) translateY(-2px); transition:transform .18s ease; }
.custom-select.is-open .custom-select-arrow { transform:rotate(225deg) translate(-2px,-2px); }
.custom-select-menu { width:100%; position:absolute; top:calc(100% + 6px); left:0; z-index:50; padding:5px; overflow:hidden; border:1px solid #e5e5e5; border-radius:10px; background:#fff; box-shadow:0 12px 32px rgba(0,0,0,.11); opacity:0; visibility:hidden; transform:translateY(-5px); transition:opacity .15s ease,transform .15s ease,visibility .15s ease; }
.custom-select.is-open .custom-select-menu { opacity:1; visibility:visible; transform:translateY(0); }
.custom-select-option { width:100%; padding:10px 12px; display:flex; align-items:center; border:0; border-radius:7px; background:transparent; color:#333; font-size:13px; text-align:left; transition:background .14s ease,color .14s ease; }
.custom-select-option:hover { background:#f5f5f5; }
.custom-select-option.is-selected { background:#fff0f1; color:#e80d18; font-weight:600; }
.custom-select-option:focus-visible { outline:2px solid rgba(242,13,24,.18); outline-offset:-2px; }
.custom-select-input { display:none; }