/* 10DollarSoft reference design: shared materials and FilePorch workspace. */
@keyframes porchDrift { from { transform:translate3d(-3%,-2%,0) scale(1); } to { transform:translate3d(4%,5%,0) scale(1.08); } }
@keyframes porchEnter { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }
body.app-pop { isolation:isolate; background:#fbf4ea; }
body.app-pop::before { content:""; position:fixed; inset:-10%; z-index:-1; pointer-events:none; background:radial-gradient(ellipse at 7% 12%,#ffccb85c,transparent 42%),radial-gradient(ellipse at 90% 25%,#e1d8ff66,transparent 42%),radial-gradient(ellipse at 55% 90%,#cbe7d452,transparent 44%); animation:porchDrift 22s ease-in-out infinite alternate; }
body.app-pop #header { min-height:76px; height:auto; padding:16px clamp(18px,3vw,48px); background:#fbf4eab8; backdrop-filter:blur(18px) saturate(1.3); border-bottom:1px solid #e9ddd080; }
body.app-pop #header .brand span { color:#e8553d; }
body.app-pop .panel,body.app-pop .card { box-shadow:0 3px 8px #60422104,0 18px 38px #60422109; }
body.app-pop .product-card { overflow:hidden; transition:transform .25s ease,box-shadow .25s ease; }
body.app-pop .product-card:hover { transform:translateY(-5px) rotate(-.3deg); box-shadow:0 22px 44px #60422119; }
body.app-pop .product-art { background:radial-gradient(circle at 85% 10%,#ffffffaa,transparent 65%),var(--product-soft,#f4e3d1); }
body.app-pop .app-dock { border-radius:28px; box-shadow:0 18px 50px #60422126,inset 0 1px 0 #fff; }
body.app-pop .app-dock a:hover .appicon { transform:translateY(-7px) rotate(-5deg); }
body.app-pop dialog[open] { animation:porchEnter .22s ease-out; }
body.app-pop.fp-design { --fp-coral:#e8553d; --fp-dark:#1d1a17; }
body.app-pop.fp-design.fp-workspace #app { max-width:1240px; padding:32px 32px 80px; }
body.app-pop.fp-design.fp-workspace .sx { max-width:none; }
body.app-pop.fp-design.fp-workspace .sx .pagehead { background:none; box-shadow:none; border:0; padding:20px 0 6px; border-radius:0; margin-bottom:26px; color:#1d1a17; }
body.app-pop.fp-design.fp-workspace .sx .pagehead h1 { color:#1d1a17; font-size:clamp(2.4rem,4.2vw,3.6rem); line-height:1.05; letter-spacing:-.055em; }
body.app-pop.fp-design.fp-workspace .sx .pagehead p { color:#76675c; max-width:600px; font-size:16px; }
body.app-pop.fp-design.fp-workspace .sx .pagehead .sx-kicker { color:#aa3e2b; font-size:10px; letter-spacing:.16em; margin-bottom:12px; }
body.app-pop.fp-design.fp-workspace .sx .pagehead .product-mark { display:none; }
body.app-pop.fp-design.fp-workspace .sx .sx-main-nav { display:flex; width:fit-content; max-width:100%; gap:4px; padding:5px; background:#ffffff8f; border:1px solid #fff; border-radius:999px; box-shadow:0 4px 16px #60422106; margin:20px 0 28px; }
body.app-pop.fp-design.fp-workspace .sx .sx-main-nav>a,body.app-pop.fp-design.fp-workspace .sx .sx-main-nav summary { padding:10px 18px; font-size:13px; border-radius:999px; color:#76675c; }
body.app-pop.fp-design.fp-workspace .sx .sx-main-nav>a.active { color:#fff8ee; background:#1d1a17; box-shadow:0 4px 9px #1d1a1726; }
body.app-pop.fp-design.fp-workspace .sx button:not(.secondary):not(.danger):not(.ghost),body.app-pop.fp-design.fp-workspace .sx .button:not(.secondary):not(.danger):not(.ghost) { background:linear-gradient(#f36c52,#e8553d); color:#fff; border-color:transparent; box-shadow:inset 0 2px 0 #ffffff66,0 8px 18px #e8553d26; }
body.app-pop.fp-design.fp-workspace .sx button:not(:disabled):hover,body.app-pop.fp-design.fp-workspace .sx .button:hover { transform:translateY(-2px); }
body.app-pop.fp-design.fp-workspace .sx button:disabled { box-shadow:none; transform:none; }
body.app-pop.fp-design.fp-workspace .sx .sx-card { background:#fffdf9; border:1px solid #fff; border-radius:26px; box-shadow:0 2px 5px #60422104,0 12px 30px #60422108; }
body.app-pop.fp-design.fp-workspace .sx .fp-delivery-metrics { grid-template-columns:1.25fr 1fr 1fr 1fr; gap:16px; margin:26px 0; }
body.app-pop.fp-design.fp-workspace .sx .fp-delivery-metrics .sx-metric { border:1px solid #fff9; border-radius:24px; padding:24px; min-height:195px; position:relative; overflow:hidden; box-shadow:0 10px 25px #60422109; }
body.app-pop.fp-design.fp-workspace .sx .fp-delivery-metrics strong { font-size:40px; letter-spacing:-.055em; }
body.app-pop.fp-design.fp-workspace .sx .fp-delivery-metrics small { font-size:12px; line-height:1.45; }
body.app-pop.fp-design.fp-workspace .sx .fp-metric-total { background:radial-gradient(ellipse at 90% 0,#6c483d,transparent 75%),#241d19; }
body.app-pop.fp-design.fp-workspace .sx .fp-metric-total::after { content:""; width:130px; height:130px; border:1px solid #ffffff17; border-radius:50%; position:absolute; right:-30px; bottom:-45px; box-shadow:0 0 0 24px #ffffff05,0 0 0 48px #ffffff03; pointer-events:none; }
body.app-pop.fp-design.fp-workspace .sx .fp-metric-drafts { background:#fffdf9; }
body.app-pop.fp-design.fp-workspace .sx .fp-metric-published { background:linear-gradient(145deg,#e6f4e7,#cde9d6); }
body.app-pop.fp-design.fp-workspace .sx .fp-metric-storage { background:linear-gradient(145deg,#ffeadb,#fbd5bf); }
body.app-pop.fp-design.fp-workspace .sx .fp-storage-meter { appearance:none; width:100%; height:6px; border:0; border-radius:8px; margin:12px 0 0; background:#a6512720; overflow:hidden; }
.fp-storage-meter::-webkit-meter-bar { background:#a6512720; border:0; }
.fp-storage-meter::-webkit-meter-optimum-value { background:#bc643e; border-radius:8px; }
body.app-pop.fp-design.fp-workspace .sx .sx-help-inline { border:1px solid #e8dbcc; background:#ffffff45; border-radius:16px; padding:12px 16px; font-size:13px; }
body.app-pop.fp-design.fp-workspace .sx.fp-delivery-list .sx-toolbar { display:grid; grid-template-columns:minmax(0,1fr) 200px; gap:14px; margin:26px 0 20px; }
body.app-pop.fp-design.fp-workspace .sx.fp-delivery-list #sx-list { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; }
body.app-pop.fp-design.fp-workspace .sx.fp-delivery-list .fp-delivery-card { padding:0 23px 23px; overflow:hidden; position:relative; display:flex; flex-direction:column; transition:transform .25s ease,box-shadow .25s ease; animation:porchEnter .45s ease-out both; }
body.app-pop.fp-design.fp-workspace .sx.fp-delivery-list .fp-delivery-card:nth-child(3n+2) { animation-delay:.06s; }
body.app-pop.fp-design.fp-workspace .sx.fp-delivery-list .fp-delivery-card:nth-child(3n+3) { animation-delay:.12s; }
body.app-pop.fp-design.fp-workspace .sx.fp-delivery-list .fp-delivery-card:hover { transform:translateY(-6px) rotate(-.4deg); box-shadow:0 22px 40px #6042211c; }
body.app-pop.fp-design.fp-workspace .sx.fp-delivery-list .fp-delivery-cover { height:157px; min-height:157px; margin:0 -23px 22px; position:relative; overflow:hidden; border:0; background:radial-gradient(ellipse at 90% 10%,#ffe5b5,transparent 65%),linear-gradient(140deg,#e8b597,#f6dfbf); }
body.app-pop.fp-design.fp-workspace .sx.fp-delivery-list .fp-delivery-card:nth-child(3n+2) .fp-delivery-cover { background:radial-gradient(ellipse at 85% 0,#efe7ff,transparent 65%),linear-gradient(140deg,#b7abcf,#ddd1ed); }
body.app-pop.fp-design.fp-workspace .sx.fp-delivery-list .fp-delivery-card:nth-child(3n+3) .fp-delivery-cover { background:radial-gradient(ellipse at 85% 0,#e2f2cf,transparent 65%),linear-gradient(140deg,#95baa8,#cbded0); }
body.app-pop.fp-design.fp-workspace .sx.fp-delivery-list .fp-delivery-cover .fp-delivery-emblem { position:absolute; width:78px; height:94px; border-radius:8px; left:38px; bottom:-15px; background:#fffcf5; color:#b96940; transform:rotate(-12deg); box-shadow:inset 0 2px 0 #fff,5px 10px 20px #60422124; z-index:1; }
body.app-pop.fp-design.fp-workspace .sx.fp-delivery-list .fp-delivery-cover::before { content:""; position:absolute; width:78px; height:96px; background:#ffffffa1; border:1px solid #fff; border-radius:8px; left:72px; bottom:-12px; transform:rotate(7deg); box-shadow:0 8px 20px #60422118; }
body.app-pop.fp-design.fp-workspace .sx.fp-delivery-list .fp-delivery-cover svg { width:40px; height:40px; color:#a45e39; }
body.app-pop.fp-design.fp-workspace .sx.fp-delivery-list .fp-cover-count { position:absolute; bottom:15px; right:16px; background:#fff9; backdrop-filter:blur(8px); padding:5px 10px; border-radius:999px; font-size:11px; font-weight:700; color:#493c32; }
body.app-pop.fp-design.fp-workspace .sx.fp-delivery-list .fp-delivery-card-top { position:absolute; top:14px; left:14px; right:14px; z-index:2; }
body.app-pop.fp-design.fp-workspace .sx.fp-delivery-list .fp-delivery-card h3 { font-size:23px; line-height:1.15; letter-spacing:-.035em; margin:0 0 12px; overflow-wrap:anywhere; }
body.app-pop.fp-design.fp-workspace .sx.fp-delivery-list .fp-delivery-card>p { font-size:13px; line-height:1.55; }
body.app-pop.fp-design.fp-workspace .sx.fp-delivery-list .fp-delivery-card>.button { margin-top:auto; align-self:flex-start; font-size:12px; padding:9px 15px; }
body.app-pop.fp-design.fp-workspace .sx .sx-section-nav { background:#ffffff80; border:1px solid #fff; border-radius:18px; padding:6px; gap:5px; }
body.app-pop.fp-design.fp-workspace .sx .sx-section-nav a { border-radius:12px; }
body.app-pop.fp-design.fp-workspace .sx .sx-file { border-radius:15px; padding:18px; background:#fbf4ea55; margin:10px 0; border:1px solid #eaded466; }
body.app-pop.fp-design.fp-workspace .sx .sx-file:hover { background:#fbf4ea; }
@media(max-width:950px) {
 body.app-pop.fp-design.fp-workspace .sx .fp-delivery-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); }
 body.app-pop.fp-design.fp-workspace .sx.fp-delivery-list #sx-list { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:600px) {
 body.app-pop.fp-design.fp-workspace #app { padding:20px 18px 70px; }
 body.app-pop.fp-design #header .subbrand { width:auto; }
 body.app-pop.fp-design #header nav { width:auto; margin-left:auto; }
 body.app-pop.fp-design #header .brand { font-size:19px!important; }
 body.app-pop.fp-design #header .current-app-name { font-size:14px; }
 body.app-pop.fp-design.fp-workspace .sx .pagehead { padding-top:4px; gap:18px; }
 body.app-pop.fp-design.fp-workspace .sx .pagehead h1 { font-size:38px; }
 body.app-pop.fp-design.fp-workspace .sx .sx-main-nav { border-radius:20px; flex-wrap:wrap; gap:2px; }
 body.app-pop.fp-design.fp-workspace .sx .sx-main-nav>a,body.app-pop.fp-design.fp-workspace .sx .sx-main-nav summary { padding:9px 12px; font-size:12px; }
 body.app-pop.fp-design.fp-workspace .sx .fp-delivery-metrics { gap:10px; }
 body.app-pop.fp-design.fp-workspace .sx .fp-delivery-metrics .sx-metric { padding:17px; min-height:175px; }
 body.app-pop.fp-design.fp-workspace .sx .fp-delivery-metrics strong { font-size:32px; }
 body.app-pop.fp-design.fp-workspace .sx.fp-delivery-list #sx-list { grid-template-columns:1fr; }
 body.app-pop.fp-design.fp-workspace .sx.fp-delivery-list .sx-toolbar { grid-template-columns:minmax(0,1fr); }
 body.app-pop.fp-design.fp-workspace .sx .sx-card { padding:20px; }
}
@media(prefers-reduced-motion:reduce) { body.app-pop::before,body.app-pop dialog[open],body.app-pop.fp-design.fp-workspace .sx .fp-delivery-card { animation:none!important; } body.app-pop *,body.app-pop *::before,body.app-pop *::after { transition:none!important; scroll-behavior:auto!important; } }
@media print { body.app-pop::before { display:none; } }
/* Raised product tiles retain each application's existing identity. */
body.app-pop .app-dock { width:max-content; max-width:min(760px,calc(100vw - 28px)); gap:14px; }
body.app-pop .app-dock .product-mark,body.app-pop #header .product-mark { background:linear-gradient(145deg,color-mix(in srgb,var(--product-accent) 45%,white),var(--product-accent)); border:1px solid #ffffff70; box-shadow:inset 0 2px 0 #ffffff90,inset 0 -5px 10px #00000014,0 7px 15px color-mix(in srgb,var(--product-accent) 25%,transparent); }
body.app-pop .app-dock .product-glyph,body.app-pop #header .product-glyph { color:#fff; filter:drop-shadow(0 1px 1px #0002); }
body.app-pop .app-dock a:hover .product-mark,body.app-pop .app-dock a:focus-visible .product-mark { transform:translateY(-5px) rotate(-5deg); }
body.app-pop.fp-design #header .brand span:last-child { color:#e8553d; }
body.app-pop.fp-design.fp-workspace .sx.fp-delivery-list .fp-delivery-cover::before { top:auto; z-index:0; }
@media(prefers-reduced-motion:reduce) { body.app-pop .app-dock a:hover .product-mark,body.app-pop .app-dock a:focus-visible .product-mark,body.app-pop .product-card:hover,body.app-pop.fp-design.fp-workspace .sx.fp-delivery-list .fp-delivery-card:hover { transform:none; } }