*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --verde:#1e4030;
      --verde-medio:#2d5c42;
      --verde-claro:#3d7a58;
      --laranja:#e05c25;
      --laranja-soft:#f0784a;
      --creme:#f7f4ef;
      --branco:#ffffff;
      --texto:#1a2e22;
      --muted:#6b7a6e;
      --borda:#d8e0d8;
      --header-h:68px;
    }

    html, body {
      height:100%;
      background:var(--creme);
      color:var(--texto);
      font-family:'Inter', sans-serif;
      overflow:hidden;
    }

    header {
      position:fixed;
      top:0;
      left:0;
      right:0;
      height:var(--header-h);
      display:flex;
      align-items:center;
      justify-content:space-between;
      padding:0 32px;
      background:var(--verde);
      border-bottom:3px solid var(--laranja);
      z-index:100;
      animation:slideDown .45s ease both;
    }

    @keyframes slideDown {
      from { transform:translateY(-100%); opacity:0; }
      to { transform:translateY(0); opacity:1; }
    }

    .logo {
      display:flex;
      align-items:center;
      gap:12px;
      text-decoration:none;
    }

    .logo-icon {
      width:36px;
      height:36px;
      background:var(--laranja);
      border-radius:6px;
      display:flex;
      align-items:center;
      justify-content:center;
      flex-shrink:0;
    }

    .logo-icon svg { width:20px; height:20px; fill:#fff; }

    .logo-text {
      display:flex;
      flex-direction:column;
      gap:1px;
    }

    .logo-name {
      font-family:'Merriweather', serif;
      font-weight:700;
      font-size:.95rem;
      color:#fff;
      letter-spacing:.01em;
      line-height:1.1;
    }

    .logo-sub {
      font-size:.68rem;
      font-weight:400;
      color:rgba(255,255,255,.55);
      letter-spacing:.06em;
      text-transform:uppercase;
    }

    main {
      position:fixed;
      top:var(--header-h);
      left:0;
      right:0;
      bottom:0;
      padding:20px 24px 20px;
      display:flex;
      flex-direction:column;
      gap:14px;
      animation:fadeUp .5s .15s ease both;
    }

    @keyframes fadeUp {
      from { opacity:0; transform:translateY(12px); }
      to { opacity:1; transform:translateY(0); }
    }

    .embed-wrapper {
      flex:1;
      position:relative;
      border-radius:10px;
      overflow:hidden;
      border:1px solid var(--borda);
      background:var(--branco);
      box-shadow:0 2px 16px rgba(30,64,48,.08), 0 1px 4px rgba(30,64,48,.06);
    }

    .embed-wrapper iframe {
      position:absolute;
      inset:0;
      width:100%;
      height:100%;
      border:none;
    }

    .placeholder {
      position:absolute;
      inset:0;
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:center;
      gap:12px;
      background:var(--branco);
      transition:opacity .5s;
    }

    .placeholder-icon {
      width:48px;
      height:48px;
      border-radius:10px;
      background:var(--verde);
      display:flex;
      align-items:center;
      justify-content:center;
    }

    .placeholder-icon svg {
      width:26px;
      height:26px;
      fill:#fff;
      opacity:.6;
    }

    .placeholder p {
      font-size:.85rem;
      color:var(--muted);
    }

    footer {
      display:flex;
      align-items:center;
      justify-content:space-between;
      flex-shrink:0;
      font-size:.73rem;
      color:var(--muted);
      padding:10px 2px 0;
      border-top:1px solid var(--borda);
    }

    .footer-brand {
      display:flex;
      align-items:center;
      gap:6px;
    }

    .footer-dot {
      width:6px;
      height:6px;
      border-radius:50%;
      background:var(--laranja);
    }

    footer a {
      color:var(--verde-claro);
      text-decoration:none;
    }

    footer a:hover { text-decoration:underline; }

    #login-screen,
    #transition-screen {
      position:fixed;
      inset:0;
      background:#1e4030;
      display:flex;
      justify-content:center;
      align-items:center;
      z-index:99999;
    }

    .login-box {
      width:360px;
      background:#fff;
      padding:35px;
      border-radius:12px;
      box-shadow:0 12px 40px rgba(0,0,0,.25);
      text-align:center;
    }

    .login-box h2 {
      color:#1e4030;
      margin-bottom:10px;
      font-family:'Merriweather', serif;
    }

    .login-box p {
      color:#555;
      margin-bottom:18px;
    }

    .login-box input {
      width:100%;
      padding:12px;
      border:1px solid #ccc;
      border-radius:8px;
      font-size:15px;
      margin-bottom:15px;
    }

    .login-box button {
      width:100%;
      padding:12px;
      border:none;
      border-radius:8px;
      background:#e05c25;
      color:#fff;
      cursor:pointer;
      font-size:15px;
      transition:.2s;
    }

    .login-box button:hover {
      background:#c84d1b;
    }

    #error {
      color:#d32f2f;
      margin-top:12px;
      font-size:14px;
    }

    .loader {
      width:32px;
      height:32px;
      border:4px solid #d8e0d8;
      border-top:4px solid #e05c25;
      border-radius:50%;
      margin:10px auto 0;
      animation:spin 1s linear infinite;
    }

    @keyframes spin {
      from { transform:rotate(0deg); }
      to { transform:rotate(360deg); }
    }

    @media (max-width:600px) {
      header { padding:0 16px; }
      main { padding:12px 12px 14px; }
      .logo-sub { display:none; }
      .login-box { width:90%; }
    }