/* ===========================================================
   device.css — realistic iPhone Pro Max (assembled + exploded)
   palette: titanium grays + blue→violet, no red/yellow
   =========================================================== */

/* shared lens / chip helpers */
.lens { border-radius: 50%; background:
    radial-gradient(circle at 36% 30%, #c7d2ff 0%, #4b5e9e 26%, #0d1326 62%, #05060e 100%);
  box-shadow: 0 0 0 4px #16192b, 0 0 0 5.5px rgba(160,180,255,.25), inset 0 0 6px rgba(0,0,0,.8); position: relative; }
.lens::after { content: ''; position: absolute; inset: 30%; border-radius: 50%; background: radial-gradient(circle at 40% 35%, rgba(150,180,255,.8), transparent 60%); }

/* ============ ASSEMBLED IPHONE (hero) ============ */
.iphone { position: relative; width: 252px; height: 516px; border-radius: 58px;
  background: linear-gradient(145deg, #565c72, #2a2e40 45%, #12141f);
  padding: 6px;
  box-shadow: 0 50px 110px -28px rgba(0,0,0,.8), 0 0 70px -18px rgba(124,58,237,.45),
    inset 0 0 0 1.4px rgba(255,255,255,.16), inset 0 2px 2px rgba(255,255,255,.28); }
.iphone .scrn { position: relative; height: 100%; border-radius: 52px; overflow: hidden;
  background: linear-gradient(160deg, #1a2350 0%, #2b1d54 45%, #0a0d1c 100%); }
.iphone .wp { position: absolute; inset: 0; background:
  radial-gradient(80% 55% at 70% 8%, rgba(124,58,237,.55), transparent 60%),
  radial-gradient(70% 50% at 18% 90%, rgba(59,99,255,.5), transparent 60%); }
.iphone .di { position: absolute; top: 15px; left: 50%; transform: translateX(-50%); width: 92px; height: 27px; background: #04050a; border-radius: 15px; z-index: 6; display: flex; align-items: center; justify-content: flex-end; padding-right: 9px; }
.iphone .di::after { content: ''; width: 9px; height: 9px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #2b3a6b, #05060e); box-shadow: inset 0 0 2px #6f86d8; }
.iphone .ui { position: relative; z-index: 3; height: 100%; display: flex; flex-direction: column; padding: 58px 18px 22px; color: #fff; }
.iphone .ui .time { font-family: 'Geologica'; font-weight: 300; font-size: 56px; line-height: 1; text-align: center; letter-spacing: -.02em; }
.iphone .ui .date { text-align: center; font: 600 12px/1 'Manrope'; color: rgba(255,255,255,.7); margin-top: 6px; }
.iphone .ui .widget { margin-top: auto; background: rgba(16,19,34,.9); border: 1px solid rgba(255,255,255,.14); border-radius: 20px; padding: 15px 16px; }
.iphone .ui .widget .top { display: flex; align-items: center; gap: 10px; }
.iphone .ui .widget .lg { width: 30px; height: 30px; border-radius: 9px; background: var(--grad); display: grid; place-items: center; }
.iphone .ui .widget .tt { font: 700 13px/1.1 'Manrope'; }
.iphone .ui .widget .tt small { display: block; font-weight: 500; color: rgba(255,255,255,.6); font-size: 11px; margin-top: 2px; }
.iphone .ui .widget .pbar { height: 7px; border-radius: 4px; background: rgba(255,255,255,.12); margin-top: 13px; overflow: hidden; }
.iphone .ui .widget .pbar i { display: block; height: 100%; width: 100%; background: var(--grad); }
.iphone .ui .widget .st { display: flex; justify-content: space-between; margin-top: 9px; font: 600 11px/1 'IBM Plex Mono', monospace; color: rgba(255,255,255,.55); }
.iphone .ui .widget .st b { color: #8ad9ad; }
/* side buttons */
.iphone .b { position: absolute; background: linear-gradient(180deg, #6a7088, #353b4f); border-radius: 3px; }
.iphone .b.act { left: -3px; top: 118px; width: 4px; height: 30px; }
.iphone .b.vu  { left: -3px; top: 168px; width: 4px; height: 52px; }
.iphone .b.vd  { left: -3px; top: 232px; width: 4px; height: 52px; }
.iphone .b.pw  { right: -3px; top: 196px; width: 4px; height: 78px; }

/* ============ EXPLODED IPHONE (teardown) ============ */
.ephone-stage { position: relative; width: 460px; height: 600px; display: grid; place-items: center; perspective: 1700px; transform: scale(.9); }
.ephone-stage .ering { position: absolute; width: 380px; height: 380px; border-radius: 50%;
  background: conic-gradient(from 0deg, #4d7cff, #8b5cf6, #a855f7, #4d7cff); filter: blur(80px); opacity: .28; animation: spin 18s linear infinite; }
.xphone { position: relative; width: 224px; height: 462px; transform-style: preserve-3d;
  transform: rotateX(50deg) rotateZ(-30deg); will-change: transform; --ex: 0; }
.xl { position: absolute; left: 50%; top: 50%; width: 224px; height: 462px; margin: -231px 0 0 -112px;
  border-radius: 52px; backface-visibility: hidden; transform: translateZ(calc(var(--z) * (1 + var(--ex))));
  box-shadow: 0 28px 55px -26px rgba(0,0,0,.7); }
/* labels */
.xl .ll { position: absolute; white-space: nowrap; font: 600 11px/1.35 'IBM Plex Mono', monospace; letter-spacing: .04em; color: var(--text); transform: rotateZ(30deg) rotateX(-50deg); transform-origin: left center; opacity: 0; transition: opacity .35s ease; pointer-events: none; }
.xl .ll small { display: block; color: var(--muted); font-weight: 500; letter-spacing: 0; margin-top: 2px; }
.xl .ll::before { content: ''; position: absolute; left: -10px; top: 5px; width: 6px; height: 6px; border-radius: 50%; background: var(--grad); }
.xl .ll.right { left: calc(100% + 22px); top: 14%; }
.xl .ll.left  { right: calc(100% + 22px); top: 60%; text-align: right; }
.xl .ll.left::before { left: auto; right: -10px; }
.xphone.open .xl .ll { opacity: 1; }

/* z-order (front → back) */
.xl-display { --z: 122px; }
.xl-frame   { --z: 70px; }
.xl-logic   { --z: 26px; }
.xl-battery { --z: -20px; }
.xl-magsafe { --z: -66px; }
.xl-camera  { --z: -110px; }
.xl-back    { --z: -156px; }

/* 1 · DISPLAY */
.xl-display { background: linear-gradient(160deg, #1a2350, #2b1d54 50%, #0a0d1c); border: 1.4px solid rgba(255,255,255,.12); overflow: hidden; }
.xl-display .di { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); width: 80px; height: 22px; background: #04050a; border-radius: 13px; z-index: 4; }
.xl-display .wp { position: absolute; inset: 0; background: radial-gradient(80% 55% at 70% 6%, rgba(124,58,237,.5), transparent 60%), radial-gradient(70% 50% at 16% 92%, rgba(59,99,255,.45), transparent 60%); }
.xl-display .du { position: relative; z-index: 2; padding: 44px 16px 18px; height: 100%; display: flex; flex-direction: column; gap: 7px; }
.xl-display .du .t { font: 600 10px/1 'IBM Plex Mono', monospace; letter-spacing: .12em; color: #97a0d4; text-transform: uppercase; }
.xl-display .du .h { font-family: 'Geologica'; font-weight: 600; font-size: 19px; line-height: 1.06; }
.xl-display .du .h b { background: var(--grad-soft); -webkit-background-clip: text; background-clip: text; color: transparent; }
.xl-display .du .sp { flex: 1; }
.xl-display .du .bar { height: 6px; border-radius: 4px; background: rgba(255,255,255,.1); overflow: hidden; }
.xl-display .du .bar i { display: block; height: 100%; background: var(--grad); }

/* 2 · TITANIUM FRAME */
.xl-frame { background: transparent; border-radius: 52px;
  border: 7px solid transparent; border-image: linear-gradient(150deg, #aeb6d6, #6470a0 45%, #b69bff) 1;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.16), inset 0 0 22px rgba(124,58,237,.18); }
.xl-frame .fb { position: absolute; background: linear-gradient(180deg, #c2c9e6, #6b7299); border-radius: 3px; }
.xl-frame .fb.act { left: -10px; top: 24%; width: 5px; height: 26px; }
.xl-frame .fb.vu  { left: -10px; top: 38%; width: 5px; height: 44px; }
.xl-frame .fb.vd  { left: -10px; top: 52%; width: 5px; height: 44px; }
.xl-frame .fb.pw  { right: -10px; top: 42%; width: 5px; height: 64px; }
.xl-frame .ant { position: absolute; left: 0; right: 0; height: 3px; background: rgba(174,182,214,.5); }
.xl-frame .ant.a1 { top: 16%; } .xl-frame .ant.a2 { bottom: 16%; }

/* 3 · LOGIC BOARD */
.xl-logic { background: linear-gradient(160deg, #10203a, #0a1320); border: 1.4px solid rgba(91,140,255,.3); overflow: hidden; }
.xl-logic .pcb { position: absolute; left: 16px; right: 16px; top: 26px; height: 250px; border-radius: 16px;
  background: linear-gradient(150deg, #14294a, #0c1a30); border: 1px solid rgba(120,150,255,.28); overflow: hidden; }
.xl-logic .pcb .trace { position: absolute; inset: 0; opacity: .5; background:
  linear-gradient(90deg, transparent 49%, rgba(120,150,255,.4) 50%, transparent 51%) 0 0/26px 100%,
  linear-gradient(0deg, transparent 49%, rgba(139,92,246,.3) 50%, transparent 51%) 0 0/100% 26px; }
.xl-logic .chip { position: absolute; border-radius: 5px; background: linear-gradient(135deg, #2f3f6e, #0e1730); border: 1px solid rgba(150,170,255,.3); box-shadow: inset 0 0 6px rgba(0,0,0,.6); }
.xl-logic .chip.soc { left: 50%; top: 70px; transform: translateX(-50%); width: 78px; height: 78px; background: linear-gradient(135deg, #5b6fff, #2a2f7a); display: grid; place-items: center; font: 700 10px/1 'IBM Plex Mono', monospace; color: #cdd6ff; letter-spacing: .08em; }
.xl-logic .chip.m1 { left: 22px; top: 24px; width: 46px; height: 34px; }
.xl-logic .chip.m2 { right: 22px; top: 24px; width: 46px; height: 34px; }
.xl-logic .chip.m3 { left: 30px; bottom: 26px; width: 56px; height: 40px; }
.xl-logic .chip.m4 { right: 26px; bottom: 22px; width: 40px; height: 50px; }
.xl-logic .conn { position: absolute; left: 18px; right: 18px; bottom: 30px; height: 60px; border-radius: 12px; border: 1px dashed rgba(120,150,255,.3); }

/* 4 · BATTERY */
.xl-battery { background: linear-gradient(155deg, #7c64e6, #4a3aa0 55%, #2a2270); border: 1.4px solid rgba(255,255,255,.14); overflow: hidden; }
.xl-battery .cell { position: absolute; inset: 26px 22px 60px; border-radius: 22px; background:
  repeating-linear-gradient(122deg, rgba(255,255,255,.07) 0 16px, transparent 16px 34px),
  linear-gradient(160deg, #8b74f2, #4636a3); box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); }
.xl-battery .cap { position: absolute; left: 0; right: 0; bottom: 26px; text-align: center; font: 700 13px/1.2 'IBM Plex Mono', monospace; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.4); }
.xl-battery .cap small { display: block; font-weight: 500; color: rgba(255,255,255,.7); font-size: 10px; }

/* 5 · MAGSAFE + TAPTIC */
.xl-magsafe { background: linear-gradient(160deg, #161a2c, #0b0e18); border: 1.4px solid rgba(255,255,255,.08); }
.xl-magsafe .coil { position: absolute; top: 96px; left: 50%; transform: translateX(-50%); width: 132px; height: 132px; border-radius: 50%;
  background: repeating-radial-gradient(circle, rgba(150,170,255,.32) 0 2px, transparent 2px 8px); }
.xl-magsafe .coil::after { content: ''; position: absolute; inset: 30px; border-radius: 50%; border: 8px solid rgba(124,58,237,.35); box-shadow: inset 0 0 14px rgba(124,58,237,.4); }
.xl-magsafe .mag { position: absolute; inset: 86px auto auto 50%; transform: translateX(-50%); width: 152px; height: 152px; border-radius: 50%; border: 1px dashed rgba(150,170,255,.25); }
.xl-magsafe .taptic { position: absolute; left: 28px; right: 28px; bottom: 40px; height: 44px; border-radius: 12px; background: linear-gradient(160deg, #2a3050, #12162a); border: 1px solid rgba(150,170,255,.22); display: grid; place-items: center; font: 600 9px/1 'IBM Plex Mono', monospace; letter-spacing: .14em; color: #8d97c9; text-transform: uppercase; }

/* 6 · CAMERA MODULE */
.xl-camera { background: transparent; }
.xl-camera .plate { position: absolute; top: 18px; left: 16px; width: 138px; height: 138px; border-radius: 36px;
  background: linear-gradient(150deg, #2a3050, #11141f); border: 1.4px solid rgba(180,190,230,.35);
  box-shadow: 0 10px 26px -8px rgba(0,0,0,.7), inset 0 0 0 1px rgba(255,255,255,.08); }
.xl-camera .plate .lens { position: absolute; width: 50px; height: 50px; }
.xl-camera .plate .lens.l1 { top: 14px; left: 16px; }
.xl-camera .plate .lens.l2 { top: 14px; right: 16px; }
.xl-camera .plate .lens.l3 { bottom: 14px; left: 16px; }
.xl-camera .plate .lidar { position: absolute; bottom: 30px; right: 30px; width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #6f86d8, #10131f); box-shadow: inset 0 0 4px #000; }
.xl-camera .plate .flash { position: absolute; bottom: 60px; right: 28px; width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle, #dfe6ff, #8b93c0); }

/* 7 · BACK GLASS */
.xl-back { background: linear-gradient(150deg, #2c3145, #2a2f44 45%, #121521);
  border: 1.4px solid rgba(255,255,255,.08); overflow: hidden; }
.xl-back .matte { position: absolute; inset: 0; background: radial-gradient(120% 80% at 30% 10%, rgba(124,58,237,.14), transparent 55%); }
.xl-back .bump { position: absolute; top: 16px; left: 14px; width: 142px; height: 142px; border-radius: 38px; border: 1.5px dashed rgba(180,190,230,.3); }
.xl-back .mark { position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); width: 56px; opacity: .5; }

/* ---- hero floating price card + chips ---- */
.pricecard { position: absolute; left: -86px; bottom: 54px; width: 234px; z-index: 7;
  background: rgba(15,18,34,.96); border: 1px solid var(--line);
  border-radius: 20px; padding: 16px; box-shadow: 0 30px 60px -20px rgba(0,0,0,.75), 0 0 40px -16px rgba(124,58,237,.5); }
.pricecard .ph { display: flex; gap: 11px; align-items: center; }
.pricecard .thumb { width: 44px; height: 44px; border-radius: 12px; background: var(--grad); display: grid; place-items: center; flex-shrink: 0; }
.pricecard .pt { font: 700 14px/1.1 'Manrope'; }
.pricecard .pt small { display: block; font-weight: 500; color: var(--muted); font-size: 12px; margin-top: 3px; }
.pricecard .price { display: flex; align-items: baseline; gap: 9px; margin-top: 14px; }
.pricecard .now { font-family: 'Geologica'; font-weight: 600; font-size: 25px; }
.pricecard .old { text-decoration: line-through; color: var(--muted); font: 600 13px/1 'Manrope'; }
.pricecard .disc { margin-left: auto; font: 700 12px/1 'Manrope'; color: #fff; background: var(--grad); padding: 5px 8px; border-radius: 7px; }
.pricecard .meta { margin-top: 10px; font: 600 11px/1 'IBM Plex Mono', monospace; color: var(--muted); letter-spacing: .04em; }
.pricecard .bk { margin-top: 14px; width: 100%; background: var(--grad); color: #fff; border-radius: 12px; padding: 12px; font: 700 13px/1 'Manrope'; box-shadow: 0 10px 24px -8px rgba(110,80,240,.6); }

.fchip.f1 { left: auto; right: -70px; top: 96px; }
.fchip.f2 { left: auto; right: -44px; top: 360px; }

@media (max-width: 1040px) {
  .ephone-stage { transform: scale(.82); }
  .pricecard { left: 0; }
}

/* ---- HUD diagnostic ring (anime.js-style scanner, blue→violet) ---- */
.hud { position: absolute; width: 460px; height: 460px; border-radius: 50%; pointer-events: none; }
.hud .ring { position: absolute; border-radius: 50%; }
.hud .glow { inset: 70px; background: radial-gradient(circle, rgba(124,58,237,.5), transparent 66%); filter: blur(34px); }
.hud .seg { inset: 0;
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
  background: conic-gradient(from 0deg, #4d7cff, #8b5cf6, #a855f7, #6366f1, #4d7cff); opacity: .85; animation: spin 26s linear infinite; }
.hud .ticks { inset: 24px;
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 13px), #000 calc(100% - 13px) calc(100% - 4px), transparent calc(100% - 4px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 13px), #000 calc(100% - 13px) calc(100% - 4px), transparent calc(100% - 4px));
  background: repeating-conic-gradient(rgba(180,195,255,.55) 0 .55deg, transparent .55deg 5deg); animation: spin 70s linear infinite reverse; }
.hud .arc { inset: 12px;
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 5px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 5px));
  background: conic-gradient(from 0deg, #b06bff 0 34deg, transparent 34deg 360deg); filter: drop-shadow(0 0 7px #8b5cf6); animation: spin 5.5s linear infinite; }
.hud .dots { inset: 122px;
  -webkit-mask: radial-gradient(circle, #000 58%, transparent 70%);
  mask: radial-gradient(circle, #000 58%, transparent 70%);
  background-image: radial-gradient(rgba(150,170,255,.6) 1.4px, transparent 1.7px); background-size: 13px 13px; opacity: .35; animation: hudpulse 3.4s ease-in-out infinite; }
@keyframes hudpulse { 0%,100% { opacity: .2; transform: scale(.98); } 50% { opacity: .55; transform: scale(1.02); } }

/* ============ REALISM PASS — material, depth & detail ============ */
/* glossy material sheen on every solid layer (skip the hollow frame + transparent camera) */
.xl::before { content: ''; position: absolute; inset: 0; border-radius: inherit; z-index: 6; pointer-events: none;
  background: linear-gradient(125deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 22%, rgba(255,255,255,0) 74%, rgba(255,255,255,.05) 100%); }
.xl-frame::before, .xl-camera::before { display: none; }

/* DISPLAY — glass reflection sweep + Dynamic Island sensors */
.xl-display::after { content: ''; position: absolute; inset: 0; border-radius: inherit; z-index: 5; pointer-events: none;
  background: linear-gradient(118deg, transparent 34%, rgba(255,255,255,.12) 47%, transparent 58%); }
.xl-display .di { width: 84px; height: 24px; display: flex; align-items: center; justify-content: space-between; padding: 0 9px; }
.xl-display .di::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #3a4a7d, #06070e); }
.xl-display .di::after { content: ''; width: 5px; height: 5px; border-radius: 50%; background: #0c1020; box-shadow: inset 0 0 2px #2a3a6b; }

/* TITANIUM FRAME — brushed metal + chamfer + button depth */
.xl-frame { border-image: linear-gradient(140deg, #d3d9f0, #7a83ad 30%, #c8b4ff 60%, #6470a0) 1; }
.xl-frame .fb { background: linear-gradient(180deg, #e3e8fb, #8b93bd); box-shadow: -1px 0 1px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.7); }

/* LOGIC BOARD — metal shield cans, SoC, FPC connector, SMD parts */
.xl-logic { background: linear-gradient(160deg, #0f2138, #08111d); }
.xl-logic .pcb { background: linear-gradient(150deg, #123a4a, #0a2030); box-shadow: inset 0 0 0 1px rgba(120,170,200,.25), inset 0 0 30px rgba(0,0,0,.5); }
.xl-logic .chip { background: linear-gradient(150deg, #c2c9e6, #6870a0); border: none;
  box-shadow: inset 0 1.5px 0 rgba(255,255,255,.6), inset 0 -2px 4px rgba(0,0,0,.45), 0 2px 5px rgba(0,0,0,.5); }
.xl-logic .chip::after { content: ''; position: absolute; inset: 4px; border-radius: 3px; border: 1px solid rgba(0,0,0,.18); }
.xl-logic .chip.soc { background: linear-gradient(135deg, #7184ff, #2b2f80); color: #e2e7ff;
  box-shadow: inset 0 0 0 2px rgba(190,200,255,.4), inset 0 2px 5px rgba(255,255,255,.25), 0 4px 10px rgba(0,0,0,.55); }
.xl-logic .conn { border: 1px solid rgba(150,170,255,.4); border-radius: 6px;
  background: repeating-linear-gradient(90deg, rgba(190,200,255,.5) 0 2px, transparent 2px 6px); }

/* BATTERY — dark tray + Li-ion cell with brushed foil, label band & connector tab */
.xl-battery { background: linear-gradient(160deg, #1b1f30, #0b0d17); }
.xl-battery .cell { inset: 36px 20px 56px; border-radius: 24px; background:
  repeating-linear-gradient(118deg, rgba(255,255,255,.10) 0 2px, transparent 2px 20px),
  linear-gradient(150deg, #9e8bf6, #6450c4 48%, #392d80);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.22), inset 0 3px 10px rgba(255,255,255,.18), inset 0 -10px 16px rgba(0,0,0,.32); }
.xl-battery .cell::after { content: ''; position: absolute; left: 16px; right: 16px; top: 20px; height: 34px; border-radius: 9px; border: 1px solid rgba(255,255,255,.28); background: rgba(255,255,255,.05); }
.xl-battery::after { content: ''; position: absolute; top: 18px; left: 50%; transform: translateX(-50%); width: 48px; height: 20px; border-radius: 5px 5px 0 0; z-index: 3;
  background: linear-gradient(180deg, #d6dcf4, #818bb4); box-shadow: inset 0 1px 0 rgba(255,255,255,.7); }

/* CAMERA — raised glossy module + deep coated lenses */
.xl-camera .plate { background: linear-gradient(150deg, #34394f, #0d0f17);
  box-shadow: 0 16px 32px -8px rgba(0,0,0,.85), inset 0 0 0 1px rgba(255,255,255,.12), inset 0 2px 4px rgba(255,255,255,.2); }
.xl-camera .plate .lens { width: 52px; height: 52px;
  box-shadow: 0 0 0 5px #181b2a, 0 0 0 7px rgba(150,170,255,.22), inset 0 0 9px rgba(0,0,0,.9), 0 4px 9px rgba(0,0,0,.6); }

/* BACK GLASS — frosted glass with glossy sweep + raised camera bump */
.xl-back { background: linear-gradient(150deg, #353b54, #20243a 45%, #0f1220); }
.xl-back::after { content: ''; position: absolute; inset: 0; border-radius: inherit; z-index: 4; pointer-events: none;
  background: linear-gradient(115deg, transparent 28%, rgba(255,255,255,.1) 44%, transparent 56%); }
.xl-back .bump { border: none; border-radius: 38px; background: linear-gradient(150deg, #2c3149, #15182a);
  box-shadow: 0 8px 18px -4px rgba(0,0,0,.7), inset 0 0 0 1px rgba(255,255,255,.1), inset 0 2px 3px rgba(255,255,255,.16); }