*{box-sizing:border-box;}
:root{--bg:#0f2f24;--bg-soft:#123629;--panel:#163d2f;--panel-border:rgba(255,255,255,.08);--text:#ffffff;--muted:rgba(255,255,255,.72);--input-bg:#ffffff;--input-text:#111111;--accent:#e57b4e;--accent-strong:#ff9d00;--accent-soft:rgba(229,123,78,.18);--danger:#ff6b6b;--radius-xl:18px;--radius-lg:14px;--radius-md:12px;--shadow:0 10px 30px rgba(0,0,0,.25);--max-width:860px;}
html,body{margin:0;min-height:100%;}
body{background:linear-gradient(180deg,var(--bg) 0%,#0b221a 100%);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;}
input,select,button,textarea{font:inherit;}
.app-shell{padding:16px;}
.page{width:100%;max-width:var(--max-width);margin:0 auto;display:grid;gap:14px;}
.page--narrow{max-width:560px;}
.panel{background:rgba(18,54,41,.95);border:1px solid var(--panel-border);border-radius:var(--radius-xl);box-shadow:var(--shadow);padding:16px;}
.hero-panel h1{margin:0;font-size:28px;line-height:1.15;}
.hero-topline{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px;}
.hero-kicker{font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-strong);font-weight:700;}
.mode-badge{display:inline-flex;align-items:center;justify-content:center;min-height:30px;padding:0 12px;border-radius:999px;background:var(--accent-soft);color:#ffd6c4;font-size:13px;font-weight:700;}
.hero-text{margin:10px 0 0;color:var(--muted);font-size:15px;line-height:1.5;}
.order-form{display:grid;gap:14px;}
.form-grid{display:grid;gap:12px;}
.form-grid--two,.form-grid--three{grid-template-columns:1fr;}
.field{display:grid;gap:8px;}
.field__label{font-size:14px;font-weight:700;color:rgba(255,255,255,.88);}
.field input,.field select,.field textarea{width:100%;min-height:52px;padding:0 14px;border:0;border-radius:var(--radius-md);background:var(--input-bg);color:var(--input-text);outline:none;}
.field textarea{min-height:110px;padding:14px;resize:vertical;}
.field input:focus,.field select:focus,.field textarea:focus{box-shadow:0 0 0 3px rgba(255,157,0,.24);}
.toggle{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 14px;border-radius:var(--radius-md);background:rgba(255,255,255,.06);color:var(--text);}
.toggle input{width:18px;height:18px;margin:0;}
.racket-cards{display:grid;gap:12px;}
.racket-card{padding:14px;border-radius:16px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);}
.racket-card__header{margin-bottom:12px;}
.racket-card__header h2{margin:0;font-size:18px;}
.form-actions{display:grid;gap:10px;}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 16px;border:0;border-radius:12px;text-decoration:none;cursor:pointer;font-weight:800;}
.btn--primary{background:var(--accent);color:#fff;}
.btn--ghost{background:rgba(255,255,255,.08);color:#fff;}
.alert{padding:12px 14px;border-radius:12px;font-size:14px;font-weight:700;}
.alert--error{background:rgba(255,107,107,.14);color:#ffd1d1;border:1px solid rgba(255,107,107,.25);margin-bottom:12px;}
.alert--success{background:rgba(22,163,74,.14);color:#d7ffe5;border:1px solid rgba(22,163,74,.28);margin-bottom:12px;}
.summary-list{display:grid;gap:12px;margin:0;}
.summary-list div{display:grid;gap:4px;padding-bottom:12px;border-bottom:1px solid rgba(255,255,255,.08);}
.summary-list dt{font-size:13px;text-transform:uppercase;letter-spacing:.08em;color:var(--accent-strong);}
.summary-list dd{margin:0;font-size:16px;}
.top-gap{margin-top:4px;}
.price-total{margin-top:18px;padding:16px 18px;border:2px solid #111;border-radius:14px;background:#ea0707;text-align:center;font-size:18px;font-weight:700;letter-spacing:.3px;}
.price-total strong{display:block;margin-top:6px;font-size:34px;line-height:1;}
.panel-box{padding:14px;border-radius:16px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);}
.panel-box h3{margin:0 0 12px;font-size:18px;line-height:1.2;}
.check-line{display:inline-flex;align-items:center;gap:10px;width:auto;max-width:100%;min-height:42px;margin:0 0 8px;white-space:nowrap;font-size:16px;line-height:1.2;cursor:pointer;touch-action:pan-y;}
.check-line:last-child{margin-bottom:0;}
.check-line input{width:20px;height:20px;margin:0;flex:0 0 20px;}
.check-line span{display:block;flex:none;}
.field input[type="date"]{width:100%;max-width:100%;min-width:0;display:block;appearance:none;-webkit-appearance:none;}
.site-footer{margin-top:40px;padding:18px 12px;text-align:center;border-top:1px solid rgba(255,255,255,.08);font-size:10px;opacity:.9;}
.site-footer a{color:inherit;text-decoration:none;}
.site-footer a:hover{opacity:1;}
input[type="file"]{padding:12px;}
.photo-modal{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;padding:20px;}
.photo-modal[hidden]{display:none;}
.photo-modal__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.75);}
.photo-modal__box{position:relative;z-index:2;max-width:95vw;max-height:95vh;}
.photo-modal__box img{display:block;max-width:95vw;max-height:95vh;border-radius:14px;}
.photo-modal__close{position:absolute;top:-12px;right:-12px;width:36px;height:36px;border:0;border-radius:50%;cursor:pointer;font-size:22px;}
.toast-success{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:9999;background:#16a34a;color:#fff;padding:14px 18px;border-radius:12px;font-weight:700;box-shadow:0 10px 30px rgba(0,0,0,.18);animation:toastIn .25s ease;}
@keyframes toastIn{from{opacity:0;transform:translateX(-50%) translateY(20px);}to{opacity:1;transform:translateX(-50%) translateY(0);}}
.field--full{grid-column:1/-1;}
.check-group{display:grid;gap:10px;}

/* SETTINGS FINAL */
.settings-grid{display:grid;gap:18px;}
.settings-section{padding:18px;border:1px solid rgba(255,255,255,.08);border-radius:14px;background:rgba(255,255,255,.02);}
.settings-section h2{margin:0 0 14px;font-size:18px;line-height:1.2;}
.settings-divider{height:1px;background:rgba(255,255,255,.08);margin:18px 0;}
.settings-actions{margin-top:22px;display:flex;gap:12px;flex-wrap:wrap;}
.settings-check{display:flex;align-items:center;gap:10px;padding:8px 0;}
.settings-check input[type="checkbox"]{width:18px;height:18px;margin:0;padding:0;flex:0 0 18px;cursor:pointer;}
.settings-check label{width:auto;flex:none;margin:0;cursor:default;}
.settings-check span{margin:0;line-height:1.2;}
.settings-secret{letter-spacing:.08em;}
.settings-note{margin-top:8px;font-size:13px;opacity:.65;}

@media (min-width:640px){
.app-shell{padding:24px;}
.panel{padding:20px;}
.form-grid--two{grid-template-columns:repeat(2,minmax(0,1fr));}
.form-grid--three{grid-template-columns:repeat(3,minmax(0,1fr));}
.form-actions{grid-template-columns:repeat(2,minmax(0,1fr));}
}

@media (min-width:900px){
.settings-grid--2{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start;}
}

@media (max-width:640px){
.settings-section{padding:14px;border-radius:12px;}
.settings-section h2{font-size:16px;}
.settings-actions{flex-direction:column;}
.settings-actions .btn{width:100%;}
}

@media (max-width:480px){
.app-shell{padding:12px;}
.panel{padding:14px;}
.hero-panel h1{font-size:24px;}
.check-line{font-size:15px;gap:8px;}
.price-total{padding:14px;}
.price-total strong{font-size:30px;}
}
.hero-topline{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
    }
    
    .hero-left{
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
    }
    
    .hero-search{
    margin-left:auto;
    }
    
    .quick-search-form{
    display:flex;
    gap:8px;
    align-items:center;
    }
    
    .quick-search-form input{
    width:130px;
    height:42px;
    border:none;
    border-radius:12px;
    padding:0 14px;
    font-size:16px;
    font-weight:700;
    }
    
    .quick-search-form button{
    height:42px;
    padding:0 16px;
    border:none;
    border-radius:12px;
    cursor:pointer;
    font-weight:800;
    background:#e67e4b;
    color:#fff;
    }
    /* MENU ABOVE FOOTER */

.footer-menu-wrap{
    display:flex;
    justify-content:center;
    margin:28px 0 18px;
}

.footer-menu-btn{
    border:none;
    background:#ff8b42;
    color:#fff;
    font-size:16px;
    font-weight:700;
    padding:14px 28px;
    border-radius:999px;
    cursor:pointer;
    box-shadow:0 10px 24px rgba(255,139,66,.25);
}

.footer-menu-btn:active{
    transform:scale(.98);
}

/* OVERLAY */

.footer-menu-overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.55);
    backdrop-filter:blur(4px);
    display:none;
    align-items:flex-end;
    justify-content:center;
    z-index:9999;
    padding:20px;
}

.footer-menu-overlay.is-open{
    display:flex;
}

/* PANEL */

.footer-menu-panel{
    width:100%;
    max-width:420px;
    background:#10251d;
    border:1px solid rgba(255,255,255,.08);
    border-radius:26px;
    padding:22px;
    box-shadow:0 18px 50px rgba(0,0,0,.35);
}

.footer-menu-close{
    width:44px;
    height:44px;
    border:none;
    border-radius:50%;
    background:#ff8b42;
    color:#fff;
    font-size:20px;
    cursor:pointer;
    margin:0 0 16px auto;
    display:block;
}

.footer-menu-panel a{
    display:block;
    text-decoration:none;
    color:#fff;
    background:#163428;
    padding:14px 16px;
    border-radius:14px;
    margin-bottom:10px;
    font-weight:600;
}
/* OVERLAY */

.footer-menu-overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.55);
    backdrop-filter:blur(4px);
    display:flex;
    align-items:flex-end;
    justify-content:center;
    z-index:9999;
    padding:20px;

    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .25s ease, visibility .25s ease;
}

.footer-menu-overlay.is-open{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
}

/* PANEL */

.footer-menu-panel{
    width:100%;
    max-width:420px;
    background:#10251d;
    border:1px solid rgba(255,255,255,.08);
    border-radius:26px;
    padding:22px;
    box-shadow:0 18px 50px rgba(0,0,0,.35);

    transform:translateY(80px);
    opacity:0;
    transition:transform .35s ease, opacity .35s ease;
}

.footer-menu-overlay.is-open .footer-menu-panel{
    transform:translateY(0);
    opacity:1;
}
html,
body{
    overflow-x:hidden;
    -webkit-overflow-scrolling:touch;
}