:root {
  color-scheme: light;
  font-family: "DM Sans", "Noto Sans KR", system-ui, sans-serif;
  color: #17243a;
  background: #f6f8fc;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; }
button, input, select { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: wait; opacity: .65; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid #6f9aff; outline-offset: 3px; }

.button {
  min-height: 43px; display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; border-radius: 11px; padding: 0 17px; font-size: 13px;
  font-weight: 700; border: 1px solid transparent; transition: transform .15s, box-shadow .15s;
  white-space: nowrap;
}
.button:hover { transform: translateY(-1px); }
.button-primary { color: #fff; background: #2962d5; box-shadow: 0 5px 15px #295fd52a; }
.button-primary:hover { background: #1c56cc; box-shadow: 0 7px 18px #295fd53b; }
.button-secondary { color: #263750; background: #fff; border-color: #dfe5ef; }
.button-secondary:hover { border-color: #bfcce0; }
.button-danger { color: #b52f42; background: #fff; border-color: #efc8cf; }
.button-danger:hover { background: #fff4f5; }
.button-wide { width: 100%; justify-content: space-between; height: 49px; padding: 0 20px; }
.icon-button { border: 0; background: transparent; color: #74839b; padding: 4px; font-size: 23px; line-height: 1; }
.icon-button:hover { color: #245bc8; }

.brand { display: flex; align-items: center; gap: 11px; color: #f9fbff; font-size: 19px; font-weight: 800; letter-spacing: -.06em; }
.brand-logo { display: block; width: 39px; height: 39px; object-fit: contain; }
.brand-mark {
  flex: 0 0 auto; display: grid; place-items: center; width: 32px; height: 32px;
  border-radius: 10px; background: #3978f3; color: white; font-weight: 800;
  letter-spacing: -.09em; box-shadow: inset 0 1px 0 #ffffff45;
}
.brand-dark { color: #152743; }
.eyebrow { color: #3f76dd; font-size: 10px; font-weight: 800; letter-spacing: .18em; }

.login-screen { min-height: 100dvh; display: grid; grid-template-columns: 1fr 1fr; background: #fff; }
.login-art {
  position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end;
  align-items: flex-start; padding: 60px; background: linear-gradient(150deg, #0e1f3a, #153f79 70%, #245ec0);
  color: #a7c6ff;
}
.login-art::before { content: ""; position: absolute; width: 420px; height: 420px; right: -160px; top: -130px; border-radius: 50%; background: #5d8eff20; filter: blur(30px); }
.login-art p { z-index: 1; font-size: 10px; letter-spacing: .28em; font-weight: 700; }
.orbit { position: absolute; border: 1px solid #aac8ff35; border-radius: 50%; }
.orbit-one { width: 480px; height: 480px; left: calc(50% - 240px); top: calc(45% - 240px); }
.orbit-two { width: 330px; height: 330px; left: calc(50% - 165px); top: calc(45% - 165px); box-shadow: 0 0 90px #648bff2b; }
.hero-symbol {
  position: absolute; top: calc(45% - 88px); left: calc(50% - 88px);
  display: grid; place-items: center; width: 176px; height: 176px;
  border: 1px solid #a5c8ff54; border-radius: 46px; background: linear-gradient(140deg, #72a6ff2b, #d2e1ff0e);
  color: #eaf2ff; font-size: 118px; font-weight: 300; box-shadow: 0 28px 80px #00102c66;
}
.login-panel { display: flex; flex-direction: column; justify-content: center; width: min(100%, 480px); margin: auto; padding: 38px 52px; }
.login-panel .brand { margin-bottom: 85px; }
.login-copy h1 { margin: 16px 0 16px; font-size: clamp(31px, 3.1vw, 43px); line-height: 1.28; letter-spacing: -.07em; }
.login-copy p { color: #7b8799; font-size: 13px; line-height: 1.8; }
.login-form { display: grid; gap: 9px; margin-top: 36px; }
.login-form label, .folder-dialog label { color: #46546a; font-size: 12px; font-weight: 700; }
.login-form input, .folder-dialog input {
  width: 100%; height: 46px; border: 1px solid #dce3ee; border-radius: 10px;
  padding: 0 14px; background: #fff; color: #192a43; outline: none;
}
.login-form input:focus, .folder-dialog input:focus { border-color: #5988e8; box-shadow: 0 0 0 3px #5990ec21; }
.login-form label:not(:first-child) { margin-top: 13px; }
.login-form .button { margin-top: 16px; }
.form-error { color: #c73545; font-size: 12px; margin: 1px 0; }
.login-footnote { margin-top: 90px; color: #a4aebb; font-size: 11px; }

.app-shell { min-height: 100dvh; display: flex; }
.sidebar {
  position: sticky; top: 0; flex: 0 0 228px; height: 100dvh; display: flex; flex-direction: column;
  padding: 29px 17px 19px; background: #142640; color: #fff;
}
.sidebar .brand { padding: 0 10px; }
.side-nav { margin-top: 46px; }
.nav-item {
  display: flex; align-items: center; gap: 12px; width: 100%; height: 45px;
  border: 0; border-radius: 10px; padding: 0 14px; color: #acbed8;
  background: transparent; font-size: 13px; font-weight: 700; text-align: left;
}
.nav-item span { font-size: 18px; }
.nav-item.active { color: #fff; background: #2b4c7a; }
.sidebar-bottom { margin-top: auto; }
.storage-panel { margin: 0 3px 22px; padding: 17px 15px; border: 1px solid #ffffff19; border-radius: 13px; background: #ffffff09; }
.storage-heading { display: flex; justify-content: space-between; font-size: 11px; color: #d3e0f2; }
.storage-heading strong { color: #fff; font-size: 11px; }
.storage-track { width: 100%; height: 6px; margin: 12px 0 10px; border-radius: 9px; background: #43566f; overflow: hidden; }
.storage-track span { display: block; width: 0; height: 100%; border-radius: inherit; background: #72a4ff; }
.storage-panel p { margin: 0; color: #98abc5; font-size: 10px; }
.storage-panel .archive-storage-heading { margin-top: 17px; padding-top: 14px; border-top: 1px solid #ffffff20; }
.storage-panel .archive-storage-heading + .storage-track span { background: #83d8ba; }
.storage-summary { display: flex; flex-wrap: wrap; gap: 8px; margin: 17px 0 0; }
.storage-summary span { padding: 8px 11px; border: 1px solid #e1e9f4; border-radius: 8px; background: #fff; color: #516783; font-size: 11px; font-weight: 700; }
.account-row { display: flex; align-items: center; gap: 9px; padding: 15px 8px 0; border-top: 1px solid #ffffff20; }
.avatar { display: grid; place-items: center; width: 32px; height: 32px; background: #dce8ff; border-radius: 9px; color: #245ec7; font-size: 13px; font-weight: 800; }
.account-name { flex: 1; font-size: 12px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; }
.logout-button { color: #adbed4; }
.main-content { flex: 1; min-width: 0; }
.topbar { height: 70px; display: flex; justify-content: flex-end; align-items: center; padding: 0 39px; border-bottom: 1px solid #e8ecf3; background: #fff; }
.topbar-end { display: flex; align-items: center; gap: 10px; }
.topbar-account-name { max-width: 160px; overflow: hidden; color: #314563; font-size: 12px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.private-badge { color: #5e6d84; font-size: 11px; font-weight: 600; }
.status-dot { display: inline-block; width: 6px; height: 6px; margin-right: 5px; vertical-align: 2px; border-radius: 50%; background: #39b891; }
.mobile-brand, .mobile-logout, .mobile-nav { display: none; }
.content-wrap { width: min(100%, 1240px); padding: 40px 44px 90px; margin: auto; }
.page-header { display: flex; justify-content: space-between; align-items: end; gap: 20px; }
.page-header .eyebrow { margin: 0 0 8px; }
.page-header h1 { margin: 0; font-size: 29px; letter-spacing: -.06em; }
.page-subtitle { margin: 8px 0 0; color: #8a96a8; font-size: 12px; }
.header-actions { display: flex; gap: 8px; padding-bottom: 1px; }
.upload-banner {
  display: flex; align-items: center; gap: 15px; position: relative; overflow: hidden;
  min-height: 110px; margin-top: 31px; padding: 18px 28px;
  border: 1px dashed #a9c4f4; border-radius: 16px;
  background: linear-gradient(100deg, #eaf2ff, #f7faff 80%);
}
.upload-banner.drag-over { border-color: #2666de; background: #deebff; }
.download-help { padding: 12px 15px; margin: 18px 0 -12px; border: 1px solid #d8e5f7; border-radius: 10px; background: #f0f6ff; color: #405c83; font-size: 11px; line-height: 1.6; }
.banner-icon { display: grid; place-items: center; flex: 0 0 auto; width: 52px; height: 52px; border-radius: 14px; background: #d6e5ff; color: #3571dd; font-size: 31px; font-weight: 300; }
.upload-banner strong { font-size: 13px; }
.upload-banner p { margin: 5px 0 0; color: #8797af; font-size: 11px; }
.banner-decor { margin-left: auto; color: #c4d7f4; font-size: 56px; letter-spacing: .18em; line-height: .3; }
.browser-panel { margin-top: 31px; padding: 25px 27px 36px; border: 1px solid #e8edf4; border-radius: 16px; background: #fff; box-shadow: 0 7px 25px #18294608; min-height: 350px; }
.browser-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding-bottom: 22px; border-bottom: 1px solid #edf0f5; }
.breadcrumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; min-width: 0; color: #a0aabc; font-size: 12px; }
.breadcrumbs button { border: 0; background: none; color: #62738a; font-size: 12px; font-weight: 600; padding: 3px 1px; }
.breadcrumbs button:last-child { color: #263d62; }
.breadcrumbs button:hover { color: #2867d5; }
.search-box { display: flex; align-items: center; gap: 7px; width: 223px; height: 36px; padding: 0 10px; border: 1px solid #e4e9f0; border-radius: 9px; color: #8797a8; }
.search-box span { font-size: 21px; line-height: 1; }
.search-box:focus-within { border-color: #7ea4e7; }
.search-box input { width: 100%; border: 0; outline: 0; font-size: 11px; background: transparent; }
.search-box input::placeholder { color: #a5afbd; }
.item-section { margin-top: 26px; }
.section-heading { display: flex; align-items: baseline; gap: 8px; margin-bottom: 15px; }
.section-heading h2 { margin: 0; font-size: 14px; letter-spacing: -.02em; }
.section-heading span { color: #a0aab7; font-size: 11px; }
.folder-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.folder-card {
  display: flex; align-items: center; gap: 11px; min-width: 0; height: 63px; padding: 0 13px;
  border: 1px solid #e7ebf2; border-radius: 11px; background: #fff; text-align: left; color: #2e3d51;
}
.folder-card:hover { border-color: #a8c3f1; background: #f9fbff; }
.archive-folder-card { border-color: #b9d9d0; background: #f4fbf8; }
.archive-folder-card .folder-icon { color: #219c78; }
.folder-card .item-menu { flex: 0 0 auto; }
.folder-open { display: flex; align-items: center; gap: 11px; flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; background: transparent; text-align: left; color: inherit; }
.folder-open strong { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.folder-icon { display: grid; place-items: center; width: 35px; height: 35px; border-radius: 9px; background: #e9f1ff; color: #3976df; font-size: 19px; }
.folder-card strong { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.folder-arrow { color: #a5b4c8; font-size: 17px; }
.file-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(163px, 1fr)); gap: 14px; }
.file-card { min-width: 0; border: 1px solid #e8edf2; border-radius: 11px; overflow: hidden; background: #fff; transition: border-color .15s, transform .15s; }
.file-card:hover { transform: translateY(-2px); border-color: #aac4ef; }
.file-preview { display: grid; place-items: center; width: 100%; height: 137px; border: 0; padding: 0; background: #f0f4fa; overflow: hidden; }
.file-preview img { width: 100%; height: 100%; object-fit: cover; transition: transform .18s; }
.file-preview:is(button) { cursor: pointer; }
.file-preview:is(button):hover img { transform: scale(1.025); }
.video-preview { position: relative; background: linear-gradient(145deg, #182d4d, #091426); color: #fff; }
.video-preview .file-symbol { background: #ffffff12; color: #dceaff; }
.video-play-mark { position: absolute; display: grid; place-items: center; width: 43px; height: 43px; border-radius: 50%; background: #ffffffea; color: #1b4d99; font-size: 18px; box-shadow: 0 7px 20px #0005; transform: translateX(2px); }
.document-preview { position: relative; background: linear-gradient(145deg, #edf3fc, #dfe9f8); color: #315f9f; }
.document-preview .file-symbol { background: #fff; box-shadow: 0 5px 17px #2d52761c; }
.document-view-mark { position: absolute; right: 10px; bottom: 9px; padding: 4px 7px; border-radius: 6px; background: #ffffffed; color: #3268b5; font-size: 9px; font-weight: 800; box-shadow: 0 3px 12px #2449741c; }
.file-symbol { display: grid; place-items: center; width: 52px; height: 61px; border-radius: 7px; background: #dfeafa; color: #4074c4; font-size: 10px; font-weight: 800; letter-spacing: .04em; }
.file-info { padding: 11px 11px 12px; }
.file-name { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #2b3a52; font-size: 11px; font-weight: 700; text-decoration: none; }
.file-name:is(button), .download-link:is(button) { border: 0; padding: 0; background: transparent; text-align: left; }
.file-name:hover { color: #2868d5; }
.file-meta { display: flex; align-items: center; justify-content: space-between; gap: 5px; margin-top: 8px; color: #9da8b8; font-size: 10px; }
.download-link { color: #6b83a8; font-size: 17px; text-decoration: none; line-height: 1; }
.download-link:hover { color: #2868d5; }
.file-actions { display: flex; align-items: center; gap: 7px; }
.media-dialog { width: min(1100px, calc(100% - 24px)); max-width: none; max-height: none; border: 1px solid #263951; border-radius: 17px; padding: 0; background: #0a1626; color: #fff; box-shadow: 0 25px 80px #020814a8; overflow: hidden; }
.media-dialog::backdrop { background: #041020d9; backdrop-filter: blur(3px); }
.media-dialog-content { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; height: min(88dvh, 850px); }
.media-dialog-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-width: 0; padding: 14px 17px; background: #101f33; }
.media-dialog-header > div { min-width: 0; }
.media-dialog-header h2 { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; }
.media-dialog-header p { margin: 4px 0 0; color: #96a9c1; font-size: 10px; }
.media-close { flex: 0 0 auto; width: 37px; height: 37px; border: 0; border-radius: 50%; background: #ffffff12; color: #fff; font-size: 24px; line-height: 1; }
.media-close:hover { background: #ffffff24; }
.media-stage { display: grid; place-items: center; min-width: 0; min-height: 0; padding: 10px; overflow: auto; background: #050d18; }
.media-stage img, .media-stage video { display: block; max-width: 100%; max-height: 100%; object-fit: contain; }
.media-stage video { width: 100%; height: 100%; }
.media-stage.document-stage { padding: 0; background: #d5dae2; overflow: hidden; }
.media-stage.text-stage { place-items: stretch; padding: 0; background: #f7f9fc; }
.pdf-document { display: grid; grid-template-rows: auto minmax(0, 1fr); width: 100%; height: 100%; min-width: 0; min-height: 0; background: #d5dae2; }
.pdf-toolbar { display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 43px; padding: 6px 10px; border-bottom: 1px solid #c6ccd5; background: #f8fafc; color: #34475f; font-size: 11px; font-weight: 700; }
.pdf-toolbar button { display: grid; place-items: center; min-width: 31px; height: 29px; padding: 0 8px; border: 1px solid #d5dce6; border-radius: 6px; background: #fff; color: #39516f; font-size: 17px; line-height: 1; }
.pdf-toolbar button:hover:not(:disabled) { border-color: #9fb8dd; background: #edf4ff; color: #205fc4; }
.pdf-toolbar button:disabled { color: #aeb8c5; }
.pdf-toolbar-divider { width: 1px; height: 20px; margin: 0 4px; background: #d8dee7; }
#pdf-page-label, #pdf-zoom-label { min-width: 54px; text-align: center; }
.pdf-canvas-wrap { min-width: 0; min-height: 0; overflow: auto; padding: 18px; text-align: center; }
.pdf-canvas-wrap canvas { display: block; margin: 0 auto; background: #fff; box-shadow: 0 4px 22px #23364b2c; }
.text-document { width: 100%; height: 100%; margin: 0; padding: 24px 28px; overflow: auto; background: #fff; color: #24364d; font: 13px/1.65 ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace; text-align: left; tab-size: 4; white-space: pre-wrap; overflow-wrap: anywhere; }
.media-stage [hidden] { display: none; }
.media-loading { color: #aabbd0; font-size: 12px; }
.media-error { max-width: 500px; color: #ffb9c1; text-align: center; font-size: 12px; line-height: 1.6; }
.media-stage:is(.document-stage, .text-stage) .media-loading { color: #5f7188; }
.media-stage:is(.document-stage, .text-stage) .media-error { color: #a3273a; }
.media-dialog-footer { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 11px 17px; background: #101f33; color: #8fa2bb; font-size: 10px; }
.media-dialog-footer .button { min-height: 36px; }
.office-edit { padding: 4px 7px; border: 1px solid #bed3ee; border-radius: 6px; background: #f0f6ff; color: #316ac3; font-size: 10px; font-weight: 700; white-space: nowrap; }
.office-edit:hover { background: #dfecff; }
.office-edit:disabled { opacity: .6; }
.document-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(245px, 1fr)); gap: 12px; }
.document-card { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 12px; border: 1px solid #e6ebf3; border-radius: 12px; background: #fff; }
.document-card:hover { border-color: #aac4ef; }
.document-symbol { display: grid; place-items: center; flex: 0 0 40px; width: 40px; height: 44px; border-radius: 10px; background: #e9f1ff; color: #336dda; font-size: 22px; }
.document-symbol.sheet { background: #e7f6ee; color: #25875b; }
.document-open { flex: 1; min-width: 0; padding: 0; border: 0; background: none; color: #273c5a; text-align: left; }
.document-open strong, .document-open small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.document-open strong { font-size: 12px; }
.document-open small { margin-top: 5px; color: #91a0b1; font-size: 10px; }
.item-menu { border: 0; border-radius: 7px; background: #edf3fd; color: #5374a6; min-width: 27px; min-height: 27px; font-size: 16px; }
.item-menu:hover { background: #dae8fc; color: #245bc8; }
.empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 245px; color: #8d99aa; text-align: center; }
.empty-icon { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 17px; background: #eef4ff; color: #75a1ec; font-size: 30px; }
.empty-state h3 { margin: 16px 0 5px; color: #4b5e77; font-size: 13px; }
.empty-state p { margin: 0; font-size: 11px; }
.message { margin-top: 15px; padding: 10px 13px; background: #fff4f3; border-radius: 8px; color: #bd3947; font-size: 12px; }
.message.success { background: #eef9f4; color: #247352; }
.trash-summary { margin-top: 25px; padding: 12px 15px; border: 1px solid #e2e9f2; border-radius: 10px; background: #fff; color: #5c718e; font-size: 11px; font-weight: 700; }
.trash-list { display: grid; gap: 10px; margin-top: 14px; }
.trash-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 13px; padding: 14px 16px; border: 1px solid #e4eaf2; border-radius: 12px; background: #fff; }
.trash-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 10px; background: #eef3fa; color: #5c7597; font-size: 22px; }
.trash-info { min-width: 0; }
.trash-info strong, .trash-info span, .trash-info small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trash-info strong { color: #2c405e; font-size: 12px; }
.trash-info span { margin-top: 4px; color: #7a8ba1; font-size: 10px; }
.trash-info small { margin-top: 3px; color: #a16c74; font-size: 10px; }
.trash-actions { display: flex; gap: 7px; }
.trash-actions .button { min-height: 35px; padding: 0 11px; font-size: 11px; }
#security-status.security-ready { color: #267353; }
#security-status.security-error { color: #b63c4a; }

.upload-queue { position: fixed; right: 24px; bottom: 24px; z-index: 10; width: min(365px, calc(100vw - 32px)); border-radius: 15px; overflow: hidden; background: white; border: 1px solid #e0e7f1; box-shadow: 0 18px 50px #14294d38; }
.queue-heading { display: flex; justify-content: space-between; align-items: center; padding: 14px 17px; background: #f3f7ff; }
.queue-heading div { display: flex; gap: 9px; align-items: center; }
.queue-heading strong { font-size: 12px; }
.queue-heading span { color: #8392a6; font-size: 10px; }
.queue-items { max-height: 260px; overflow-y: auto; }
.queue-item { padding: 13px 17px; border-top: 1px solid #f0f2f6; }
.queue-line { display: flex; align-items: center; gap: 10px; }
.queue-file-icon { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 8px; color: #3474df; background: #e9f1ff; font-size: 17px; }
.queue-file-info { flex: 1; min-width: 0; }
.queue-file-info strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.queue-file-info span { color: #93a0af; font-size: 10px; }
.queue-retry { border: 0; background: none; color: #2868d5; font-size: 10px; font-weight: 700; }
.queue-progress { height: 4px; margin-top: 10px; border-radius: 6px; background: #e8eef7; overflow: hidden; }
.queue-progress span { display: block; height: 100%; background: #3e79e0; }
.queue-item.failed .queue-progress span { background: #df6572; }
.queue-item.done .queue-progress span { background: #40b794; }

.folder-dialog { width: min(390px, calc(100% - 32px)); border: 1px solid #e6ebf1; border-radius: 17px; padding: 25px; box-shadow: 0 20px 65px #15284d3b; }
.folder-dialog::backdrop { background: #0c1c3680; }
.dialog-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; background: #e9f1ff; color: #3972d7; font-size: 21px; }
.folder-dialog h2 { margin: 15px 0 3px; font-size: 19px; }
.folder-dialog p { color: #8b98aa; font-size: 11px; line-height: 1.6; }
.folder-dialog label { display: block; margin: 22px 0 8px; }
.folder-dialog label input { display: block; width: 100%; margin-top: 8px; }
.field-optional { color: #8998ad; font-size: 10px; font-weight: 500; }
.folder-lock-mark { color: #587091; font-size: 11px; vertical-align: 1px; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }
.folder-dialog select { width: 100%; height: 46px; border: 1px solid #dce3ee; border-radius: 10px; padding: 0 10px; background: #fff; color: #192a43; }
.create-options { display: grid; gap: 9px; margin-top: 18px; }
.create-options button { display: grid; grid-template-columns: 37px 1fr; column-gap: 10px; align-items: center; padding: 10px 13px; border: 1px solid #e2e8f2; border-radius: 10px; background: #fff; color: #263b57; text-align: left; }
.create-options button:hover { border-color: #9cbae9; background: #f7faff; }
.create-options button span { grid-row: span 2; color: #3475dc; font-size: 25px; }
.create-options button strong { font-size: 12px; }
.create-options button small { color: #8998ad; font-size: 10px; }
.editor-view { min-height: calc(100dvh - 70px); background: #f2f5fa; }
.editor-import-notice { max-width: 890px; margin: 14px auto 0; padding: 10px 14px; border: 1px solid #cadcf3; border-radius: 8px; background: #f7fbff; color: #415f84; font-size: 11px; line-height: 1.5; }
.editor-header { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; gap: 18px; padding: 16px 26px; border-bottom: 1px solid #dfe6ef; background: #fff; }
.editor-back { flex: 0 0 auto; border: 0; background: none; color: #55749f; font-size: 12px; font-weight: 700; }
.editor-back:hover { color: #245bc8; }
.editor-identity { flex: 1; min-width: 0; }
.editor-identity input { display: block; width: min(100%, 540px); padding: 5px 7px; border: 1px solid transparent; border-radius: 7px; background: transparent; color: #193252; font-size: 18px; font-weight: 700; }
.editor-identity input:focus { border-color: #a7c4f2; outline: none; background: #f9fbff; }
.editor-identity span { display: block; margin: 2px 7px 0; color: #8090a5; font-size: 10px; }
.editor-identity span.error { color: #c44151; }
.editor-actions { display: flex; gap: 8px; }
.editor-actions .button { min-height: 37px; font-size: 11px; }
.document-menu { position: sticky; top: 77px; z-index: 4; display: flex; gap: 3px; padding: 5px max(18px, calc((100% - 880px) / 2)); border-bottom: 1px solid #e7ecf3; background: #fff; white-space: nowrap; }
.document-menu details { position: relative; }
.document-menu summary { padding: 7px 11px; border-radius: 6px; color: #38516e; font-size: 12px; cursor: pointer; list-style: none; }
.document-menu summary::-webkit-details-marker { display: none; }
.document-menu summary:hover, .document-menu details[open] summary { background: #eaf1fc; color: #245bc8; }
.document-menu-panel { position: absolute; top: 100%; left: 0; z-index: 6; width: max-content; min-width: 185px; max-height: min(70dvh, 480px); overflow-y: auto; padding: 6px; border: 1px solid #dbe4f1; border-radius: 10px; background: #fff; box-shadow: 0 12px 36px #20365226; }
.document-menu-panel button { display: block; width: 100%; padding: 9px 10px; border: 0; border-radius: 6px; background: transparent; color: #304969; font-size: 12px; text-align: left; white-space: nowrap; }
.document-menu-panel button:hover:not(:disabled) { background: #edf3fe; }
.document-menu-panel button:disabled { color: #aab5c3; cursor: default; }
.document-menu-panel hr { margin: 5px 4px; border: 0; border-top: 1px solid #e8edf4; }
.text-toolbar { position: sticky; top: 115px; z-index: 2; display: flex; align-items: center; gap: 4px; overflow-x: auto; padding: 10px max(18px, calc((100% - 880px) / 2)); border-bottom: 1px solid #e0e6ef; background: #fff; white-space: nowrap; }
.text-toolbar button, .sheet-controls button { flex: 0 0 auto; min-height: 31px; padding: 0 9px; border: 1px solid transparent; border-radius: 7px; background: transparent; color: #36516f; font-size: 11px; }
.text-toolbar button:hover, .sheet-controls button:hover { background: #eaf1fc; }
.text-toolbar button.active { color: #215cc4; background: #e7f0ff; }
.toolbar-divider { flex: 0 0 auto; width: 1px; height: 20px; margin: 0 5px; background: #dce4ee; }
.text-editor-wrap { padding: 30px 22px 85px; }
.text-editor { width: min(100%, var(--paper-width, 794px)); min-height: var(--paper-height, 1123px); margin: auto; padding: var(--paper-margin, 94px); background: #fff; box-shadow: 0 6px 35px #22395612; color: #1b2b40; font-size: 15px; line-height: 1.75; }
.text-editor .tiptap { min-height: 760px; outline: none; }
.text-editor h1 { font-size: 30px; line-height: 1.3; }
.text-editor h2 { font-size: 23px; line-height: 1.4; }
.text-editor h3 { font-size: 19px; }
.text-editor blockquote { margin: 18px 0; padding-left: 15px; border-left: 3px solid #8fb0e5; color: #60738d; }
.text-editor p { margin: 0 0 12px; }
.text-editor ul, .text-editor ol { padding-left: 25px; }
.text-editor a { color: #2867d5; }
.text-editor .tableWrapper { max-width: 100%; margin: 18px 0; overflow-x: auto; }
.text-editor table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.text-editor th, .text-editor td { min-width: 72px; border: 1px solid #cbd6e4; padding: 7px 9px; vertical-align: top; overflow-wrap: anywhere; }
.text-editor th { background: #eaf1fb; font-weight: 700; }
.text-editor th p, .text-editor td p { margin: 0; }
.text-editor .selectedCell { background: #cce0ff; }
.text-editor .column-resize-handle { position: absolute; top: 0; right: -2px; bottom: 0; width: 4px; background: #3e7ce5; pointer-events: none; }
.text-editor .tableWrapper.resize-cursor { cursor: col-resize; }
.editor-dialog input { width: 100%; height: 44px; padding: 0 11px; border: 1px solid #dce3ee; border-radius: 9px; }
.sheet-editor-wrap { display: flex; flex-direction: column; height: calc(100dvh - 147px); padding: 18px 24px calc(65px + env(safe-area-inset-bottom)); overflow: hidden; }
.sheet-controls { position: fixed; right: 0; bottom: 0; left: 228px; z-index: 9; display: flex; flex-wrap: nowrap; align-items: center; gap: 4px; padding: 9px 12px calc(9px + env(safe-area-inset-bottom)); border: 1px solid #dce4ef; border-right: 0; border-bottom: 0; border-left: 0; background: #fff; box-shadow: 0 -7px 24px #1c35521a; }
.sheet-tabs { display: flex; flex: 1 1 auto; align-items: center; gap: 3px; min-width: 0; max-width: 100%; overflow-x: auto; scrollbar-width: thin; }
.sheet-controls > button { flex: 0 0 auto; }
.sheet-tabs button[aria-selected="true"] { background: #e4efff; color: #205bc8; font-weight: 800; }
.sheet-formula-bar { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border: 1px solid #e0e7f1; border-top: 0; background: #fff; }
.sheet-formula-bar strong { flex: 0 0 50px; color: #40639b; font-size: 12px; }
.sheet-formula-bar input { flex: 1; min-width: 0; height: 31px; padding: 0 9px; border: 1px solid #dfe6ef; border-radius: 6px; color: #26364e; font-size: 12px; }
.sheet-format-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; padding: 9px 12px; border: 1px solid #e0e7f1; border-top: 0; background: #fff; }
.sheet-format-bar button, .sheet-format-bar select { min-height: 30px; padding: 4px 9px; border: 1px solid #dce5f1; border-radius: 6px; background: #fff; color: #36516f; font-size: 11px; }
.sheet-format-bar button[aria-pressed="true"] { border-color: #8db5f4; background: #e7f0ff; color: #205bc8; }
.sheet-format-bar select { min-height: 30px; padding: 4px 8px; border: 1px solid #dce5f1; border-radius: 6px; background: #fff; color: #36516f; font-size: 11px; }
.sheet-format-bar label { display: inline-flex; align-items: center; gap: 5px; color: #60738e; font-size: 11px; white-space: nowrap; }
.sheet-format-bar input[type="color"] { width: 32px; height: 29px; padding: 2px; border: 1px solid #dce5f1; border-radius: 6px; background: #fff; }
.sheet-format-bar input[type="number"] { width: 60px; height: 30px; padding: 3px 5px; border: 1px solid #dce5f1; border-radius: 6px; color: #36516f; font-size: 11px; }
.sheet-tip { margin: 10px 2px; color: #7c8da4; font-size: 11px; }
.sheet-grid-wrap { flex: 1 1 auto; min-height: 150px; overflow: auto; border: 1px solid #dfe6ef; background: #fff; }
.sheet-grid { border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.sheet-grid th, .sheet-grid td { height: 34px; border-right: 1px solid #e5ebf2; border-bottom: 1px solid #e5ebf2; }
.sheet-grid th { position: relative; padding: 0; background: #f4f7fb; color: #68809f; font-size: 11px; font-weight: 700; text-align: center; }
.sheet-grid th.sheet-expand-edge { background: #edf4ff; color: #2e6fda; cursor: pointer; box-shadow: inset 0 0 0 1px #c7daf8; }
.sheet-grid th.sheet-expand-edge:hover { background: #dfeaff; }
.sheet-grid th .sheet-filter-button { position: absolute; right: 13px; top: 3px; min-width: 18px; height: 19px; padding: 0 2px; border: 0; border-radius: 3px; background: transparent; color: #57779d; font-size: 10px; cursor: pointer; }
.sheet-grid th .sheet-filter-button:hover { background: #dce9fa; color: #1e5db7; }
.sheet-grid thead th { position: sticky; top: 0; z-index: 2; }
.sheet-grid thead th:first-child { left: 0; z-index: 4; }
.sheet-grid tbody th { position: sticky; left: 0; z-index: 1; }
.sheet-grid td { padding: 0; overflow: hidden; }
.sheet-grid td.sheet-cell-selected { box-shadow: inset 0 0 0 2px #4e87e9; }
.sheet-grid td.sheet-range-selected { background: #eaf2ff; box-shadow: inset 0 0 0 1px #a9c5f3; }
.sheet-grid input { width: 100%; height: 33px; padding: 0 8px; border: 0; outline: none; background: transparent; color: #26364e; font-size: 12px; }
.sheet-grid input:focus { box-shadow: inset 0 0 0 2px #4e87e9; }
.sheet-grid td.sheet-range-selected input { background: #eaf2ff; }
.sheet-grid input.formula-error { color: #c44151; }
.sheet-resize-handle { position: absolute; z-index: 5; border: 0; padding: 0; background: transparent; touch-action: none; }
.sheet-resize-handle.column { top: 0; right: -4px; width: 9px; height: 100%; cursor: col-resize; }
.sheet-resize-handle.row { bottom: -4px; left: 0; width: 100%; height: 9px; cursor: row-resize; }
.sheet-resize-handle:hover, .sheet-resize-handle:focus-visible { background: #4e87e980; }
.settings-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 18px; margin-top: 30px; }
.settings-card { padding: 24px; border: 1px solid #e8edf4; border-radius: 16px; background: #fff; }
.settings-card h2 { margin: 0 0 7px; font-size: 18px; }
.settings-card > p { margin: 0 0 18px; color: #77869b; font-size: 12px; line-height: 1.6; }
.service-card > p { margin-bottom: 0; }
.settings-form { display: grid; gap: 14px; }
.settings-form label, .create-user-form label { display: grid; gap: 6px; color: #46546a; font-size: 12px; font-weight: 700; }
.admin-secret-label { display: grid; gap: 6px; max-width: 310px; margin: 0 0 18px; color: #46546a; font-size: 12px; font-weight: 700; }
.settings-form input, .create-user-form input { width: 100%; height: 43px; border: 1px solid #dce3ee; border-radius: 9px; padding: 0 12px; color: #192a43; }
.settings-form select { width: 100%; height: 43px; border: 1px solid #dce3ee; border-radius: 9px; padding: 0 12px; color: #192a43; background: #fff; }
.admin-secret-label input { width: 100%; height: 43px; border: 1px solid #dce3ee; border-radius: 9px; padding: 0 12px; }
.settings-form .button { justify-self: start; }
.token-scopes { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 9px; margin: 0; padding: 13px; border: 1px solid #e4eaf2; border-radius: 10px; }
.token-scopes legend { padding: 0 5px; color: #46546a; font-size: 11px; font-weight: 700; }
.settings-form .token-scopes label { display: flex; align-items: center; gap: 7px; color: #52627a; font-weight: 600; }
.token-scopes input { width: 16px; height: 16px; margin: 0; }
.api-token-created { display: grid; gap: 10px; padding: 14px; margin: 14px 0; border: 1px solid #bfe4d3; border-radius: 10px; background: #eff9f4; color: #155438; font-size: 12px; overflow-wrap: anywhere; }
.api-token-secret { display: block; padding: 10px; border-radius: 7px; background: #fff; color: #173355; user-select: all; }
.api-token-empty { color: #8491a4; font-size: 12px; }
.plugin-create-card { margin-top: 25px; }
.plugin-create-card textarea { width: 100%; min-height: 155px; border: 1px solid #dce3ee; border-radius: 9px; padding: 12px; color: #192a43; font: 12px/1.5 ui-monospace, SFMono-Regular, monospace; resize: vertical; }
.plugin-safety-note { padding: 14px 16px; margin-top: 22px; border: 1px solid #f0d9a7; border-radius: 11px; background: #fff8e8; color: #76591f; font-size: 12px; line-height: 1.6; }
.plugin-catalog { margin-top: 30px; }
.plugin-catalog h2 { font-size: 19px; }
.plugin-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); gap: 13px; }
.plugin-card { display: grid; align-content: start; gap: 10px; padding: 18px; border: 1px solid #e3eaf3; border-radius: 13px; background: #fff; }
.plugin-card h3 { margin: 0; font-size: 15px; }
.plugin-card p { margin: 0; color: #738198; font-size: 12px; line-height: 1.6; }
.plugin-card .plugin-meta { color: #93a0b1; font-size: 10px; }
.plugin-card-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 4px; }
.plugin-runtime-dialog { width: min(960px, calc(100vw - 26px)); height: min(760px, calc(100dvh - 26px)); padding: 0; overflow: hidden; border: 1px solid #dce3ee; border-radius: 15px; box-shadow: 0 20px 70px #15284445; }
.plugin-runtime-dialog::backdrop { background: #101d31a8; }
.plugin-runtime-dialog header { display: flex; height: 48px; align-items: center; justify-content: space-between; padding: 0 15px; border-bottom: 1px solid #e5eaf2; }
.plugin-runtime-dialog iframe { display: block; width: 100%; height: calc(100% - 48px); border: 0; background: #fff; }
.danger-card { border-color: #f1d9dd; }
.admin-panel { margin-top: 18px; }
.create-user-form { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; margin-bottom: 20px; }
.create-user-form label { flex: 1 1 180px; }
.credential-result { padding: 14px; margin: 14px 0; border-radius: 10px; background: #eff7f2; color: #155438; font-size: 13px; overflow-wrap: anywhere; }
.credential-result code { user-select: all; }
.user-list { display: grid; gap: 10px; }
.user-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 14px; border: 1px solid #e7ebf2; border-radius: 10px; }
.user-row-main strong { display: block; font-size: 13px; }
.user-row-main span { display: block; margin-top: 5px; color: #8793a5; font-size: 11px; }
.user-row-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.user-row-actions .button { min-height: 34px; padding: 0 10px; font-size: 11px; }
.user-quota-label { align-self: center; color: #687c98; font-size: 10px; }
.archive-history { margin-top: 28px; padding-top: 23px; border-top: 1px solid #e3eaf3; }
.archive-status-text { margin: 6px 0; color: #657b98; font-size: 11px; line-height: 1.5; }
.archive-snapshot-list { display: grid; gap: 9px; margin-top: 14px; }
.archive-load-more { display: block; width: 100%; margin-top: 12px; }
.archive-load-more[hidden] { display: none; }
.archive-snapshot { padding: 12px; border: 1px solid #e2e9f2; border-radius: 10px; background: #fff; }
.archive-snapshot-title { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; color: #2b4261; font-size: 12px; }
.archive-snapshot-title span { color: #7d90a8; font-size: 11px; }
.archive-snapshot-actions { display: flex; gap: 7px; margin-top: 10px; }
.archive-snapshot-actions .button, .archive-entry .button { min-height: 29px; padding: 4px 9px; font-size: 10px; }
.archive-snapshot-items { display: grid; gap: 6px; margin-top: 11px; }
.archive-entry { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 9px; border-radius: 7px; background: #f6f9fd; color: #405977; font-size: 11px; overflow-wrap: anywhere; }
.archive-entry span { min-width: 0; }
.archive-empty { margin: 8px 0; color: #8a9ab0; font-size: 11px; }

@media (max-width: 800px) {
  .sidebar { flex-basis: 190px; }
  .sheet-controls { left: 190px; }
  .content-wrap { padding: 30px 25px 70px; }
  .topbar { padding: 0 25px; }
}
@media (max-width: 650px) {
  .login-screen { display: block; }
  .login-art { display: none; }
  .login-panel { width: 100%; min-height: 100dvh; padding: 33px 28px; justify-content: flex-start; }
  .login-panel .brand { margin-bottom: 80px; }
  .login-footnote { margin-top: auto; padding-top: 50px; }
  .sidebar { display: none; }
  .topbar { height: 60px; padding: 0 18px; justify-content: space-between; }
  .topbar-end { gap: 7px; }
  .topbar-account-name { max-width: 70px; }
  .private-badge { white-space: nowrap; }
  .mobile-brand { display: flex; gap: 8px; align-items: center; font-size: 15px; font-weight: 800; letter-spacing: -.06em; }
  .mobile-brand .brand-logo { width: 30px; height: 30px; }
  .mobile-nav { display: block; font-size: 18px; }
  .mobile-logout { display: block; font-size: 19px; }
  .content-wrap { padding: 26px 17px 70px; }
  .page-header { align-items: flex-start; flex-direction: column; }
  .page-header h1 { font-size: 24px; }
  .header-actions { width: 100%; }
  .header-actions { flex-wrap: wrap; }
  .header-actions .button { flex: 1; }
  .header-actions .refresh-label { display: none; }
  .header-actions #refresh-button { flex: 0 0 43px; }
  .header-actions #create-button { flex: 1 1 135px; }
  .header-actions #archive-run-button { flex: 1 1 120px; }
  .editor-header { flex-wrap: wrap; gap: 7px; padding: 11px 14px; }
  .editor-identity { order: 2; flex-basis: 100%; }
  .editor-identity input { font-size: 16px; }
  .editor-actions { margin-left: auto; }
  .document-menu { top: 112px; overflow-x: auto; padding: 4px 8px; }
  .document-menu-panel { position: fixed; top: 151px; left: 8px; }
  .text-toolbar { top: 151px; padding: 8px 12px; }
  .text-editor-wrap { padding: 12px 9px 45px; }
  .text-editor { min-height: 70dvh; padding: 27px 21px; font-size: 14px; }
  .text-editor .tiptap { min-height: 60dvh; }
  .sheet-editor-wrap { height: calc(100dvh - 172px); padding: 11px 9px calc(59px + env(safe-area-inset-bottom)); }
  .sheet-controls { left: 0; overflow: hidden; padding-right: 8px; padding-left: 8px; }
  .upload-banner { min-height: 76px; margin-top: 22px; padding: 12px 14px; gap: 11px; }
  .banner-icon { width: 40px; height: 40px; border-radius: 10px; font-size: 24px; }
  .upload-banner strong { font-size: 11px; }
  .upload-banner p { font-size: 10px; line-height: 1.5; }
  .banner-decor { display: none; }
  .browser-panel { margin-top: 19px; padding: 17px 15px 26px; }
  .browser-toolbar { align-items: stretch; flex-direction: column; gap: 13px; }
  .search-box { width: 100%; }
  .folder-grid { grid-template-columns: 1fr 1fr; }
  .file-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .file-preview { height: 123px; }
  .media-dialog { width: calc(100% - 12px); border-radius: 12px; }
  .media-dialog-content { height: calc(100dvh - 18px); }
  .media-dialog-header { padding: 11px 12px; }
  .media-dialog-footer { padding: 9px 12px; }
  .media-dialog-footer > span { display: none; }
  .media-dialog-footer #media-download { width: 100%; }
  .media-dialog-footer .button { width: 100%; }
  .upload-queue { right: 10px; bottom: 10px; width: calc(100vw - 20px); }
  .trash-row { grid-template-columns: 38px minmax(0, 1fr); padding: 12px; }
  .trash-icon { width: 38px; height: 38px; }
  .trash-actions { grid-column: 1 / -1; justify-content: flex-end; }
}
@media (max-width: 390px) {
  .folder-grid { grid-template-columns: 1fr; }
  .header-actions .button { font-size: 11px; padding: 0 10px; }
}