:root { --bg:#f6f7f4; --paper:#fff; --ink:#202d2d; --muted:#71807c; --line:#e4e9e4; --deep:#142b2a; --accent:#ee764c; --accent-soft:#fff0e9; --green:#21836e; --green-soft:#e8f6ef; --amber:#b67b27; --amber-soft:#fff5df; --red:#bd5c51; --red-soft:#fff0ed; --blue:#557c99; --shadow:0 16px 45px rgba(30,52,43,.055); --radius:19px; }
    * { box-sizing:border-box; }
    html { scroll-behavior:smooth; }
    body { margin:0; background:var(--bg); color:var(--ink); font:15px/1.55 'Inter',sans-serif; }
    button, input, select { font:inherit; }
    button { cursor:pointer; }
    button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline:3px solid #f2aa83; outline-offset:3px; }
    a { color:inherit; }
    .icon { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex:none; }
    .icon.sm { width:15px; height:15px; }
    .icon.lg { width:24px; height:24px; }
    .mono { font-family:'Inter',sans-serif; font-variant-numeric:tabular-nums; }
    .eyebrow { color:var(--muted); font:700 11px/1.4 'Inter',sans-serif; text-transform:uppercase; letter-spacing:.07em; }
    .muted { color:var(--muted); }
    .shell { display:flex; width:100%; min-height:100vh; }
    .sidebar { width:246px; flex:none; min-height:100vh; padding:27px 14px 18px; background:#f0f3ef; border-right:1px solid #dfe6df; display:flex; flex-direction:column; position:sticky; top:0; height:100vh; z-index:5; }
    .brand { display:flex; align-items:center; gap:11px; padding:0 13px 29px; }
    .brand-mark { width:36px; height:36px; display:grid; place-items:center; flex:none; }
    .brand-mark img { display:block; width:100%; height:100%; }
    .brand-name { font-size:19px; font-weight:700; letter-spacing:-.035em; line-height:1.1; }
    .nav-label { padding:0 14px; margin:10px 0 8px; }
    .nav { display:grid; gap:3px; margin-top:8px; }
    .nav button { width:100%; border:0; background:transparent; color:#53635e; border-radius:11px; display:flex; align-items:center; gap:12px; padding:11px 13px; text-align:left; font-weight:600; transition:background .18s, color .18s, transform .18s; }
    .nav button:hover { background:#e6ebe5; color:var(--ink); transform:translateX(2px); }
    .nav button.active { background:var(--deep); color:#fff; box-shadow:0 5px 12px rgba(20,43,42,.14); }
    .nav button .nav-count { margin-left:auto; border-radius:6px; min-width:22px; height:19px; display:grid; place-items:center; background:#deebe4; color:#53715e; font:600 11px 'Inter',sans-serif; }
    .nav button.active .nav-count { color:#fff; background:rgba(255,255,255,.16); }
    .sidebar-bottom { margin-top:auto; padding:0 7px; }
    .side-note { border:1px solid #dce5db; background:rgba(255,255,255,.52); border-radius:13px; padding:13px; color:#6d7b74; font-size:12px; line-height:1.5; }
    .side-note strong { display:flex; align-items:center; gap:7px; color:#476f5b; font-size:12px; margin-bottom:5px; }
    .side-footer { padding:16px 6px 0; color:#a0aaa1; font:11px 'Inter',sans-serif; }
    .workspace { min-width:0; flex:1; }
    .topbar { width:100%; height:72px; border-bottom:1px solid var(--line); background:rgba(255,255,255,.75); display:flex; align-items:center; justify-content:space-between; padding:0 37px; gap:18px; }
    .top-left { display:flex; gap:12px; align-items:center; min-width:0; }
    .crumb { color:#78877f; font-size:13px; font-weight:600; white-space:nowrap; }
    .crumb strong { color:var(--ink); font-weight:700; }
    .slash { color:#c5cec6; }
    .top-right { display:flex; align-items:center; gap:10px; margin-left:auto; }
    .user-menu { position:relative; }
    .user-menu-trigger { display:flex; align-items:center; gap:9px; padding:5px 8px 5px 5px; border:1px solid transparent; border-radius:10px; cursor:pointer; list-style:none; }
    .user-menu-trigger::-webkit-details-marker { display:none; }
    .user-menu-trigger:hover,.user-menu[open] .user-menu-trigger { background:#f0f3ef; border-color:var(--line); }
    .user-menu-trigger:focus-visible { outline:3px solid #f2aa83; outline-offset:2px; }
    .user-avatar { width:30px; height:30px; display:grid; place-items:center; flex:none; border-radius:8px; background:#e1edf0; color:#00637d; font-size:12px; font-weight:700; }
    .user-menu-name { max-width:220px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; font-weight:700; }
    .user-menu-chevron { width:6px; height:6px; flex:none; border-right:1.5px solid #73817b; border-bottom:1.5px solid #73817b; transform:translateY(-2px) rotate(45deg); }
    .user-menu-panel { position:absolute; top:calc(100% + 8px); right:0; z-index:20; width:min(270px,calc(100vw - 24px)); padding:6px; border:1px solid var(--line); border-radius:12px; background:#fff; box-shadow:0 16px 35px rgba(20,43,42,.13); }
    .user-menu-identity { display:grid; gap:1px; padding:10px 11px 12px; border-bottom:1px solid var(--line); }
    .user-menu-identity strong,.user-menu-identity span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .user-menu-identity strong { font-size:13px; }
    .user-menu-identity span { color:var(--muted); font-size:12px; }
    .user-menu-signout { width:100%; padding:9px 11px; border:0; border-radius:7px; background:transparent; color:var(--ink); text-align:left; font-size:13px; font-weight:600; }
    .user-menu-signout:hover { background:#f0f3ef; }
    .demo-pill { white-space:nowrap; border:1px solid #f4c9b3; color:#b15f3e; background:#fff2e9; padding:6px 10px; border-radius:100px; font:600 11px 'Inter',sans-serif; }
    .user-select { border:1px solid var(--line); background:#fff; border-radius:9px; color:var(--ink); padding:8px 26px 8px 10px; font-weight:700; max-width:154px; }
    .avatar { width:32px; height:32px; display:grid; place-items:center; border-radius:9px; color:#e6f7ef; background:#34584b; font-weight:700; font-size:12px; }
    main { width:100%; padding:33px 38px 70px; }
    .page-heading { display:flex; align-items:end; justify-content:space-between; gap:20px; margin-bottom:24px; }
    .page-heading h1 { font-size:32px; line-height:1.16; letter-spacing:-.04em; margin:6px 0 6px; font-weight:700; }
    .page-heading p { margin:0; color:var(--muted); font-size:14px; }
    .page-actions { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
    .btn { border:1px solid var(--line); background:var(--paper); color:var(--ink); border-radius:10px; min-height:39px; padding:8px 13px; display:inline-flex; align-items:center; justify-content:center; gap:8px; font-weight:700; font-size:13px; white-space:nowrap; transition:transform .16s, box-shadow .16s, background .16s; }
    .btn:hover { transform:translateY(-1px); box-shadow:0 5px 13px rgba(20,43,42,.1); }
    .btn.primary { background:var(--deep); color:#fff; border-color:var(--deep); }
    .btn.accent { background:var(--accent); color:#fff; border-color:var(--accent); }
    .btn.ghost { background:transparent; border-color:transparent; }
    .btn.small { min-height:34px; padding:6px 10px; font-size:12px; }
    .btn:disabled { opacity:.48; cursor:not-allowed; box-shadow:none; transform:none; }
    .card { background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); }
    .hero { background:var(--deep); color:#fff; border-radius:23px; overflow:hidden; position:relative; min-height:198px; display:flex; justify-content:space-between; gap:20px; padding:27px 29px; box-shadow:0 17px 35px rgba(20,43,42,.14); }
    .hero:before { content:""; position:absolute; inset:auto -80px -155px auto; width:385px; height:385px; border:1px solid rgba(255,255,255,.1); border-radius:50%; box-shadow:0 0 0 52px rgba(255,255,255,.028),0 0 0 105px rgba(255,255,255,.022); }
    .hero:after { content:""; position:absolute; height:4px; left:0; top:0; width:42%; background:linear-gradient(90deg,var(--accent),#f9b47a); }
    .hero-copy { max-width:470px; position:relative; z-index:1; }
    .hero .eyebrow { color:#8fb9ab; }
    .hero h2 { margin:11px 0 8px; font-size:28px; line-height:1.17; letter-spacing:-.055em; font-weight:600; }
    .hero p { margin:0; max-width:420px; color:#b5c9c0; font-size:12px; line-height:1.7; }
    .hero-actions { margin-top:19px; display:flex; gap:8px; }
    .hero .btn { background:#f5f8f4; border-color:#f5f8f4; }
    .hero .btn.ghost { background:rgba(255,255,255,.08); color:#e5f0e8; border-color:rgba(255,255,255,.15); }
    .hero-metric { position:relative; z-index:1; align-self:center; padding-right:25px; text-align:right; }
    .hero-number { font-size:72px; line-height:.95; letter-spacing:-.08em; font-weight:600; }
    .hero-number span { color:#7bbfa4; font-size:29px; vertical-align:top; letter-spacing:0; }
    .hero-metric p { color:#9ab8a9; text-transform:uppercase; font:600 11px 'Inter',sans-serif; letter-spacing:.06em; margin-top:12px; }
    .metrics { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:17px 0 24px; }
    .metric { padding:20px 22px; min-height:118px; }
    .metric .eyebrow { display:flex; align-items:center; gap:8px; }
    .metric-number { font-size:29px; font-weight:700; letter-spacing:-.04em; line-height:1.25; margin-top:10px; }
    .metric-sub { color:var(--muted); font-size:12px; margin-top:2px; }
    .metric-tag { color:var(--green); font-size:11px; font-weight:700; }
    .grid-2 { display:grid; grid-template-columns:minmax(0,1.38fr) minmax(300px,.9fr); gap:15px; margin-bottom:24px; }
    .overview-single { margin-bottom:24px; }
    .section-card { padding:22px 24px; }
    .card-head { display:flex; align-items:start; justify-content:space-between; gap:15px; margin-bottom:18px; }
    .card-head h2, .section-head h2 { margin:0; font-size:18px; line-height:1.3; letter-spacing:-.025em; }
    .card-head p { margin:3px 0 0; color:var(--muted); font-size:12px; }
    .link-btn { border:0; background:none; color:#b46242; padding:2px; font-size:12px; font-weight:700; display:inline-flex; align-items:center; gap:5px; }
    .link-btn:hover { text-decoration:underline; }
    .issue { display:flex; align-items:center; gap:13px; padding:15px 0; border-top:1px solid #eef1ed; }
    .issue:first-of-type { border-top:0; padding-top:0; }
    .issue-icon { width:35px; height:35px; display:grid; place-items:center; border-radius:10px; flex:none; }
    .issue-icon.warn { background:var(--amber-soft); color:var(--amber); }
    .issue-icon.bad { background:var(--red-soft); color:var(--red); }
    .issue-icon.info { background:#e9f0f5; color:var(--blue); }
    .issue-main { flex:1; min-width:0; }
    .issue-main strong { display:block; font-size:14px; }
    .issue-main span { color:var(--muted); font-size:13px; }
    .issue .link-btn { white-space:nowrap; }
    .run { display:flex; gap:12px; padding:12px 0; align-items:start; }
    .run-track { display:flex; flex-direction:column; align-items:center; align-self:stretch; }
    .run-dot { width:8px; height:8px; border-radius:50%; background:var(--green); margin-top:5px; flex:none; }
    .run-dot.warn { background:var(--amber); } .run-dot.bad { background:var(--red); }
    .run-line { width:1px; flex:1; margin-top:6px; background:#e6ebe5; min-height:21px; }
    .run:last-child .run-line { display:none; }
    .run-copy { min-width:0; flex:1; }
    .run-copy strong { display:block; font-size:14px; }
    .run-copy span { color:var(--muted); font-size:13px; }
    .run-time { white-space:nowrap; color:#87958d; font:12px 'Inter',sans-serif; padding-top:2px; }
    .section-head { display:flex; align-items:end; justify-content:space-between; gap:15px; margin:26px 0 13px; }
    .section-head p { color:var(--muted); margin:4px 0 0; font-size:12px; }
    .table-wrap { overflow:auto; }
    table { width:100%; border-collapse:collapse; text-align:left; }
    th { color:#74857b; font:700 12px 'Inter',sans-serif; text-transform:uppercase; letter-spacing:.04em; padding:14px 18px; background:#fafbf9; white-space:nowrap; }
    td { padding:16px 18px; border-top:1px solid #eff2ee; font-size:14px; vertical-align:middle; }
    .app-name { border:0; background:none; font-weight:700; color:var(--ink); padding:0; text-align:left; font-size:13px; }
    .app-name:hover { color:#bc6646; text-decoration:underline; }
    .subline { color:#87958d; font-size:12px; margin-top:2px; }
    .status { display:inline-flex; align-items:center; gap:6px; border-radius:100px; padding:6px 9px; white-space:nowrap; font-size:12px; font-weight:700; }
    .status:before { content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }
    .status.healthy { color:var(--green); background:var(--green-soft); }
    .status.warning { color:var(--amber); background:var(--amber-soft); }
    .status.failed { color:var(--red); background:var(--red-soft); }
    .status.running { color:var(--blue); background:#edf3f7; }
    .tiny-bar { height:6px; background:#e9efe9; border-radius:20px; width:75px; overflow:hidden; display:inline-block; vertical-align:middle; margin-right:7px; }
    .tiny-bar i { height:100%; display:block; background:#78b29d; border-radius:20px; }
    .table-action { color:#a9b4ac; border:0; background:none; padding:5px; }
    .table-action:hover { color:var(--accent); }
    .toolbar { display:flex; justify-content:space-between; align-items:center; gap:12px; margin:0 0 14px; flex-wrap:wrap; }
    .search { position:relative; width:min(100%,320px); }
    .search .icon { position:absolute; left:12px; top:11px; color:#93a199; width:16px; height:16px; }
    .search input { width:100%; border:1px solid var(--line); border-radius:10px; background:#fff; padding:9px 12px 9px 36px; color:var(--ink); outline:none; font-size:13px; }
    .search input:focus { border-color:#b7d2c2; box-shadow:0 0 0 3px #e8f4ec; }
    .filters { display:flex; gap:5px; }
    .filter { border:1px solid var(--line); border-radius:8px; color:#74817b; background:#fff; padding:7px 10px; font-size:12px; font-weight:700; }
    .filter.active { color:#fff; background:var(--deep); border-color:var(--deep); }
    .info-banner { display:flex; gap:11px; align-items:start; border:1px solid #eadfca; background:#fffbf0; color:#77643d; border-radius:12px; padding:13px 15px; font-size:13px; margin-bottom:15px; }
    .info-banner .icon { color:#c18b3b; }
    .back-link { display:inline-flex; align-items:center; gap:6px; border:0; background:transparent; color:#86938b; font-size:13px; font-weight:700; padding:0; margin-bottom:13px; }
    .back-link:hover { color:var(--ink); }
    .app-head { display:flex; align-items:center; gap:13px; }
    .app-logo { width:41px; height:41px; display:grid; place-items:center; flex:none; overflow:hidden; border-radius:12px; background:#e3eee7; color:#315b47; font-size:17px; font-weight:700; }
    .app-logo img { display:block; width:100%; height:100%; object-fit:cover; }
    .tabs { display:flex; gap:22px; border-bottom:1px solid var(--line); margin:18px 0 20px; overflow:auto; }
    .tab { border:0; background:none; border-bottom:2px solid transparent; color:#84928a; padding:0 1px 11px; font-size:13px; font-weight:700; white-space:nowrap; }
    .tab.active { color:var(--ink); border-color:var(--accent); }
    .resource-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(225px,1fr)); gap:13px; }
    .resource { padding:17px; min-height:155px; }
    .resource-top { display:flex; justify-content:space-between; align-items:start; }
    .resource-icon { width:33px; height:33px; display:grid; place-items:center; border-radius:10px; background:#eef2ed; color:#416758; }
    .resource h3 { font-size:14px; margin:14px 0 2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .resource p { font-size:12px; color:var(--muted); margin:0; }
    .resource .resource-foot { display:flex; justify-content:space-between; align-items:center; margin-top:16px; gap:8px; }
    .data-strip { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:15px 0; }
    .data-strip .card { padding:16px; }
    .data-strip strong { display:block; font-size:19px; margin-top:6px; letter-spacing:-.045em; }
    .list-row { display:flex; align-items:center; gap:11px; border-top:1px solid #edf0eb; padding:15px 0; }
    .list-row:first-child { border-top:0; padding-top:0; }
    .list-icon { width:35px; height:35px; display:grid; place-items:center; background:#eef3ed; border-radius:9px; color:#50705b; }
    .list-main { flex:1; min-width:0; }
    .list-main strong { font-size:14px; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .list-main span { color:var(--muted); font-size:12px; }
    .list-end { display:flex; align-items:center; gap:8px; }
    .usage-layout { display:grid; grid-template-columns: minmax(0,1.1fr) minmax(270px,.7fr); gap:15px; }
    .bar-row { display:grid; grid-template-columns:142px 1fr 50px; gap:12px; align-items:center; padding:11px 0; border-top:1px solid #eef1ed; font-size:13px; }
    .bar-row:first-child { border-top:0; }
    .bar-track { background:#ebefec; height:9px; border-radius:20px; overflow:hidden; }
    .bar-track i { height:100%; display:block; background:linear-gradient(90deg,#eaa27a,var(--accent)); border-radius:20px; }
    .bar-row strong { text-align:right; }
    .days { display:grid; grid-template-columns:repeat(7,1fr); gap:11px; height:148px; align-items:end; margin:22px 0 9px; }
    .day { display:flex; flex-direction:column; align-items:center; gap:8px; height:100%; justify-content:end; }
    .day i { background:linear-gradient(180deg,#5eaf8c,#2d785f); width:100%; max-width:29px; min-height:6px; border-radius:6px 6px 3px 3px; }
    .day span { color:var(--muted); font:12px 'Inter',sans-serif; }
    .access-row { display:grid; grid-template-columns:1fr repeat(3,96px); align-items:center; gap:12px; padding:14px 0; border-top:1px solid #edf0eb; font-size:13px; }
    .access-row:first-of-type { border-top:0; }
    .toggle { border:0; width:33px; height:19px; border-radius:20px; background:#dce3dc; position:relative; margin:auto; }
    .toggle:after { content:""; position:absolute; width:13px; height:13px; border-radius:50%; left:3px; top:3px; background:#fff; box-shadow:0 1px 3px #0002; transition:transform .2s; }
    .toggle.on { background:#3b9978; }
    .toggle.on:after { transform:translateX(14px); }
    .empty { padding:35px 20px; text-align:center; color:var(--muted); }
    .empty .icon { width:27px; height:27px; margin-bottom:6px; color:#aab7ac; }
    .empty strong { display:block; color:var(--ink); font-size:13px; }
    .empty p { margin:3px 0 0; font-size:13px; }
    .overlay { position:fixed; inset:0; z-index:20; background:rgba(15,30,27,.46); backdrop-filter:blur(4px); display:grid; place-items:center; padding:18px; }
    .modal { width:min(100%,525px); max-height:min(90vh,780px); overflow:auto; border-radius:19px; background:#fff; box-shadow:0 30px 90px rgba(6,23,17,.25); animation:pop .22s ease-out; }
    .modal.browser-modal { width:min(100%,720px); }
    .modal-head { display:flex; justify-content:space-between; align-items:start; padding:23px 24px 18px; border-bottom:1px solid var(--line); }
    .modal-head h2 { font-size:19px; letter-spacing:-.04em; margin:4px 0 0; }
    .modal-close { border:0; background:#f1f4f0; width:29px; height:29px; border-radius:8px; display:grid; place-items:center; color:#697970; }
    .modal-body { padding:21px 24px; }
    .modal-body p { color:#6e7d75; font-size:12px; margin:0 0 16px; }
    .choice { display:flex; align-items:center; gap:11px; border:1px solid var(--line); border-radius:11px; padding:11px 12px; margin:8px 0; }
    .choice input { accent-color:#237d65; width:15px; height:15px; }
    .choice strong { display:block; font-size:13px; }
    .choice small { display:block; color:var(--muted); font-size:12px; }
    .modal-foot { display:flex; justify-content:flex-end; gap:8px; padding:16px 24px 23px; }
    .file-list { border:1px solid var(--line); border-radius:11px; overflow:hidden; }
    .file-list .list-row { padding:10px 12px; }
    .bucket-meta { display:flex; flex-wrap:wrap; gap:8px 17px; color:var(--muted); font-size:13px; margin-bottom:17px; }
    .bucket-meta strong { color:var(--ink); }
    .breadcrumbs { display:flex; align-items:center; gap:5px; flex-wrap:wrap; margin-bottom:14px; font-size:13px; }
    .breadcrumbs button { border:0; background:transparent; color:var(--green); padding:4px 3px; font-weight:600; }
    .breadcrumbs button:hover { text-decoration:underline; }
    .breadcrumbs .separator { color:#abb8ae; }
    .browser-list-head { display:flex; justify-content:space-between; padding:11px 13px; background:#f7f9f6; border-bottom:1px solid var(--line); color:var(--muted); font:700 11px/1.3 'Inter',sans-serif; text-transform:uppercase; letter-spacing:.05em; }
    .browser-folder { display:flex; align-items:center; width:100%; gap:11px; padding:11px 13px; border:0; border-bottom:1px solid var(--line); background:#fff; color:var(--ink); text-align:left; }
    .browser-folder:hover { background:#f7faf7; }
    .browser-folder .list-icon { color:var(--green); }
    .browser-folder .list-main { min-width:0; }
    .browser-folder .list-main strong,.browser-file .list-main strong { overflow-wrap:anywhere; }
    .browser-folder .icon.sm:last-child { color:var(--muted); }
    .browser-file { display:flex; align-items:center; gap:11px; padding:11px 13px; border-bottom:1px solid var(--line); }
    .browser-file:last-child,.browser-folder:last-child { border-bottom:0; }
    .browser-file .list-main { min-width:0; }
    .browser-file .btn { flex:none; }
    .toast { position:fixed; bottom:23px; right:25px; z-index:30; display:flex; align-items:center; gap:9px; background:var(--deep); color:#fff; padding:11px 14px; border-radius:11px; box-shadow:0 14px 35px rgba(20,43,42,.28); font-size:13px; font-weight:600; max-width:350px; animation:pop .2s ease-out; }
    .toast .icon { color:#80cbae; }
    @keyframes pop { from { transform:translateY(9px); opacity:0; } to { transform:translateY(0); opacity:1; } }
    @media(max-width:1120px) { .metrics { grid-template-columns:repeat(2,1fr); } .resource-grid { grid-template-columns:repeat(2,1fr); } .grid-2,.usage-layout { grid-template-columns:1fr; } }
    @media(max-width:760px) { .shell { display:block; } .sidebar { width:100%; height:auto; min-height:0; position:static; padding:10px 12px; display:block; } .brand { padding:4px 2px 10px; } .brand-mark { width:29px; height:29px; } .nav-label,.sidebar-bottom { display:none; } .nav { display:flex; overflow:auto; padding:1px 0 4px; gap:4px; } .nav button { white-space:nowrap; width:auto; padding:8px 10px; font-size:12px; } .nav .icon { width:15px; height:15px; } .topbar { height:54px; padding:0 16px; } .topbar .demo-pill { display:none; } main { padding:22px 15px 45px; } .page-heading { align-items:start; } .page-heading h1 { font-size:27px; } .hero { min-height:190px; padding:23px; } .hero h2 { font-size:24px; } .hero-metric { display:none; } .resource-grid { grid-template-columns:1fr; } .data-strip { grid-template-columns:1fr; } .bar-row { grid-template-columns:100px 1fr 45px; gap:7px; } .access-row { grid-template-columns:1fr repeat(3,52px); gap:5px; } }
    @media(max-width:460px) { .metrics { grid-template-columns:1fr; gap:8px; } .metric { padding:17px; min-height:105px; } .metric-number { font-size:25px; } .metric-sub { font-size:12px; } .top-right { gap:5px; } .top-right label.eyebrow { display:none; } .user-select { width:112px; padding:6px; font-size:12px; } .avatar { display:none; } .hero .btn.ghost { display:none; } .list-end .btn { font-size:12px; padding:5px 6px; } .browser-file { flex-wrap:wrap; } .browser-file .btn { margin-left:41px; } }
    @media(prefers-reduced-motion:reduce) { *,*:before,*:after { scroll-behavior:auto!important; animation-duration:.01ms!important; transition-duration:.01ms!important; } }

/* Live application views */
.brand,.nav a,.btn,.link-btn,.back-link,.table-app,.browser-folder,.breadcrumbs a { text-decoration:none; }
.nav a { width:100%; color:#53635e; border-radius:11px; display:flex; align-items:center; gap:12px; padding:11px 13px; text-align:left; font-weight:600; transition:background .18s, color .18s, transform .18s; }
.nav a:hover { background:#e6ebe5; color:var(--ink); transform:translateX(2px); }
.nav a.active { background:var(--deep); color:#fff; box-shadow:0 5px 12px rgba(20,43,42,.14); }
.crumb span { color:#c5cec6; margin:0 5px; }
.top-right form { margin:0; }
.top-right .link-btn { padding:0; white-space:nowrap; }
.table-app { display:inline-flex; align-items:center; gap:10px; color:var(--ink); white-space:nowrap; }
.table-app .app-logo { width:30px; height:30px; border-radius:8px; font-size:12px; }
.table-app:hover { color:var(--accent); }
.last-backup-cell { white-space:nowrap; }
@media(max-width:760px) { .app-table .last-backup-column { display:none; } }
.sort-button { display:inline-flex; align-items:center; gap:5px; border:0; padding:0; background:transparent; color:inherit; font:inherit; letter-spacing:inherit; text-transform:inherit; cursor:pointer; }
.sort-button:hover,.sort-button:focus-visible { color:var(--ink); }
.sort-indicator { color:#a4b1a9; font-size:12px; font-weight:400; }
th[aria-sort="ascending"] .sort-indicator,th[aria-sort="descending"] .sort-indicator { color:var(--accent); }
.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.list-search { display:flex; align-items:center; gap:9px; margin:0 0 13px; }
.list-search-field { position:relative; display:flex; align-items:center; flex:1 1 260px; max-width:390px; }
.list-search-field .icon { position:absolute; left:12px; color:#87978e; pointer-events:none; }
.list-search-field input { width:100%; min-height:40px; border:1px solid var(--line); border-radius:10px; padding:9px 12px 9px 37px; background:#fff; color:var(--ink); font-size:13px; }
.list-search-field input:focus { border-color:#9bbdae; outline:none; box-shadow:0 0 0 3px #e8f4ec; }
.list-search-clear { border:0; border-radius:7px; padding:8px; background:transparent; color:#a2573d; font-size:12px; font-weight:700; }
.list-search-clear:hover { background:var(--accent-soft); }
.list-search-clear[hidden],.list-search-empty[hidden] { display:none; }
.list-search-count { margin-left:auto; color:var(--muted); font-size:12px; white-space:nowrap; }
.list-search-empty { margin:0 0 12px; padding:14px 16px; border:1px solid var(--line); border-radius:10px; background:#fff; color:var(--muted); font-size:13px; }
.app-table tr[data-list-search-item][hidden],.backup-issue[data-list-search-item][hidden],.list-row[data-list-search-item][hidden] { display:none; }
@media(max-width:600px) { .list-search { flex-wrap:wrap; } .list-search-field { flex-basis:100%; max-width:none; } .list-search-count { margin-left:0; } }
.flash { margin-bottom:20px; }
.flash.error { color:var(--red); background:var(--red-soft); }
.resource-row { display:flex; align-items:center; gap:12px; border-top:1px solid var(--line); padding:13px 0; }
.resource-select { display:flex; align-items:center; gap:11px; flex:1; min-width:0; }
.resource-select input { accent-color:var(--green); width:17px; height:17px; flex:none; }
.resource-select .list-main strong { font-size:12px; }
.resource-row .btn { flex:none; }
.form-footer { display:flex; justify-content:space-between; align-items:center; gap:12px; border-top:1px solid var(--line); padding-top:17px; margin-top:4px; }
.stacked { margin-top:18px; }
.bucket-meta { margin:0 0 18px; }
.breadcrumbs a { color:var(--green); font-weight:700; padding:4px 3px; }
.breadcrumbs a:hover { text-decoration:underline; }
.list-note { font-size:12px; margin-top:12px; }
.access-person { display:grid; gap:1px; margin-bottom:8px; }
.access-person strong,.access-person span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.access-person span { color:var(--muted); font-size:12px; }
.access-line { display:flex; align-items:center; justify-content:space-between; gap:15px; padding:10px 0; border-top:1px solid #f0f2ef; font-size:13px; }
.access-line form { margin:0; }
.access-button { border:0; border-radius:7px; background:transparent; color:var(--red); font-size:12px; font-weight:700; padding:6px 8px; white-space:nowrap; }
.access-button:hover { background:var(--red-soft); }
.access-user { padding:15px 0; border-top:1px solid var(--line); }
.access-user:first-child { border-top:0; }
.access-empty { color:var(--muted); font-size:12px; }
.assignment-row { display:grid; grid-template-columns:minmax(0,1fr) minmax(180px,240px) auto; gap:10px; align-items:center; border-top:1px solid var(--line); padding:13px 0; }
.assignment-resource { display:flex; align-items:center; gap:9px; min-width:0; }
.assignment-resource > span:last-child { min-width:0; }
.assignment-row strong,.assignment-row small { display:block; }
.assignment-row strong { font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.assignment-row small { color:var(--muted); font-size:12px; }
.access-invite { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto; gap:9px; align-items:end; padding-bottom:18px; }
.access-invite label,.access-invite > div { min-width:0; }
.access-invite label > span,.form-label { display:block; margin-bottom:6px; color:var(--muted); font-size:12px; font-weight:700; }
.access-invite input[type=email] { width:100%; min-height:39px; border:1px solid var(--line); border-radius:8px; padding:8px 10px; background:#fff; color:var(--ink); font-size:13px; }
.app-picker { position:relative; min-width:0; }
.app-picker-trigger { display:flex; align-items:center; justify-content:space-between; gap:8px; width:100%; min-height:39px; border:1px solid var(--line); border-radius:8px; padding:8px 10px; background:#fff; color:var(--ink); text-align:left; font-size:13px; cursor:pointer; }
.app-picker-trigger > span:first-child { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.app-picker-trigger:hover,.app-picker.is-open .app-picker-trigger { border-color:#b7c9bf; }
.app-picker.is-invalid .app-picker-trigger { border-color:var(--red); }
.app-picker-menu { position:absolute; top:calc(100% + 6px); right:0; z-index:30; width:min(320px,calc(100vw - 36px)); padding:7px; border:1px solid var(--line); border-radius:10px; background:#fff; box-shadow:0 18px 35px rgba(20,43,42,.16); }
.app-picker-menu[hidden] { display:none; }
.app-picker.open-up .app-picker-menu { top:auto; bottom:calc(100% + 6px); }
.app-picker-search { width:100%; border:1px solid var(--line); border-radius:7px; padding:8px 9px; color:var(--ink); font-size:13px; }
.app-picker-options { max-height:214px; overflow:auto; margin-top:5px; }
.app-picker-options button { display:block; width:100%; border:0; border-radius:6px; padding:9px; background:transparent; color:var(--ink); text-align:left; font-size:13px; cursor:pointer; }
.app-picker-options button:hover,.app-picker-options button:focus-visible { background:#edf3ef; }
.app-picker-options button[hidden],.app-picker-empty[hidden] { display:none; }
.app-picker-empty { padding:12px 9px; color:var(--muted); font-size:12px; }
@media(max-width:760px) { .nav a { white-space:nowrap; width:auto; padding:8px 10px; font-size:12px; } .nav a .icon { width:15px; height:15px; } .top-right .eyebrow { display:none; } .top-right .link-btn { font-size:12px; } .resource-row { flex-wrap:wrap; } .resource-row .status { margin-left:28px; } .resource-row .btn { margin-left:auto; } }
@media(max-width:760px) { .nav { flex-wrap:wrap; overflow:visible; } }
@media(max-width:600px) { .app-table th,.app-table td { padding:10px 9px; } .app-table .table-action { display:none; } .app-table td:first-child { max-width:180px; } .table-app { max-width:100%; } .table-app strong { min-width:0; overflow:hidden; text-overflow:ellipsis; } }
@media(max-width:600px) { .inventory-table th:nth-child(3),.inventory-table td:nth-child(3) { display:none; } }
.cost-total { flex:none; font-size:22px; line-height:1.25; font-variant-numeric:tabular-nums; }
.cost-line { display:grid; grid-template-columns:minmax(0,1fr) minmax(125px,180px) 90px; align-items:center; gap:12px; padding:12px 0; border-top:1px solid var(--line); }
.cost-line-name { min-width:0; display:grid; gap:2px; }
.cost-line-name strong,.cost-resource-head strong { font-size:14px; overflow-wrap:anywhere; }
.cost-line-name span,.cost-resource-head span { display:block; color:var(--muted); font-size:12px; }
.cost-line-usage { color:var(--muted); font-size:13px; text-align:right; }
.cost-line-price { font-size:14px; font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap; }
.cost-resource { padding:16px 0; border-top:1px solid var(--line); }
.cost-resource-head { display:flex; align-items:start; justify-content:space-between; gap:14px; margin-bottom:8px; }
.cost-line-nested { margin-left:16px; padding:9px 0; }
@media(max-width:600px) { .cost-line { grid-template-columns:minmax(0,1fr) auto; gap:2px 10px; } .cost-line-usage { grid-column:1; grid-row:2; text-align:left; } .cost-line-price { grid-column:2; grid-row:1 / span 2; align-self:center; } .cost-line-nested { margin-left:0; } .cost-total { font-size:20px; } }
@media(max-width:460px) { .topbar .crumb { white-space:normal; font-size:12px; } .top-right .demo-pill { display:none; } .top-right .avatar { display:none; } .user-menu-name { display:none; } }
.resource-search { display:flex; gap:8px; margin:0 0 12px; }
.resource-search input { flex:1; min-width:0; border:1px solid var(--line); border-radius:9px; padding:8px 10px; color:var(--ink); background:#fff; font-size:13px; }
.pager { display:flex; justify-content:space-between; align-items:center; gap:8px; margin-top:15px; color:var(--muted); font-size:12px; }
.access-layout { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start; gap:16px; }
.access-section { min-width:0; }
@media(max-width:1450px) { .access-layout { grid-template-columns:1fr; } }
@media(max-width:700px) { .access-invite { grid-template-columns:1fr; } .access-invite .btn { justify-self:start; } .assignment-row { grid-template-columns:minmax(0,1fr) auto; } .assignment-resource { grid-column:1 / -1; } .app-picker-menu { left:0; right:auto; width:min(320px,calc(100vw - 72px)); } }
.login-page { min-height:100vh; display:grid; place-items:center; padding:24px; background:var(--bg); }
.login-panel { width:min(100%,390px); padding:32px; border:1px solid var(--line); border-radius:18px; background:#fff; box-shadow:var(--shadow); }
.login-brand { display:flex; align-items:center; gap:10px; margin-bottom:36px; }
.login-panel h1 { font-size:26px; line-height:1.2; letter-spacing:-.03em; margin:0 0 22px; }
.login-button { display:flex; justify-content:space-between; width:100%; min-height:46px; padding:10px 14px; background:var(--deep); color:#fff; border-color:var(--deep); font-size:14px; }
.login-button .icon { color:var(--accent); }
.login-error { padding:10px 12px; border-radius:9px; margin-bottom:14px; color:var(--red); background:var(--red-soft); font-size:13px; }
@media(max-width:520px) { .login-panel { padding:26px 22px; } }
.table-more { display:flex; justify-content:flex-end; padding:13px 5px 0; }
.restore-point-form { display:flex; flex-wrap:wrap; align-items:center; gap:9px; margin:0 0 18px; }
.restore-point-form label { color:var(--muted); font-size:12px; font-weight:700; }
.restore-point-form select, .restore-point-form input[type=search] { min-width:0; max-width:340px; flex:1; border:1px solid var(--line); border-radius:9px; padding:8px 10px; background:#fff; color:var(--ink); font-size:13px; }
.status.neutral { color:#738079; background:#edf0eb; }
.import-form { max-width:540px; }
.import-form label { display:block; font-weight:700; margin-bottom:8px; }
.import-form input { display:block; width:100%; border:1px solid var(--line); border-radius:9px; padding:10px 12px; background:#fff; color:var(--ink); }
.import-form p { margin:9px 0 20px; font-size:12px; }
.issue-list { overflow:hidden; }
.backup-issue { display:grid; grid-template-columns:35px minmax(140px,1fr) minmax(210px,1.5fr) minmax(130px,1fr); align-items:start; gap:15px; padding:18px 20px; border-top:1px solid var(--line); }
.backup-issue:first-child { border-top:0; }
.backup-issue-main strong,.backup-issue-detail strong { display:block; font-size:14px; }
.backup-issue-main span,.backup-issue-detail span { display:block; color:var(--muted); font-size:12px; margin-top:2px; }
.backup-issue-apps { display:grid; justify-items:start; gap:5px; }
.backup-issue-apps .link-btn { overflow-wrap:anywhere; text-align:left; }
.backup-issue-detail details { margin-top:8px; color:var(--muted); font-size:12px; }
.backup-issue-detail summary { cursor:pointer; }
.backup-issue-detail pre { white-space:pre-wrap; overflow-wrap:anywhere; max-height:180px; overflow:auto; color:var(--ink); }
.retention-fields { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin-bottom:16px; }
.retention-fields label:first-child { grid-column:1/-1; }
.retention-fields label span { display:block; margin-bottom:6px; color:var(--muted); font-size:12px; font-weight:700; }
.retention-fields input,.retention-fields select { width:100%; min-height:40px; border:1px solid var(--line); border-radius:9px; padding:8px 10px; background:#fff; color:var(--ink); font-size:13px; }
.retention-summary { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-bottom:18px; }
.retention-summary > div { padding:15px; border:1px solid var(--line); border-radius:10px; background:#fafbf9; }
.retention-summary strong,.retention-summary span { display:block; }
.retention-summary strong { font-size:22px; }
.retention-summary span { color:var(--muted); font-size:12px; }
@media(max-width:700px) { .retention-fields { grid-template-columns:repeat(2,minmax(0,1fr)); } .retention-summary { grid-template-columns:1fr; } }
@media(max-width:520px) { .retention-fields { grid-template-columns:minmax(0,1fr); } }
@media(max-width:900px) { .backup-issue { grid-template-columns:35px minmax(110px,1fr) minmax(180px,1.5fr); } .backup-issue-apps { grid-column:2 / -1; } }
@media(max-width:560px) { .backup-issue { grid-template-columns:35px 1fr; gap:8px 12px; } .backup-issue-detail,.backup-issue-apps { grid-column:2; } }