:root{
      --bg:#070707; --panel:#151515; --line:#2e2e2e; --text:#f2f2f2; --muted:#b8b8b8;
      --gold:#fad814; --danger:#ff6961; --ok:#63d58a;
    }
    *{box-sizing:border-box}
    body{
      margin:0;
      min-height:100vh;
      color:var(--text);
      font-family:Inter,Segoe UI,Arial,sans-serif;
      display:flex;
      justify-content:center;
      padding:24px 0 40px;
      background:var(--bg);
    }
    .wrap{
      width:min(980px,92vw);
      min-height:calc(100vh - 64px);
      display:flex;
      flex-direction:column;
      justify-content:center;
    }
    .card{border:none;border-radius:16px;background:transparent;width:100%;margin:0 auto}
    .hero{margin:0 auto 12px;max-width:880px;display:flex;justify-content:center}
    .brand{display:flex;justify-content:center}
    .logo{
      width:min(220px,56vw);height:auto;display:block
    }
    .steps{
      position:fixed;left:50%;transform:translateX(-50%);
      bottom:calc(env(safe-area-inset-bottom, 0px) + 10px);
      width:min(520px,calc(100vw - 24px));
      display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;
      z-index:18;pointer-events:none
    }
    .chip{height:3px;border-radius:999px;background:#2b2b2b;overflow:hidden}
    .chip::before{content:"";display:block;width:0;height:100%;background:var(--gold);transition:width .22s ease}
    .chip.on::before{width:100%}
    .section{padding:16px;border-top:1px solid var(--line)}
    .section:first-child{border-top:none}
    .section h2{margin:0 0 10px;color:#ffe87e;font-size:1rem}
    .hint{margin:0 0 10px;color:var(--muted);font-size:.86rem}
    .roles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
    .role{border:1px solid #3a3a3a;border-radius:12px;background:var(--panel);padding:11px;cursor:pointer;color:var(--text)}
    .role h3{margin:0;font-size:.93rem;color:#fff}
    .role p{margin:7px 0 0;color:var(--muted);font-size:.8rem}
    .role.active{border-color:rgba(250,216,20,.7);background:var(--gold);color:#111}
    .role.active h3,.role.active p{color:#111}
    .grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
    .field label{display:block;margin:0 0 6px;color:#e6e6e6;font-size:.86rem}
    .req{color:var(--gold);font-weight:700}
    input,select,textarea{
      width:100%;border:1px solid #3c3c3c;border-radius:11px;background:#1b1b1b;color:var(--text);
      padding:10px 11px;font:inherit
    }
    textarea{min-height:125px;resize:vertical}
    input:focus,select:focus,textarea:focus{outline:none;border-color:rgba(250,216,20,.7);box-shadow:0 0 0 3px rgba(250,216,20,.13)}
    .help{margin-top:6px;color:var(--muted);font-size:.78rem}
    .box{border:1px solid #3b3b3b;border-radius:11px;background:#1b1b1b;padding:10px}
    .box label{display:flex;gap:9px;align-items:flex-start;margin:0}
    .box label input{flex:0 0 auto;width:auto}
    .avg{border:none;border-radius:12px;background:transparent;padding:11px 0;display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
    .avg .v{font-size:1.9rem;font-weight:800;color:var(--gold)}
    .s{position:relative;display:inline-block;width:18px;color:rgba(255,255,255,.25)}
    .s::before{content:"★";position:absolute;left:0;top:0;width:0;overflow:hidden;color:var(--gold)}
    .s.full::before{width:100%}.s.half::before{width:50%}
    .ratings{display:grid;gap:9px}
    .r{display:flex;justify-content:space-between;align-items:center;gap:10px;border:none;border-radius:11px;background:transparent;padding:10px 0}
    .stars{display:flex;gap:6px;flex-wrap:nowrap;max-width:400px;width:100%}
    .star{
      flex:1 1 20%;min-width:0;aspect-ratio:1/1;height:auto;border:none;border-radius:9px;background:#101010;
      cursor:pointer;position:relative;display:grid;place-items:center;padding:0
    }
    .star::before{
      content:"";width:min(18px,82%);aspect-ratio:1/1;background:url("../assets/logo_40.png") center/contain no-repeat;
      filter:grayscale(1) brightness(.30);opacity:.95;transition:filter .15s ease,opacity .15s ease,transform .12s ease
    }
    .star.active{background:rgba(250,216,20,.13)}
    .star.active::before{filter:none;opacity:1}
    .star:active::before{transform:scale(.95)}
    .counter{text-align:right;margin-top:6px;color:var(--muted);font-size:.78rem}
    .actions{
      padding:15px 16px;border-top:none;display:flex;justify-content:space-between;gap:10px;align-items:center;
      position:sticky;bottom:calc(env(safe-area-inset-bottom, 0px) + 24px);z-index:20;background:transparent;box-shadow:none
    }
    .status{min-height:1.1rem;font-size:.85rem}
    .status.error{color:var(--danger)} .status.ok{color:var(--ok)}
    .btns{display:flex;gap:8px}
    button{font:inherit}
    .btn{padding:9px 13px;border-radius:11px;border:1px solid transparent;cursor:pointer;font-weight:700}
    .btn.primary{background:var(--gold);border-color:rgba(250,216,20,.7);color:#111}
    .btn.secondary{background:#111;border-color:#474747;color:#ddd}
    .btn[disabled]{opacity:.55;cursor:not-allowed}
    select, option{color:var(--text)}
    option{background:#1b1b1b}
    .hidden{display:none!important}
    @media (max-width:830px){
      .roles,.grid{grid-template-columns:1fr}
      .wrap{padding-bottom:146px}
      .actions{
        position:fixed;left:0;right:0;
        bottom:calc(env(safe-area-inset-bottom, 0px) + 14px);
        padding:10px 16px calc(env(safe-area-inset-bottom, 0px) + 12px);
        background:transparent
      }
      .steps{bottom:calc(env(safe-area-inset-bottom, 0px) + 4px)}
    }
    @media (max-width:620px){.r{flex-direction:column;align-items:flex-start}}