:root {
    --text: #202124;
    --text-muted: #5f6368;
    --border: #dadce0;
    --danger: #c5221f;
    --danger-bg: #fce8e6;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
    display: flex;
    flex-direction: column;
    margin: 0;
    font: 14px/1.5 "Google Sans", Roboto, system-ui, -apple-system, sans-serif;
    color: var(--text);
    background: #f1f3f4;
}

#gate {
    position: fixed;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: radial-gradient(circle at 50% 0%, #ffffff 0%, #f1f3f4 70%);
}

#card {
    width: 100%;
    max-width: 400px;
    padding: 40px 32px 32px;
    text-align: center;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(60, 64, 67, .16), 0 8px 24px rgba(60, 64, 67, .08);
}

#card h1 {
    margin: 20px 0 8px;
    font-size: 22px;
    font-weight: 500;
    letter-spacing: -.2px;
}

#status {
    min-height: 21px;
    margin: 0;
    color: var(--text-muted);
}

#status a { color: #1a73e8; }

#status.error {
    padding: 10px 12px;
    color: var(--danger);
    text-align: left;
    background: var(--danger-bg);
    border-radius: 8px;
    overflow-wrap: anywhere;
}

#authorize {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    margin-top: 24px;
    padding: 11px 16px;
    font: inherit;
    font-size: 14px;
    font-weight: 500;
    color: #3c4043;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
    transition: background-color .15s, box-shadow .15s, border-color .15s;
}

#authorize:hover {
    background: #f7f8f8;
    border-color: #d2d5d9;
    box-shadow: 0 1px 2px rgba(60, 64, 67, .3), 0 1px 3px 1px rgba(60, 64, 67, .15);
}

#authorize:active { background: #f1f3f4; }

#authorize:focus-visible {
    outline: none;
    border-color: #1a73e8;
    box-shadow: 0 0 0 3px rgba(26, 115, 232, .25);
}

#spinner {
    width: 24px;
    height: 24px;
    margin: 24px auto 0;
    border: 3px solid #e8eaed;
    border-top-color: #1a73e8;
    border-radius: 50%;
    animation: spin .8s linear infinite;
}

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

@media (prefers-reduced-motion: reduce) {
    #spinner { animation-duration: 2.4s; }
}

#filebar {
    flex: 0 0 auto;
    z-index: 3;
    background: #fff;
    border-bottom: 1px solid var(--border);
    box-shadow: 0 1px 2px rgba(60, 64, 67, .08);
}

#filebar summary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    font-weight: 500;
    cursor: pointer;
    list-style: none;
    user-select: none;
}

#filebar > details > summary::-webkit-details-marker { display: none; }

#filebar > details > summary::before {
    content: '';
    width: 0;
    height: 0;
    border: 5px solid transparent;
    border-left-color: var(--text-muted);
    transform: translateX(2px);
}

#filebar > details[open] > summary::before {
    transform: rotate(90deg) translateX(2px);
}

#filebar-panel {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    max-height: min(50vh, 420px);
    overflow: auto;
    border-top: 1px solid var(--border);
}

#filebar-panel section {
    min-width: 0;
    padding: 12px 16px 16px;
}

#filebar-panel section + section {
    border-left: 1px solid var(--border);
}

#filebar-panel h2 {
    margin: 0 0 8px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .2px;
    color: var(--text-muted);
    text-transform: uppercase;
}

#filebar-panel ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

#filebar-panel .file-tree ul {
    padding-left: 14px;
}

#filebar-panel .file-tree details {
    margin: 0;
}

#filebar-panel .file-tree summary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    font-weight: 500;
    border-radius: 6px;
    list-style: none;
}

#filebar-panel .file-tree summary:hover { background: #f1f3f4; }

#filebar-panel .file-tree summary::-webkit-details-marker { display: none; }

#filebar-panel .file-tree summary::before {
    content: '';
    width: 0;
    height: 0;
    border: 5px solid transparent;
    border-left-color: var(--text-muted);
    transform: translateX(2px);
}

#filebar-panel .file-tree details[open] > summary::before {
    transform: rotate(90deg) translateX(2px);
}

#filebar-panel .file-tree .filebar-empty {
    padding-left: 28px;
}

#filebar-panel .file-tree .file-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

#filebar-panel .file-tree .file-row > a:first-child {
    flex: 1 1 auto;
    min-width: 0;
    padding-left: 26px;
}

#filebar-panel .file-tree a.open-drive {
    flex: 0 0 auto;
    padding: 4px 8px;
    font-size: 12px;
    font-weight: 500;
    color: #174ea6;
    white-space: nowrap;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 6px;
}

#filebar-panel .file-tree a.open-drive:hover {
    background: #f7f8f8;
    border-color: #d2d5d9;
}

#filebar-panel a {
    display: block;
    padding: 6px 8px;
    color: var(--text);
    text-decoration: none;
    border-radius: 6px;
    overflow-wrap: anywhere;
}

#filebar-panel a:hover { background: #f1f3f4; }

#filebar-panel a.current {
    color: #174ea6;
    background: #e8f0fe;
}

.filebar-empty {
    padding: 6px 8px;
    color: var(--text-muted);
}

#frame {
    display: block;
    flex: 1 1 auto;
    width: 100%;
    min-height: 0;
    height: auto;
    border: 0;
    background: #fff;
}

@media (max-width: 640px) {
    #filebar-panel {
        grid-template-columns: 1fr;
    }

    #filebar-panel section + section {
        border-left: 0;
        border-top: 1px solid var(--border);
    }
}

.hidden {
    display: none !important;
}