:root{--bg:#07111f;--panel:#101d2e;--panel2:#132238;--line:#22334a;--muted:#8191a8;--text:#edf5ff;--cyan:#45d7ff;--blue:#488bff;--green:#32d296;--orange:#ffaf45;--red:#ff6378;--shadow:0 16px 40px #0005}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:14px/1.5 Inter,Segoe UI,Arial,sans-serif}.app-shell{min-height:100vh;display:grid;grid-template-columns:248px 1fr}.sidebar{position:sticky;top:0;height:100vh;padding:24px 16px;border-right:1px solid var(--line);background:#091522;display:flex;flex-direction:column;z-index:10}.brand{display:flex;gap:11px;align-items:center;padding:0 8px 28px}.brand-mark{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:linear-gradient(145deg,var(--cyan),var(--blue));font-size:20px;font-weight:900;box-shadow:0 0 25px #45d7ff3c}.brand strong,.brand span{display:block}.brand strong{font-size:17px}.brand span{font-size:10px;letter-spacing:1.5px;color:var(--muted);text-transform:uppercase}nav{display:grid;gap:4px}.nav-item{border:0;background:transparent;color:#9caec3;text-align:left;padding:10px 12px;border-radius:9px;cursor:pointer;display:flex;gap:11px;align-items:center;font-size:13px}.nav-item .ico{width:20px;text-align:center}.nav-item:hover,.nav-item.active{color:#fff;background:#16263a}.nav-item.active{box-shadow:inset 3px 0 var(--cyan)}.nav-label{font-size:10px;color:#5e7087;text-transform:uppercase;letter-spacing:1.3px;margin:18px 12px 6px}.server-card{margin-top:auto;border:1px solid #215549;background:#0d2928;border-radius:11px;padding:12px;display:flex;gap:10px;align-items:center}.status-dot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 10px var(--green)}.server-card strong,.server-card small,.user-card strong,.user-card small{display:block}.server-card strong{font-size:12px}.server-card small,.user-card small{font-size:10px;color:var(--muted)}.user-card{margin-top:12px;border:0;background:transparent;color:var(--text);padding:10px 7px;display:flex;align-items:center;gap:9px;text-align:left}.user-card b{margin-left:auto}.avatar{width:30px;height:30px;border-radius:8px;background:#253c5b;display:grid;place-items:center;font-size:10px}.main{min-width:0}.topbar{height:72px;border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 28px;justify-content:space-between}.breadcrumb{display:flex;gap:9px}.breadcrumb span,.breadcrumb b{color:var(--muted);font-weight:400}.top-actions{display:flex;gap:8px;align-items:center}.icon-btn{width:36px;height:36px;border:1px solid var(--line);background:var(--panel);color:var(--text);border-radius:9px;cursor:pointer}.menu-btn{display:none}.notify{position:relative}.notify i{position:absolute;width:6px;height:6px;border-radius:50%;background:var(--red);right:8px;top:7px}.clock{padding-left:9px;border-left:1px solid var(--line)}.clock strong,.clock span{display:block}.clock span{font-size:10px;color:var(--muted)}.content{padding:28px;max-width:1600px;margin:auto}.hero{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:22px}.hero h1{margin:0 0 3px;font-size:25px}.hero p{margin:0;color:var(--muted)}.hero-actions{display:flex;gap:8px}.btn{border:1px solid var(--line);background:var(--panel2);color:var(--text);padding:9px 14px;border-radius:9px;cursor:pointer}.btn.primary{border:0;background:linear-gradient(135deg,#24b8e8,#3478ef)}.grid{display:grid;gap:16px}.stats{grid-template-columns:repeat(4,1fr);margin-bottom:16px}.card{background:linear-gradient(145deg,#101e30,#0d1929);border:1px solid var(--line);border-radius:13px;box-shadow:0 8px 30px #0002}.stat{padding:17px}.stat-head{display:flex;justify-content:space-between;color:var(--muted);font-size:11px}.stat-head i{font-style:normal;font-size:18px;color:var(--cyan)}.stat-value{font-size:25px;font-weight:750;margin-top:6px}.stat-value small{font-size:12px;color:var(--muted);font-weight:400}.bar{height:5px;background:#23344a;border-radius:9px;overflow:hidden;margin:12px 0 7px}.bar span{display:block;height:100%;border-radius:9px;background:linear-gradient(90deg,var(--blue),var(--cyan))}.delta{font-size:10px;color:var(--muted)}.delta.good{color:var(--green)}.main-grid{grid-template-columns:1.4fr .8fr}.section-card{padding:18px}.card-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}.card-title h2{font-size:14px;margin:0}.card-title span{color:var(--muted);font-size:11px}.storage{display:grid;grid-template-columns:150px 1fr;align-items:center;gap:28px}.donut{width:128px;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--cyan) 0 57%,#34455a 57% 63%,#223148 63%);position:relative}.donut:before{content:"";position:absolute;inset:14px;background:#101d2e;border-radius:50%}.donut div{z-index:1;text-align:center}.donut strong,.donut small{display:block}.donut strong{font-size:22px}.donut small{font-size:9px;color:var(--muted)}.legend{display:grid;gap:11px}.legend-row{display:grid;grid-template-columns:10px 1fr auto;gap:8px;align-items:center}.legend-row i{width:8px;height:8px;border-radius:2px;background:var(--cyan)}.legend-row small{color:var(--muted)}.volume{margin-top:18px;padding-top:14px;border-top:1px solid var(--line)}.volume-head{display:flex;justify-content:space-between}.health-list{display:grid;gap:12px}.health-item{display:flex;align-items:center;gap:11px;padding:11px;background:#142237;border-radius:10px}.health-icon{width:34px;height:34px;border-radius:8px;background:#1a3047;display:grid;place-items:center;color:var(--cyan)}.health-item div:nth-child(2){flex:1}.health-item strong,.health-item small{display:block}.health-item small{color:var(--muted);font-size:10px}.pill{font-size:9px;padding:3px 7px;border-radius:99px;background:#143f36;color:var(--green)}.service-grid{grid-template-columns:repeat(4,1fr);margin-top:16px}.service{padding:15px;display:flex;gap:12px;align-items:center}.service-icon{width:37px;height:37px;border-radius:9px;background:#192d46;display:grid;place-items:center}.service strong,.service small{display:block}.service small{color:var(--muted);font-size:10px}.switch{margin-left:auto;width:30px;height:17px;background:#28405c;border-radius:20px;padding:3px}.switch:after{content:"";display:block;width:11px;height:11px;border-radius:50%;background:#fff;transform:translateX(13px)}.switch.on{background:var(--green)}.table-card{overflow:hidden}.toolbar{padding:14px;display:flex;gap:8px;border-bottom:1px solid var(--line)}.search{flex:1;max-width:360px;border:1px solid var(--line);background:#0b1727;color:#fff;padding:9px 12px;border-radius:8px}table{width:100%;border-collapse:collapse}th,td{padding:13px 16px;border-bottom:1px solid var(--line);text-align:left}th{font-size:10px;color:var(--muted);text-transform:uppercase}td small{color:var(--muted)}.file-name{display:flex;gap:9px;align-items:center}.file-ico{font-size:17px}.empty-page{padding:40px}.module-grid{grid-template-columns:repeat(3,1fr)}.module-card{padding:20px;min-height:150px}.module-card .big-ico{font-size:28px}.toast{position:fixed;right:20px;bottom:20px;background:#17344d;border:1px solid #2f5873;padding:11px 16px;border-radius:9px;opacity:0;transform:translateY(10px);transition:.2s;pointer-events:none}.toast.show{opacity:1;transform:none}
@media(max-width:1050px){.stats,.service-grid{grid-template-columns:repeat(2,1fr)}.main-grid{grid-template-columns:1fr}.module-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.app-shell{grid-template-columns:1fr}.sidebar{position:fixed;transform:translateX(-100%);transition:.25s;width:248px}.sidebar.open{transform:none;box-shadow:var(--shadow)}.menu-btn{display:block}.topbar{padding:0 16px}.breadcrumb span,.breadcrumb b,.clock{display:none}.content{padding:18px}.hero{display:block}.hero-actions{margin-top:14px}.stats,.service-grid,.module-grid{grid-template-columns:1fr}.storage{grid-template-columns:1fr;justify-items:center}.table-card{overflow:auto}.hero h1{font-size:21px}}
.homecloud-mark{width:42px;height:42px;display:block;position:relative;overflow:hidden}.cloud-logo{position:absolute!important;color:#fff;font-size:30px!important;left:5px;top:0;line-height:1}.house-logo{position:absolute!important;color:#0b4e7e;font-size:23px!important;font-weight:900;left:11px;top:15px;line-height:1}.modal-backdrop{position:fixed;inset:0;background:#020812c9;display:none;place-items:center;padding:18px;z-index:50}.modal-backdrop.show{display:grid}.modal{width:min(480px,100%);position:relative;background:#101e30;border:1px solid var(--line);border-radius:16px;padding:25px;box-shadow:var(--shadow)}.modal-close{position:absolute;right:14px;top:12px;border:0;background:transparent;color:var(--muted);font-size:25px;cursor:pointer}.modal h2{margin:0 0 5px}.modal p{color:var(--muted);margin:0 0 20px}.form-grid{display:grid;gap:13px}.form-grid label{display:grid;gap:6px;color:#b5c2d2;font-size:12px}.form-grid input,.form-grid select{width:100%;border:1px solid var(--line);background:#0a1625;color:#fff;padding:11px;border-radius:9px}.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:20px}.account-list{display:grid;gap:10px}.account-row{display:flex;align-items:center;gap:12px;padding:13px;background:#142237;border-radius:10px}.account-row>div{flex:1}.account-row strong,.account-row small{display:block}.account-row small{color:var(--muted)}.settings-grid{grid-template-columns:1fr 1fr}.setting-block{padding:22px}.setting-block h2{margin-top:8px}.app-download{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}.profile-lines{display:grid;gap:12px;margin-top:18px}.profile-line{display:flex;justify-content:space-between;gap:12px;padding-bottom:10px;border-bottom:1px solid var(--line)}.profile-line span{color:var(--muted)}.role-banner{display:flex;align-items:center;gap:10px;background:#102c3b;border:1px solid #265169;padding:10px 14px;border-radius:10px;margin-bottom:16px;color:#aeefff}.usage-feature{grid-column:span 2;padding:24px}.usage-numbers{display:grid;grid-template-columns:1fr 1fr;gap:20px}.usage-number strong{display:block;font-size:30px}.usage-number span{color:var(--muted)}
@media(max-width:760px){.settings-grid{grid-template-columns:1fr}.usage-feature{grid-column:auto}.usage-numbers{grid-template-columns:1fr}}
.synology-note{display:flex;align-items:center;gap:12px;border:1px solid #265169;background:#102c3b;border-radius:12px;padding:13px 15px;margin-bottom:18px}.synology-note>div{flex:1}.synology-note strong,.synology-note small{display:block}.synology-note small{color:#79a8bd;font-size:11px}.synology-icon{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;background:linear-gradient(145deg,#49e1ff,#1689eb);font-weight:900;font-size:18px}.photo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.photo-card{border:1px solid var(--line);background:var(--panel);color:var(--text);border-radius:13px;overflow:hidden;padding:0;text-align:left;cursor:pointer;transition:.2s}.photo-card:hover{transform:translateY(-3px);border-color:#3e6c91;box-shadow:0 15px 35px #0004}.photo-preview{height:150px;display:block;position:relative;overflow:hidden}.photo-preview:before,.photo-preview:after{content:"";position:absolute}.photo-preview:before{width:75%;height:80%;border-radius:50%;background:#fff2;right:-10%;bottom:-40%}.photo-preview:after{width:55%;height:60%;background:#0a3856aa;transform:rotate(35deg);left:-7%;bottom:-35%}.photo-preview i{position:absolute;right:18px;top:13px;font-style:normal;font-size:28px;color:#fff9}.photo-sea{background:linear-gradient(155deg,#ffbc6c,#ff6f75 45%,#247fd0)}.photo-family{background:linear-gradient(145deg,#7ed6b2,#317e9e 55%,#182d59)}.photo-mountain{background:linear-gradient(150deg,#e0c5ff,#7b83d9 45%,#25315b)}.photo-city{background:linear-gradient(140deg,#ffc989,#cd5a6e 48%,#342a58)}.photo-sunset{background:linear-gradient(150deg,#ffd45c,#f47759 48%,#473366)}.photo-night{background:linear-gradient(150deg,#3da8c6,#214276 50%,#111a37)}.photo-meta{display:block;padding:13px 15px}.photo-meta strong,.photo-meta small{display:block}.photo-meta small{color:var(--muted);font-size:10px;margin-top:2px}
@media(max-width:900px){.photo-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:560px){.photo-grid{grid-template-columns:1fr}.synology-note .pill{display:none}}

/* Homecloud light theme */
:root{--bg:#f3f7ff;--panel:#ffffff;--panel2:#f7f9fe;--line:#e1e8f4;--muted:#718096;--text:#182238;--cyan:#16b9df;--blue:#5267e9;--green:#13aa79;--orange:#f39a38;--red:#ef5268;--shadow:0 18px 45px #42608a18}
body{background:radial-gradient(circle at 84% 5%,#dff2ff 0,transparent 26%),radial-gradient(circle at 20% 90%,#e7e6ff 0,transparent 28%),var(--bg);color:var(--text)}
.sidebar{background:#ffffffdf;backdrop-filter:blur(20px);border-right:1px solid #e4eaf4;box-shadow:8px 0 35px #41648a0b}.brand{padding-bottom:30px}.brand strong{color:#1a2740;font-size:18px}.brand span{color:#8897aa}.homecloud-mark{background:linear-gradient(145deg,#32d2e6,#6172f3);box-shadow:0 10px 24px #3fb7e449}.house-logo{color:#eaf9ff}.nav-label{color:#a0acbc;font-weight:700;margin-top:20px}.nav-item{color:#6a788d;font-weight:600}.nav-item:hover{background:#f1f5fc;color:#34445f}.nav-item.active{color:#334dd4;background:linear-gradient(100deg,#e7f1ff,#eef0ff);box-shadow:none}.nav-item.active:after{content:"";width:5px;height:5px;border-radius:50%;background:#5d70ed;margin-left:auto;box-shadow:0 0 0 4px #5d70ed1e}.server-card{background:linear-gradient(135deg,#e8fbf5,#f2fffb);border-color:#ccefe3;color:#146b52}.server-card small{color:#57907f}.user-card{color:#31415a;border-radius:11px}.user-card:hover{background:#f3f6fb}.avatar{background:linear-gradient(145deg,#dceaff,#e7e2ff);color:#3c50b7;font-weight:800}.topbar{background:#ffffffa8;backdrop-filter:blur(14px);border-bottom-color:#e5ebf4}.breadcrumb strong{color:#23334d}.icon-btn{background:#fff;color:#54637a;border-color:#e1e7f0;box-shadow:0 6px 16px #2945680a}.content{padding:32px}.hero{align-items:center;margin-bottom:25px}.hero h1{font-size:28px;color:#17233a;letter-spacing:-.5px}.hero p{color:#7a899e}.btn{background:#fff;color:#41516a;border-color:#dfe6f0;font-weight:650;box-shadow:0 5px 14px #33547c0b}.btn:hover{border-color:#bfcce0;transform:translateY(-1px)}.btn.primary{color:#fff;background:linear-gradient(135deg,#18b8dc,#5b69ed);box-shadow:0 9px 22px #476cdb37}.card{background:#ffffffed;border-color:#e4eaf3;box-shadow:var(--shadow)}
.stat{position:relative;overflow:hidden;padding:20px;border-top:3px solid #42bde4}.stat:nth-child(2){border-top-color:#6e6ce8}.stat:nth-child(3){border-top-color:#f2a44d}.stat:nth-child(4){border-top-color:#25b889}.stat:after{content:"";position:absolute;width:75px;height:75px;border-radius:50%;right:-32px;top:-38px;background:#45bfe414}.stat:nth-child(2):after{background:#716ee817}.stat:nth-child(3):after{background:#f2a44d17}.stat:nth-child(4):after{background:#25b88917}.stat-head{color:#7f8da1;font-weight:700;letter-spacing:.4px}.stat-head i{width:31px;height:31px;border-radius:9px;display:grid;place-items:center;background:#edf9ff;color:#18a8d1}.stat:nth-child(2) .stat-head i{background:#f0efff;color:#6764d9}.stat:nth-child(3) .stat-head i{background:#fff5e9;color:#e08b2f}.stat:nth-child(4) .stat-head i{background:#eafaf5;color:#18a274}.stat-value{color:#1c2940}.bar{background:#edf1f7}.delta{color:#8492a5}.delta.good{color:#169b71}.section-card{padding:22px}.card-title h2{font-size:15px;color:#22314a}.card-title span{color:#8593a5}.donut{background:conic-gradient(#26bddb 0 57%,#7b76eb 57% 63%,#e9edf5 63%);box-shadow:0 10px 30px #30a8d22c}.donut:before{background:#fff}.legend-row i{background:#26bddb}.volume{border-color:#e6ebf3}.health-item{background:#f7f9fd;border:1px solid #edf1f6}.health-icon{background:#e9f7ff;color:#279fc7}.pill{background:#e7f8f2;color:#11865f;font-weight:700}.service{background:#fff}.service-icon{background:#eef3fb;color:#5267b2}.switch{background:#dde4ee}.switch.on{background:#28bd8b}.table-card{background:#fff}.toolbar{border-color:#e6ebf3;background:#fbfcfe}.search{background:#fff;color:#26344b;border-color:#dae3ef}.search::placeholder{color:#9ba7b7}th{background:#f8fafe;color:#8794a6}th,td{border-color:#edf1f6}.module-card{position:relative;overflow:hidden;border-top:3px solid #4dbedc}.module-card:nth-child(2){border-top-color:#766fe4}.module-card:nth-child(3){border-top-color:#f0a044}.module-card .big-ico,.setting-block .big-ico{width:45px;height:45px;border-radius:13px;display:grid;place-items:center;background:linear-gradient(145deg,#e4f7ff,#eef0ff);color:#4771d8}.module-card h2,.setting-block h2{color:#22304a}.module-card p,.setting-block p{color:#7c899c}.modal{background:#fff;border-color:#e1e7f0;color:#243149}.modal-close{color:#718096}.form-grid input,.form-grid select{background:#f8fafe;color:#243149;border-color:#dce4ef}.account-row{background:#f8fafe;border:1px solid #edf1f6}.account-row small{color:#7f8ca0}.setting-block{border-top:3px solid #3cc4df}.setting-block:nth-child(2){border-top-color:#766fe4}.profile-line{border-color:#e7ecf3}.role-banner,.synology-note{background:linear-gradient(100deg,#e7f8ff,#f0f0ff);border-color:#cfddf3;color:#31517b}.synology-note small{color:#7089a3}.synology-icon{color:#fff;box-shadow:0 8px 20px #31a9d93b}.usage-feature{background:linear-gradient(130deg,#fff 40%,#f1f8ff);border-top:3px solid #32bfe0}.usage-number strong{color:#233251}.photo-card{background:#fff;color:#26354d;border-color:#e3e9f2;box-shadow:0 10px 26px #345b850f}.photo-card:hover{border-color:#b7c9e0;box-shadow:0 18px 36px #31587f24}.photo-meta small{color:#8391a4}.toast{background:#273c60;color:#fff;border:0;box-shadow:0 12px 30px #1e355454}
@media(max-width:760px){.sidebar{background:#fff}.content{padding:20px}.hero h1{font-size:24px}}
.document-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px}.summary-item{border:1px solid #e1e8f2;background:#fff;color:#26354d;border-radius:13px;padding:13px;text-align:left;display:flex;align-items:center;gap:11px;cursor:pointer;box-shadow:0 8px 22px #31577b0b;transition:.2s}.summary-item:hover,.summary-item.active{border-color:#87a6f1;box-shadow:0 12px 28px #5267e91a;transform:translateY(-1px)}.summary-item strong,.summary-item small{display:block}.summary-item small{color:#8794a6;font-size:10px}.summary-icon,.doc-icon{display:grid;place-items:center;font-weight:900;color:#fff}.summary-icon{width:36px;height:36px;border-radius:10px}.summary-icon.all{background:linear-gradient(145deg,#22bddd,#6871ea)}.summary-icon.word,.doc-icon.word{background:#3976dc}.summary-icon.excel,.doc-icon.excel{background:#1e9d6d}.summary-icon.pdf,.doc-icon.pdf{background:#e95c63}.doc-icon.text{background:#77859a}.document-name{display:flex;align-items:center;gap:11px}.document-name strong,.document-name small{display:block}.document-name small{color:#8794a6;font-size:10px}.doc-icon{width:35px;height:39px;border-radius:7px;font-size:12px;box-shadow:0 6px 15px #345b8522}.type-chip{font-size:10px;font-weight:750;padding:4px 8px;border-radius:99px}.type-chip.word{color:#2d67c7;background:#e9f1ff}.type-chip.excel{color:#148158;background:#e5f7ef}.type-chip.pdf{color:#c9444e;background:#ffeaec}.type-chip.text{color:#5f6c7e;background:#edf0f4}.row-action{border:0;background:#edf3ff;color:#425ecb;border-radius:7px;padding:6px 10px;cursor:pointer;font-weight:650}.file-count{margin-left:auto;color:#8491a3;font-size:11px;align-self:center}
@media(max-width:900px){.document-summary{grid-template-columns:repeat(2,1fr)}}@media(max-width:560px){.document-summary{grid-template-columns:1fr}}
.logged-out .main{grid-column:1/-1}.logged-out .content{padding:0;max-width:none}.login-page{min-height:100vh;display:grid;place-items:center;padding:24px;background:radial-gradient(circle at 15% 20%,#cdf5ff 0,transparent 28%),radial-gradient(circle at 85% 80%,#ddd8ff 0,transparent 30%),linear-gradient(145deg,#f7fbff,#edf3ff)}.login-card{width:min(420px,100%);background:#ffffffeb;border:1px solid #e0e7f2;border-radius:22px;padding:32px;box-shadow:0 28px 80px #385b8424}.login-brand{display:flex;gap:12px;align-items:center;margin-bottom:30px}.login-brand>div:last-child strong,.login-brand>div:last-child span{display:block}.login-brand>div:last-child strong{font-size:19px}.login-brand>div:last-child span{color:var(--muted);font-size:11px}.login-card h1{font-size:27px;margin:0 0 5px}.login-card>p{color:var(--muted);margin:0 0 22px}.login-card form{display:grid;gap:14px}.login-card label{display:grid;gap:6px;font-size:12px;font-weight:650;color:#51617a}.login-card input{padding:12px 13px;border:1px solid #dbe4ef;border-radius:10px;background:#f9fbfe;color:#1f2f47;font:inherit}.login-card input:focus{outline:3px solid #5267e91e;border-color:#7789e8}.login-button{width:100%;padding:12px;margin-top:5px}.login-note{display:block;text-align:center;color:#91a0b2;margin-top:20px}.login-error{background:#fff0f1;border:1px solid #ffd6da;color:#bd3d4a;padding:10px 12px;border-radius:9px;margin:12px 0}.loading-state{min-height:55vh;display:grid;place-content:center;justify-items:center;color:var(--muted)}.loading-state span{width:32px;height:32px;border:3px solid #dfe7f3;border-top-color:#5267e9;border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.error-card{padding:22px;display:flex;align-items:center;justify-content:space-between;gap:16px}.live-badge{display:inline-flex;align-items:center;gap:7px;background:#e8f8f2;color:#11845f;border:1px solid #cceee2;border-radius:99px;padding:5px 10px;font-size:10px;font-weight:750;margin:-12px 0 16px}.live-badge i{width:7px;height:7px;background:#16ad7c;border-radius:50%;box-shadow:0 0 0 4px #16ad7c18}.pathbar{display:flex;align-items:center;gap:12px;padding:13px 15px;border-bottom:1px solid var(--line);background:#f9fbfe}.pathbar strong{flex:1;color:#364964}.pathbar span{color:var(--muted);font-size:11px}.file-link{border:0;background:transparent;color:var(--text);display:flex;align-items:center;gap:9px;padding:0;cursor:pointer;text-align:left}.file-link:hover strong{color:#4963dc}.row-actions{display:flex;gap:5px}.row-actions button{border:1px solid #e0e7f1;background:#f8fafe;color:#52627a;border-radius:7px;width:29px;height:29px;cursor:pointer}.row-actions button:hover{background:#eaf0ff;color:#425ccd}.empty-state{padding:35px;text-align:center;color:var(--muted)}.real-photo-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}.real-photo{border:1px solid #e0e7f1;background:#fff;border-radius:13px;padding:0;overflow:hidden;text-align:left;color:var(--text);cursor:pointer;box-shadow:0 10px 26px #345b850f}.real-photo img{display:block;width:100%;height:175px;object-fit:cover;background:#edf2f8}.real-photo span{display:block;padding:11px 13px}.real-photo strong,.real-photo small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.real-photo small{color:var(--muted);font-size:10px;margin-top:3px}.real-photo:hover{transform:translateY(-2px);box-shadow:0 16px 35px #345b8520}.usage-number{margin:17px 0}.usage-number small{color:var(--muted)}button:disabled{opacity:.55;cursor:not-allowed}
@media(max-width:1100px){.real-photo-grid{grid-template-columns:repeat(3,1fr)}}@media(max-width:800px){.real-photo-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:520px){.real-photo-grid{grid-template-columns:1fr}.login-card{padding:24px}.pathbar{flex-wrap:wrap}}
.photo-day{margin:26px 0 36px}.photo-day-title{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:13px;padding-bottom:10px;border-bottom:1px solid #dfe6ef}.photo-day-title h2{margin:0;color:#263650;font-size:17px;text-transform:capitalize}.photo-day-title span{color:var(--muted);font-size:11px}.photo-pagination{display:flex;align-items:center;justify-content:center;gap:18px;margin:30px 0 10px}.photo-pagination strong{color:#44536a;font-size:12px}.quota-overview,.quota-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;padding:0;margin-bottom:18px;overflow:hidden;background:#e8edf4}.quota-overview>div,.quota-strip>div{background:#fff;padding:18px 20px}.quota-overview span,.quota-strip span{display:block;color:var(--muted);font-size:11px;margin-bottom:6px}.quota-overview strong,.quota-strip strong{display:block;color:#263650;font-size:21px}.quota-overview p,.quota-strip p{grid-column:1/-1;margin:0;padding:12px 18px;background:#fff0f1;color:#b63c49;font-weight:650}.quota-strip{grid-template-columns:repeat(3,1fr)}.quota-warning{border:1px solid #f0a7ae}.quota-modal{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 13px;background:linear-gradient(100deg,#e7f8ff,#f0f0ff);border:1px solid #cfddf3;border-radius:9px;color:#526783;font-size:12px}.quota-modal strong{color:#285478;font-size:15px}@media(max-width:760px){.quota-overview,.quota-strip{grid-template-columns:1fr 1fr}}@media(max-width:520px){.quota-overview,.quota-strip{grid-template-columns:1fr}.photo-pagination{gap:8px}.photo-pagination .btn{padding:9px}.photo-day-title{align-items:flex-end}}
.quota-breakdown{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.quota-breakdown>div{padding:10px;border:1px solid #e1e8f1;border-radius:9px;background:#f8fafe}.quota-breakdown span,.quota-breakdown strong{display:block}.quota-breakdown span{min-height:28px;color:#7e8da1;font-size:10px}.quota-breakdown strong{margin-top:4px;color:#263650;font-size:13px}@media(max-width:520px){.quota-breakdown{grid-template-columns:1fr}.quota-breakdown span{min-height:0}}
.cache-status{display:flex;align-items:center;gap:9px;width:max-content;max-width:100%;margin:-10px 0 16px;padding:8px 12px;border:1px solid #dce7f2;border-radius:999px;background:#fff;color:#718197;font-size:11px}.cache-status i{width:7px;height:7px;border-radius:50%;background:#32bd8b}.cache-status.working i{background:#6c63e8;box-shadow:0 0 0 5px #6c63e817;animation:cachePulse 1.2s ease-in-out infinite}.cache-note{display:block;margin-top:12px;color:#77879b}.indexing-state{display:flex;align-items:center;justify-content:center;gap:10px}.mini-spinner{width:18px;height:18px;border:2px solid #dce4f1;border-top-color:#6c63e8;border-radius:50%;animation:spin .8s linear infinite}@keyframes cachePulse{50%{opacity:.4;transform:scale(.8)}}
.upload-picker{position:relative}.upload-menu[hidden]{display:none}.upload-menu{position:absolute;right:0;top:calc(100% + 8px);z-index:35;display:grid;width:250px;padding:7px;border:1px solid #dce4ef;border-radius:12px;background:#fff;box-shadow:0 18px 45px #2d46672b}.upload-menu>button{display:flex;align-items:center;gap:11px;width:100%;padding:11px;border:0;border-radius:9px;background:transparent;color:#263650;text-align:left;cursor:pointer}.upload-menu>button:hover{background:#f0f5ff}.upload-menu>button>span{width:34px;height:34px;display:grid;place-items:center;border-radius:9px;background:linear-gradient(145deg,#e4f7ff,#eef0ff);color:#4c68d8;font-size:17px}.upload-menu strong,.upload-menu small{display:block}.upload-menu small{margin-top:2px;color:#8491a4;font-size:10px}@media(max-width:520px){.upload-picker{flex:1}.upload-picker>#uploadBtn{width:100%}.upload-menu{left:0;right:auto;width:min(270px,calc(100vw - 36px))}}
.real-photo{aspect-ratio:4/3;display:grid;place-items:center;padding:6px;background:#101722}.real-photo img{width:100%;height:100%;object-fit:contain;background:#101722}.photo-viewer{position:fixed;inset:0;z-index:90;display:none;padding:18px;background:#060a11f5}.photo-viewer.show{display:grid;place-items:center}.photo-viewer-panel{position:relative;width:100%;height:100%;display:grid;place-items:center}.photo-viewer figure{width:100%;height:100%;margin:0;display:grid;grid-template-rows:minmax(0,1fr) auto;place-items:center}.photo-viewer figure>img{display:block;max-width:100%;max-height:calc(100vh - 105px);width:auto;height:auto;object-fit:contain;border-radius:5px;box-shadow:0 22px 70px #0008}.photo-viewer figcaption{width:min(900px,calc(100% - 150px));display:flex;align-items:center;justify-content:space-between;gap:20px;padding:13px 18px;color:#fff}.photo-viewer figcaption strong,.photo-viewer figcaption small{display:block;max-width:70vw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.photo-viewer figcaption small{color:#aab5c5;margin-top:3px}.photo-viewer figcaption>span{color:#c8d0dc}.viewer-close,.viewer-nav{position:absolute;z-index:2;border:0;border-radius:99px;background:#ffffff18;color:#fff;cursor:pointer;backdrop-filter:blur(10px)}.viewer-close{right:8px;top:8px;width:46px;height:46px;font-size:31px}.viewer-nav{top:50%;transform:translateY(-50%);width:54px;height:74px;font-size:46px}.viewer-prev{left:8px}.viewer-next{right:8px}.viewer-close:hover,.viewer-nav:hover{background:#ffffff2c}.viewer-nav:disabled{opacity:.2}.viewer-open{overflow:hidden}@media(max-width:620px){.photo-viewer{padding:8px}.viewer-close{right:4px;top:4px}.viewer-nav{top:auto;bottom:10px;transform:none;width:48px;height:48px;font-size:36px}.viewer-prev{left:10px}.viewer-next{right:10px}.photo-viewer figcaption{width:calc(100% - 110px);padding:10px 0}.photo-viewer figcaption>span{display:none}.photo-viewer figure>img{max-height:calc(100vh - 82px)}}
.photo-bridge{display:grid;grid-template-columns:80px 1fr;gap:24px;align-items:start;background:linear-gradient(135deg,#fff 45%,#edf7ff);border:1px solid #dfe8f3;border-radius:18px;padding:30px;box-shadow:var(--shadow)}.synology-icon.large{width:64px;height:64px;border-radius:17px;font-size:28px}.photo-bridge h2{font-size:23px;margin:13px 0 5px}.photo-bridge p{color:var(--muted);max-width:780px}.photo-flow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:22px 0}.photo-flow span{background:#fff;border:1px solid #dce5f0;padding:8px 12px;border-radius:9px;font-weight:700;color:#425570}.photo-flow b{color:#6676da}@media(max-width:600px){.photo-bridge{grid-template-columns:1fr;padding:22px}}
.admin-purpose{background:linear-gradient(100deg,#eef3ff,#f6f1ff);border:1px solid #dce3f4;color:#4a5a78;padding:11px 14px;border-radius:11px;margin:-12px 0 16px;font-size:12px;font-weight:650}.usage-table{display:grid}.usage-row{display:grid;grid-template-columns:38px 1fr auto;align-items:center;gap:12px;padding:13px 4px;border-bottom:1px solid #edf1f6}.usage-row:last-child{border-bottom:0}.usage-row>div strong,.usage-row>div small{display:block}.usage-row>div small{color:var(--muted);font-size:10px}.usage-row .bar{max-width:460px;margin:6px 0 0}.usage-row>b{font-size:12px;color:#43536c}.disabled-pill{background:#f1f2f5;color:#818a99}.check-label{display:flex!important;grid-template-columns:auto 1fr!important;align-items:center}.check-label input{width:auto!important}.account-row .btn{margin-left:4px}@media(max-width:650px){.usage-row{grid-template-columns:34px 1fr}.usage-row>b{grid-column:2}.account-row{flex-wrap:wrap}.account-row .btn{width:100%}}
.toast{z-index:70}.form-error{margin:2px 0 0}.form-error[hidden]{display:none}
.real-photo-grid{display:block;columns:4;column-gap:15px}.real-photo{width:100%;height:auto;aspect-ratio:auto;display:block;break-inside:avoid;margin:0 0 15px;padding:0;border:0;border-radius:10px;background:transparent;box-shadow:none;overflow:hidden}.real-photo img{display:block;width:100%;height:auto;max-height:none;object-fit:contain;background:transparent}.real-photo:hover{transform:translateY(-2px);box-shadow:0 10px 24px #345b8518}.photo-viewer{background:#edf4fbf7}.photo-viewer figure>img{max-width:calc(100% - 130px);max-height:calc(100vh - 105px);border-radius:4px;box-shadow:0 18px 55px #34506f28;background:transparent}.photo-viewer figcaption{color:#263650}.photo-viewer figcaption small{color:#6d7d91}.photo-viewer figcaption>span{color:#58697f}.viewer-close,.viewer-nav{background:#ffffffd9;color:#263650;border:1px solid #d5dfe9;box-shadow:0 8px 24px #38557420}.viewer-close:hover,.viewer-nav:hover{background:#fff}.viewer-nav:disabled{opacity:.25}@media(max-width:1100px){.real-photo-grid{columns:3}}@media(max-width:800px){.real-photo-grid{columns:2}}@media(max-width:520px){.real-photo-grid{columns:1}.photo-viewer figure>img{max-width:100%}}
.media-tabs{display:flex;align-items:center;gap:8px;margin:-8px 0 16px}.media-tabs button{border:1px solid #dce5ef;background:#fff;color:#637289;border-radius:99px;padding:9px 15px;font-weight:700;cursor:pointer}.media-tabs button span{display:inline-grid;place-items:center;min-width:20px;height:20px;margin-left:5px;padding:0 5px;border-radius:99px;background:#eef3f8;font-size:10px}.media-tabs button.active{background:#e8f5ff;border-color:#8dcde9;color:#1d7399}.media-tabs button.active span{background:#fff;color:#1d7399}.real-photo-grid{display:flex;columns:auto;flex-wrap:wrap;align-items:flex-start;gap:6px}.real-photo{position:relative;flex:0 0 auto;width:auto;height:190px;max-width:100%;margin:0;padding:0;border:0;border-radius:4px;background:#f2f5f8;box-shadow:none;overflow:hidden}.real-photo img,.real-photo video{display:block;width:auto;height:100%;max-width:100%;object-fit:contain;background:#f2f5f8;pointer-events:none}.video-duration{position:absolute;right:7px;bottom:6px;padding:3px 7px;border-radius:6px;background:#111a;color:#fff;font-size:11px;font-weight:750;line-height:1.2}.video-play{position:absolute;left:8px;bottom:7px;width:25px;height:25px;display:grid;place-items:center;border-radius:50%;background:#fffde8;color:#263650;font-size:10px;font-style:normal}.viewer-media{width:100%;height:100%;min-height:0;display:grid;place-items:center}.viewer-media img,.viewer-media video{display:block;max-width:calc(100% - 130px);max-height:calc(100vh - 105px);width:auto;height:auto;object-fit:contain;border-radius:4px;box-shadow:0 18px 55px #34506f28;background:#000}.viewer-media [hidden]{display:none}.viewer-media video{width:min(1100px,calc(100% - 130px));height:auto;background:#000}@media(max-width:800px){.real-photo{height:165px}}@media(max-width:520px){.media-tabs{overflow-x:auto}.media-tabs button{white-space:nowrap}.real-photo{height:145px}.viewer-media img,.viewer-media video{max-width:100%;max-height:calc(100vh - 82px)}.viewer-media video{width:100%}}
.real-photo-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:stretch;gap:8px;columns:auto}.real-photo{width:100%;height:auto;aspect-ratio:4/3;margin:0;border:1px solid #e1e8f0;border-radius:7px;background:#f4f7fa}.real-photo img,.real-photo video{width:100%;height:100%;object-fit:contain;background:#f4f7fa}.file-context-menu{position:fixed;z-index:120;width:180px;padding:7px;background:#fff;border:1px solid #dce4ee;border-radius:11px;box-shadow:0 18px 55px #314c6b35}.file-context-menu[hidden]{display:none}.file-context-menu button{display:flex;width:100%;border:0;background:transparent;color:#2f4058;padding:9px 11px;border-radius:7px;text-align:left;font:inherit;font-size:12px;cursor:pointer}.file-context-menu button:hover:not(:disabled){background:#edf5ff;color:#3265bc}.file-context-menu button.danger{color:#bd3d4a}.file-context-menu button:disabled{opacity:.35}.file-context-menu span{display:block;height:1px;margin:5px;background:#edf0f4}.clipboard-bar{display:flex;align-items:center;justify-content:space-between;gap:15px;margin:-8px 0 15px;padding:10px 13px;border:1px solid #cfe0f3;border-radius:10px;background:#eef7ff;color:#4b607b;font-size:12px}.toolbar>small{margin-left:auto;color:var(--muted)}tr[draggable="true"]{cursor:grab}tr.dragging{opacity:.4}tr.drop-target td{background:#e7f6ff!important;box-shadow:inset 0 2px #47b5db,inset 0 -2px #47b5db}.cut-row{opacity:.55}.cut-row .file-link strong{text-decoration:line-through}@media(max-width:1100px){.real-photo-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:760px){.real-photo-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.toolbar>small{display:none}}@media(max-width:480px){.real-photo-grid{grid-template-columns:1fr}.clipboard-bar{align-items:flex-start;flex-direction:column}.clipboard-bar .btn{width:100%}}

/* Google Photos-style justified rows. The browser reads each file's real ratio. */
.photo-day{margin:22px 0 30px}.photo-day-title{margin-bottom:8px;padding:0;border:0}.photo-day-title h2{font-size:14px;font-weight:750}.real-photo-grid{--photo-row-height:200px;display:flex;grid-template-columns:none;columns:auto;flex-wrap:wrap;align-items:stretch;gap:4px}.real-photo-grid::after{content:"";height:0;flex:999 1 var(--photo-row-height)}.real-photo{position:relative;display:block;flex:var(--media-ratio,1.333) 1 var(--media-basis,267px);width:auto;min-width:105px;max-width:100%;height:var(--photo-row-height);aspect-ratio:auto;margin:0;padding:0;border:0;border-radius:3px;background:#e9eef4;box-shadow:none;overflow:hidden}.real-photo img,.real-photo video{display:block;width:100%;height:100%;max-width:none;object-fit:cover;background:#e9eef4;pointer-events:none}.real-photo:hover{transform:none;filter:brightness(.94);box-shadow:none}
@media(max-width:900px){.real-photo-grid{--photo-row-height:165px}}
@media(max-width:560px){.photo-day{margin:18px 0 24px}.real-photo-grid{--photo-row-height:130px;gap:3px}.real-photo{min-width:76px;border-radius:2px}}

.file-search-toolbar{align-items:center}.file-search-toolbar .search{flex:0 1 420px;max-width:420px}.file-search-toolbar>small{margin-left:0;color:#718096}.file-search-toolbar .toolbar-note{margin-left:auto}.file-primary{display:grid;min-width:0}.file-primary strong,.file-primary small{display:block;max-width:min(720px,55vw);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.file-primary small{margin-top:2px;color:#8a98aa;font-size:10px;font-weight:500}.search-loading{display:flex;align-items:center;justify-content:center;gap:10px}
.upload-progress-panel[hidden]{display:none}.upload-progress-panel{position:fixed;right:22px;bottom:22px;z-index:150;width:min(370px,calc(100vw - 32px));padding:16px 17px 14px;border:1px solid #d9e3ef;border-radius:15px;background:#fff;color:#263650;box-shadow:0 20px 60px #29456338}.upload-progress-head{display:grid;grid-template-columns:38px minmax(0,1fr) auto;align-items:center;gap:10px}.upload-progress-head>div{min-width:0}.upload-progress-head strong,.upload-progress-head small{display:block}.upload-progress-head strong{font-size:13px}.upload-progress-head small{margin-top:2px;color:#7f8da1;font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.upload-progress-head>b{color:#4268d7;font-size:13px}.upload-progress-icon{width:36px;height:36px;display:grid;place-items:center;border-radius:11px;background:linear-gradient(145deg,#dff7ff,#ecebff);color:#4771d8;font-size:18px;font-weight:800}.upload-progress-track{height:7px;margin:14px 0 9px;border-radius:99px;background:#e9eef5;overflow:hidden}.upload-progress-track span{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,#20b9dd,#6d63e8);transition:width .18s ease}.upload-progress-meta{display:flex;justify-content:space-between;gap:12px;color:#7b899c;font-size:10px}.upload-progress-meta span:last-child{text-align:right}.upload-progress-panel.success .upload-progress-icon{background:#e4f8ef;color:#15956b}.upload-progress-panel.success .upload-progress-track span{background:#28b986}.upload-progress-panel.error{border-color:#ffc9cf}.upload-progress-panel.error .upload-progress-icon{background:#fff0f1;color:#c33f4e}.upload-progress-panel.error .upload-progress-track span{background:#e95b68}body:has(.upload-progress-panel:not([hidden])) .toast{bottom:174px}
@media(max-width:760px){.file-search-toolbar{align-items:stretch;flex-wrap:wrap}.file-search-toolbar .search{flex:1 1 100%;max-width:none}.file-search-toolbar #fileSearchStatus{display:block;width:100%}.file-search-toolbar .toolbar-note{display:none}}
@media(max-width:480px){.upload-progress-panel{right:12px;bottom:12px;width:calc(100vw - 24px)}.upload-progress-meta{display:grid;gap:3px}.upload-progress-meta span:last-child{text-align:left}body:has(.upload-progress-panel:not([hidden])) .toast{bottom:188px}}