:root{
      --bg: #f7f9fb;
      --card: #ffffff;
      --muted: #6b7280;
      --accent: #0ea5a4;
      --danger: #dc2626;
      --radius: 12px;
      --maxw: 900px;
      --gap: 20px;
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
      color-scheme: light;
    }

     * {box-sizing: border-box;}
    html,body {height:100%;}
    body{
      background: linear-gradient(180deg,var(--bg),#eef3f8 60%);
    }
    #siteParent{
      margin:0;
      font-size:16px;
      line-height:1.55;
      color:#0f172a;
      -webkit-font-smoothing:antialiased;
      -moz-osx-font-smoothing:grayscale;
      padding:40px 20px;
      display:flex;
      align-items:flex-start;
      justify-content:center;
    }

    .container{
      width:100%;
      max-width:var(--maxw);
      background:var(--card);
      border-radius:var(--radius);
      box-shadow:0 8px 30px rgba(15,23,42,0.08);
      padding:28px;
      display:grid;
      grid-template-columns: 1fr 320px;
      gap:var(--gap);
    }

    header{
      grid-column: 1 / -1;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      margin-bottom:8px;
    }

    .brand{
      display:flex;
      gap:14px;
      align-items:center;
    }
    .logo{
      width:56px;
      height:56px;
      border-radius:10px;
      background:linear-gradient(135deg,var(--accent),#60a5fa);
      display:flex;
      align-items:center;
      justify-content:center;
      color:white;
      font-weight:700;
      font-size:18px;
      box-shadow:0 6px 18px rgba(14,165,164,0.18);
    }
    h1{ margin:0; font-size:18px; letter-spacing:0.2px; }
    p.lead { margin:0; color:var(--muted); font-size:14px; }

    main{
      padding-right:10px;
    }
    aside{
      background:linear-gradient(180deg,#ffffff,#fbfeff);
      border-radius:10px;
      padding:18px;
      border:1px solid rgba(15,23,42,0.04);
      height:fit-content;
    }

    section{
      margin-bottom:18px;
    }
    section h2{
      margin:0 0 8px 0;
      font-size:16px;
      color:#071035;
    }
    section p, section ul, section ol {
      margin:0;
      color: #123;
      font-size:14px;
    }
    .muted{ color:var(--muted); font-size:13px; margin-top:8px; }

    ul{ padding-left:18px; margin-top:8px; }
    ul li{ margin-bottom:6px; }

    .notice{
      background:#fffbeb;
      border-left:4px solid #f59e0b;
      padding:10px 12px;
      border-radius:8px;
      color:#6b4a00;
      font-size:13px;
    }
    .action{
      display:flex;
      gap:10px;
    }
    .btn{
      padding:8px 12px;
      border-radius:8px;
      border:0;
      font-weight:600;
      cursor:pointer;
    }
    .btn-primary{
      background:var(--accent);
      color:white;
      box-shadow:0 6px 18px rgba(14,165,164,0.12);
    }
    .btn-ghost{
      background:transparent;
      color:var(--muted);
      border:1px solid rgba(15,23,42,0.06);
    }

    /* responsive */
    @media (max-width:880px){
      .container{ grid-template-columns: 1fr; padding:18px; }
      aside{ order:2; margin-top:6px; }
    }

    /* print */
    @media print{
      body{ background:white; padding:0; }
      .container{ box-shadow:none; border-radius:0; }
      .action, header > .brand .logo { display:none; }
    }