:root{
      --bg:#e9edf2; --surface:#ffffff; --ink:#18232f; --muted:#5d6b7a;
      --line:#ccd6e0; --accent:#14508c; --accent-soft:#eaf1f9;
      --ok:#146b4f; --err:#a8271d; --radius:6px;
    }
    *{box-sizing:border-box}
    html,body{margin:0}
    body{
      background:var(--bg); color:var(--ink);
      font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
      font-size:15px; line-height:1.5; padding:24px 16px 56px;
    }
    .sheet{max-width:720px; margin:0 auto; background:var(--surface);
      border:1px solid var(--line); border-radius:var(--radius);
      box-shadow:0 1px 2px rgba(24,35,47,.06)}

    .head{padding:26px 24px 20px; border-bottom:1px solid var(--line); text-align:center}
    .logo{display:block; margin:0 auto 14px; width:88px; height:auto}
    .head h1{margin:0; font-size:21px; font-weight:600; line-height:1.3; letter-spacing:-.01em}
    .head p{margin:8px auto 0; color:var(--muted); font-size:14px; max-width:46ch}

    .block{padding:22px 24px; border-bottom:1px solid var(--line)}
    .block h2{margin:0 0 14px; font-size:15px; font-weight:600}
    .block--id{background:var(--accent-soft); border-left:3px solid var(--accent)}

    .grid{display:grid; grid-template-columns:1fr 1fr; gap:14px 16px}
    .field{display:flex; flex-direction:column; gap:6px; min-width:0}
    .field--wide{grid-column:1 / -1}
    label{font-size:13px; font-weight:500; color:var(--muted)}
    input,select{
      font:inherit; color:var(--ink); background:#fff;
      border:1px solid var(--line); border-radius:var(--radius);
      padding:9px 10px; width:100%; min-width:0;
    }
    input:focus,select:focus{outline:2px solid var(--accent); outline-offset:-1px; border-color:var(--accent)}
    select:disabled,input:disabled{background:#f2f5f8; color:#98a5b2}
    #sothe{max-width:220px; font-weight:500; letter-spacing:.02em}

    .name{padding:9px 0 0; font-size:19px; font-weight:600; min-height:34px}
    .name.empty{font-size:15px; font-weight:400; color:#98a5b2}
    .hint{margin:0; font-size:12.5px; color:var(--muted); min-height:18px}
    .hint.err{color:var(--err)}
    .hint.ok{color:var(--ok)}

    .check{display:inline-flex; align-items:center; gap:8px; margin:-4px 0 14px;
      font-size:14px; color:var(--ink); font-weight:400; cursor:pointer}
    .check input{width:auto}

    .block--camket{background:#f6f9fb}
    .agree{display:flex; gap:12px; align-items:flex-start; margin:0; cursor:pointer;
      font-size:13.5px; font-weight:400; color:var(--ink)}
    .agree input{flex:0 0 auto; width:18px; height:18px; margin:3px 0 0; cursor:pointer}
    .agree p{margin:0 0 10px; line-height:1.55; max-width:66ch}
    .agree p:last-child{margin-bottom:0}

    .actions{padding:20px 24px; display:flex; gap:10px; align-items:center; flex-wrap:wrap}
    .btn{font:inherit; font-weight:500; padding:10px 20px; border-radius:var(--radius);
      border:1px solid var(--accent); background:var(--accent); color:#fff; cursor:pointer}
    .btn:hover{background:#10426f}
    .btn:disabled{opacity:.45; cursor:not-allowed; background:var(--accent)}
    .btn--ghost{background:#fff; color:var(--accent)}
    .btn--ghost:hover{background:var(--accent-soft)}
    .note{margin:0; font-size:12.5px; color:var(--muted)}

    .banner{margin:0; padding:12px 24px; font-size:14px; border-bottom:1px solid var(--line)}
    .banner.ok{background:#e7f4ee; color:var(--ok)}
    .banner.err{background:#fbeceb; color:var(--err)}

    @media (max-width:560px){
      .grid{grid-template-columns:1fr}
      .block,.head,.actions{padding-left:16px; padding-right:16px}
      .banner{padding-left:16px; padding-right:16px}
      .actions{flex-direction:column; align-items:stretch}
      .actions .btn{width:100%}
      .head h1{font-size:19px}
      .logo{width:76px}
    }