:root{--bg-main:#F5F2E9;--bg-secondary:#181818;--bg-sidebar:#181818;--glass-bg:#FFFFFF;--gold:#16804A;--green:#16804A;--green-light:#2FA866;--red:#C93632;--text:#111111;--text-muted:#6f6a5f;--border:rgba(17,17,17,.10);--sidebar-width:270px;}

/* Paginа: admin/add-offline-student.html — CSS extraido automaticamente */
:root {
      --bg-main: #f5f2e9;
      --bg-sidebar: #111111;
      --bg-card: #ffffff;
      --text: #111111;
      --text-soft: #292929;
      --text-muted: #66635d;
      --border: rgba(17,17,17,.12);
      --green: #237a3b;
      --green-dark: #185b2b;
      --red: #a52a2a;
      --yellow: #d5a900;
      --shadow: 0 8px 30px rgba(0,0,0,.05);
      --radius: 16px;
    }

    * {
      box-sizing: border-box;
    }

    html,
    body {
      margin: 0;
      padding: 0;
      min-height: 100%;
      font-family: Arial, Helvetica, sans-serif;
      background: var(--bg-main);
      color: var(--text);
    }

    body {
      min-height: 100vh;
    }

    body::before {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      background:
        radial-gradient(circle at 85% 15%, rgba(35,122,59,.035), transparent 30%),
        radial-gradient(circle at 15% 85%, rgba(213,169,0,.035), transparent 30%);
      z-index: 0;
    }

    .app {
      min-height: 100vh;
      display: flex;
      position: relative;
      z-index: 1;
    }

.sidebar{position:fixed;inset:0 auto 0 0;width:var(--sidebar-width);height:100vh;background:var(--bg-secondary);border-right:1px solid var(--border);z-index:1050;display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden;transition:transform .25s ease;}
.sidebar-brand{display:flex;align-items:center;gap:11px;padding:20px 18px 18px;border-bottom:1px solid var(--border);text-decoration:none;flex-shrink:0;}
.sidebar-brand img{width:38px;height:38px;object-fit:contain;flex-shrink:0;}
.sidebar-brand h5{margin:0;color:var(--gold);font-size:15px;font-weight:800;line-height:1.1;letter-spacing:.8px;}
.sidebar-brand small{display:block;margin-top:2px;color:var(--text-muted);font-size:9px;font-weight:600;letter-spacing:1px;}
.sidebar-menu{flex:1;padding:14px 12px;display:flex;flex-direction:column;gap:2px;}
.sidebar-section{padding:14px 10px 5px;color:var(--text-muted);font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:1.4px;}
.sidebar-menu a{display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:9px;color:var(--text-muted);text-decoration:none;font-size:12px;font-weight:600;transition:.15s ease;}
.sidebar-menu a i{width:20px;text-align:center;font-size:16px;flex-shrink:0;}
.sidebar-menu a:hover{background:rgba(255,255,255,.055);color:#fff;}
.sidebar-menu a.active{background:rgba(255,215,0,.10);color:var(--gold);}
.sidebar-divider{height:1px;margin:9px 10px;background:rgba(255,255,255,.045);flex-shrink:0;}
.sidebar-footer{padding:14px 18px;border-top:1px solid var(--border);color:var(--text-muted);font-size:9px;text-align:center;flex-shrink:0;}
.sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:1040;}
.sidebar-overlay.show{display:block;}
.main-content{margin-left:var(--sidebar-width);min-height:100vh;}


    .logout:hover {
      background: rgba(255,255,255,.12);
    }

    .main {
      margin-left: var(--sidebar-width);
      width: calc(100% - var(--sidebar-width));
      min-height: 100vh;
      padding: 32px;
    }

    .topbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      margin-bottom: 26px;
    }

    .page-title {
      margin: 0;
      font-size: 28px;
      line-height: 1.1;
    }

    .page-description {
      margin: 8px 0 0;
      color: var(--text-muted);
      font-size: 14px;
    }

    .back-button {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      text-decoration: none;
      color: var(--text);
      border: 1px solid var(--border);
      background: #fff;
      padding: 10px 14px;
      border-radius: 10px;
      font-size: 13px;
    }

    .card-aya {
      background: var(--bg-card);
      color: var(--text);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      padding: 26px;
      max-width: 950px;
    }

    .section-title {
      font-size: 18px;
      font-weight: 700;
      margin: 0 0 18px;
    }

    .section-description {
      color: var(--text-muted);
      font-size: 13px;
      margin: -8px 0 22px;
      line-height: 1.5;
    }

    .form-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 18px;
    }

    .field {
      display: flex;
      flex-direction: column;
      gap: 7px;
    }

    .field.full {
      grid-column: 1 / -1;
    }

    label {
      font-size: 13px;
      font-weight: 700;
      color: var(--text-soft);
    }

    .optional {
      font-weight: 400;
      color: var(--text-muted);
    }

    .form-control,
    .form-select {
      width: 100%;
      min-height: 44px;
      padding: 11px 13px;
      border-radius: 10px;
      border: 1px solid rgba(17,17,17,.16);
      background: #fff;
      color: #111;
      outline: none;
      font-size: 14px;
    }

    .form-control:focus,
    .form-select:focus {
      border-color: var(--green);
      box-shadow: 0 0 0 3px rgba(35,122,59,.10);
    }

    .help {
      font-size: 11px;
      color: var(--text-muted);
      line-height: 1.45;
    }

    .access-box {
      margin-top: 24px;
      border: 1px solid rgba(35,122,59,.18);
      background: rgba(35,122,59,.035);
      border-radius: 13px;
      padding: 18px;
    }

    .checkbox-row {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      cursor: pointer;
    }

    .checkbox-row input {
      margin-top: 3px;
      width: 17px;
      height: 17px;
      accent-color: var(--green);
    }

    .checkbox-title {
      font-size: 14px;
      font-weight: 700;
    }

    .checkbox-description {
      margin-top: 4px;
      color: var(--text-muted);
      font-size: 12px;
      line-height: 1.45;
    }

    .access-fields {
      display: none;
      margin-top: 17px;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
    }

    .access-fields.show {
      display: grid;
    }

    .password-row {
      display: flex;
      gap: 8px;
    }

    .password-row input {
      flex: 1;
    }

    .secondary-button {
      border: 1px solid var(--border);
      background: #fff;
      color: #111;
      border-radius: 10px;
      padding: 0 13px;
      cursor: pointer;
      font-size: 12px;
      white-space: nowrap;
    }

    .secondary-button:hover {
      background: #f5f5f5;
    }

    .actions {
      margin-top: 26px;
      display: flex;
      justify-content: flex-end;
      gap: 10px;
      flex-wrap: wrap;
    }

    .button {
      min-height: 44px;
      border: 0;
      border-radius: 10px;
      padding: 0 18px;
      cursor: pointer;
      font-weight: 700;
      font-size: 13px;
    }

    .button-primary {
      background: var(--green);
      color: #fff;
    }

    .button-primary:hover {
      background: var(--green-dark);
    }

    .button-secondary {
      background: #fff;
      color: #111;
      border: 1px solid var(--border);
    }

    .button:disabled {
      opacity: .55;
      cursor: not-allowed;
    }

    .message {
      display: none;
      margin-bottom: 18px;
      padding: 13px 15px;
      border-radius: 10px;
      font-size: 13px;
      line-height: 1.45;
    }

    .message.show {
      display: block;
    }

    .message.error {
      background: #fff0f0;
      border: 1px solid #efcaca;
      color: #8c2020;
    }

    .message.success {
      background: #effaf1;
      border: 1px solid #c7e5cc;
      color: #23612d;
    }

    .credential-card {
      display: none;
      margin-top: 22px;
      padding: 18px;
      border-radius: 13px;
      background: #111;
      color: #fff;
    }

    .credential-card.show {
      display: block;
    }

    .credential-title {
      font-weight: 700;
      margin-bottom: 10px;
    }

    .credential-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
    }

    .credential-item {
      background: rgba(255,255,255,.07);
      border-radius: 9px;
      padding: 12px;
    }

    .credential-label {
      font-size: 10px;
      opacity: .55;
      text-transform: uppercase;
      letter-spacing: .05em;
      margin-bottom: 5px;
    }

    .credential-value {
      font-size: 14px;
      font-weight: 700;
      word-break: break-all;
    }

    .credential-note {
      margin-top: 12px;
      font-size: 11px;
      line-height: 1.5;
      opacity: .7;
    }

    .toast {
      position: fixed;
      right: 22px;
      bottom: 22px;
      z-index: 3000;
      max-width: 360px;
      background: #111;
      color: #fff;
      padding: 13px 16px;
      border-radius: 10px;
      box-shadow: 0 10px 30px rgba(0,0,0,.18);
      display: none;
      font-size: 13px;
    }

    .toast.show {
      display: block;
    }


    @media (max-width: 991px) {
      .sidebar {
        transform: translateX(-100%);
        transition: transform .2s ease;
      }

      .sidebar.show {
        transform: translateX(0);
      }

      .main {
        margin-left: 0;
        width: 100%;
        padding: 20px;
      }


    }

    @media (max-width: 650px) {
      .form-grid,
      .access-fields,
      .credential-grid {
        grid-template-columns: 1fr;
      }

      .topbar {
        align-items: flex-start;
        flex-direction: column;
      }

      .card-aya {
        padding: 19px;
      }

      .actions {
        justify-content: stretch;
      }

      .actions .button {
        width: 100%;
      }
    }